Appending user input to exitQueryString method.

8 views

componentsdocs_help-centerdoubleclickeventsgeneral-discussionguidesintegrationissuesbugs

Skip to first unread message

Thomas Art

unread,

Feb 27, 2017, 2:18:05 PM2/27/17

to Google Web Designer beta

I am in a bit of a bind and cannot seem how to appropriately get this function to work. First to explain what I am trying to do and the code with which I am trying to do it. I am looking to build a banner that takes a users input and after submitted, appends it to an exit url.

I am following the guide/code provided by google to do this: guide.

Here is the currently html file that I have:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="generator" content="Google Web Designer 1.7.2.0222">
  <meta name="template" content="Banner 3.0.0">
  <meta name="environment" content="gwd-doubleclick">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="gwdpage_style.css" rel="stylesheet" data-version="8" data-exports-type="gwd-page">
  <link href="gwdpagedeck_style.css" rel="stylesheet" data-version="9" data-exports-type="gwd-pagedeck">
  <link href="gwddoubleclick_style.css" rel="stylesheet" data-version="14" data-exports-type="gwd-doubleclick">
  <link href="gwdimage_style.css" rel="stylesheet" data-version="9" data-exports-type="gwd-image">
  <style type="text/css" id="gwd-lightbox-style">
    .gwd-lightbox {
      overflow: hidden;
    }
  </style>
  <style type="text/css" id="gwd-text-style">
    p {
      margin: 0px;
    }
    h1 {
      margin: 0px;
    }
    h2 {
      margin: 0px;
    }
    h3 {
      margin: 0px;
    }
  </style>
  <style type="text/css">
    html, body {
      width: 100%;
      height: 100%;
      margin: 0px;
    }
    .gwd-page-container {
      position: relative;
      width: 100%;
      height: 100%;
    }
    .gwd-page-content {
      transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      transform-style: preserve-3d;
      position: absolute;
      background-color: transparent;
    }
    .gwd-page-wrapper {
      position: absolute;
      transform: translateZ(0px);
      background-color: rgb(255, 255, 255);
    }
    .gwd-page-size {
      width: 300px;
      height: 250px;
    }
    .gwd-input-1gi6 {
      position: absolute;
      width: 107px;
      height: 28px;
      left: 45px;
      top: 102px;
    }
    .gwd-imagebutton-2dbu {
      position: absolute;
      top: 147px;
      left: 47px;
      width: 107px;
      height: 28px;
    }
    .gwd-div-1ae5 {
      background-image: none;
      background-color: rgb(255, 221, 1);
    }
  </style><script data-source="googbase_min.js" data-version="3" data-exports-type="googbase" src="googbase_min.js"></script><script data-source="gwd_webcomponents_min.js" data-version="5" data-exports-type="gwd_webcomponents" src="gwd_webcomponents_min.js"></script>
  <script
  data-source="gwdpage_min.js" data-version="8" data-exports-type="gwd-page" src="gwdpage_min.js"></script><script data-source="gwdpagedeck_min.js" data-version="9" data-exports-type="gwd-pagedeck" src="gwdpagedeck_min.js"></script><script data-source="https://s0.2mdn.net/ads/studio/Enabler.js" data-exports-type="gwd-doubleclick" src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
    <script
    data-source="gwddoubleclick_min.js" data-version="14" data-exports-type="gwd-doubleclick" src="gwddoubleclick_min.js"></script><script data-source="gwdimage_min.js" data-version="9" data-exports-type="gwd-image" src="gwdimage_min.js"></script><script data-source="gwdimagebutton_min.js" data-version="9" data-exports-type="gwd-imagebutton" src="gwdimagebutton_min.js"></script>
</head>

<body>
  <gwd-doubleclick id="gwd-ad" polite-load="">
    <div is="gwd-pagedeck" class="gwd-page-container" id="pagedeck">
      <div is="gwd-page" id="page1" class="gwd-page-wrapper gwd-page-size gwd-lightbox gwd-div-1ae5" data-gwd-width="300px" data-gwd-height="250px">
        <div class="gwd-page-content gwd-page-size">
          <input class="gwd-input-1gi6" id="zipcode">
          <gwd-imagebutton id="gwd-imagebutton_1" scaling="contain" class="gwd-imagebutton-2dbu" bgcolor="#5FBA7D"></gwd-imagebutton>
        </div>
      </div>
    </div>
  </gwd-doubleclick>
  <script type="text/javascript" id="gwd-init-code">
    (function() {
      var gwdAd = document.getElementById('gwd-ad');
      
      var zipCode = document.getElementById("zipcode").value;
      var exitBtn = document.getElementById("gwd-imagebutton_1");

      function zipExitHandler() {

        // For example, if "10023" is in a text field with id "zipcode".
        Enabler.exitQueryString("my zip exit", "zip="+ zipCode);
      }

      exitBtn.addEventListener('click', zipExitHandler, false);


      /**
       * Handles the DOMContentLoaded event. The DOMContentLoaded event is
       * fired when the document has been completely loaded and parsed.
       */
      function handleDomContentLoaded(event) {

      }

      /**
       * Handles the WebComponentsReady event. This event is fired when all
       * custom elements have been registered and upgraded.
       */
      function handleWebComponentsReady(event) {
        // Start the Ad lifecycle.
        setTimeout(function() {
          gwdAd.initAd();
        }, 0);
      }

      /**
       * Handles the event that is dispatched after the Ad has been
       * initialized and before the default page of the Ad is shown.
       */
      function handleAdInitialized(event) {}

      window.addEventListener('DOMContentLoaded',
        handleDomContentLoaded, false);
      window.addEventListener('WebComponentsReady',
        handleWebComponentsReady, false);
      window.addEventListener('adinitialized',
        handleAdInitialized, false);
    })();
  </script>
</body>

</html>

Instead of breaking up the code into css/js/html sections, I have pasted exactly how Google Web Designer formats its file. You will see that I added the provided google code at the bottom in a script tag. One of my questions is if I should be putting the functionality there or somewhere else? I also saw that the code provided adds a EventListener to exitBtn. Which I assume is suppose to be a variable that is set equal to your button element, their example does not have exitBtn set to anything as a variable.

Now the the issue that I am having and whether it may be related to the error that I am getting or not. When running this in the browser, what happens is I get the following error:

This obviously has something to do with the Enabler class I am calling the exitQueryString()method on. Maybe I am not instantiating the Enabler class appropriately, maybe I am just not implementing the code into the correct location. Either way I have very little experience when it comes to Google Web Designer and the Enabler as a whole. Anyone that could provide some sort of insight would be greatly appreciated.

San Khong

unread,

Feb 28, 2017, 1:06:42 PM2/28/17

to Google Web Designer beta

I added more info to this post and also include a sample file.

Thanks,

San

Reply all

Reply to author

Forward

This conversation is locked

You cannot reply and perform actions on locked conversations.

0 new messages