CODEWITHSUNDEEP
google-web-designer
Mile Mijatović
Mile Mijatović

Reputation: 3177

Google web designer GDN Banners IAB-Clicktag implementing

can you please help me how to implement IAB Clicktab to GDN Banner (created with google web designer software). I just got notified by the media company that GDN Banners have been approved by the HTML5 Validator Tool, but have not been able to add click tag. Screenshot - Asset validation

I create DoubleClick environment for GDN, but I don't know where to implement a href link and create a banner to be clickable at all.

GDN:

<body>
 <gwd-doubleclick id="gwd-ad" polite-load="">
    <gwd-metric-configuration></gwd-metric-configuration>
    <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" data-gwd-width="160px" data-gwd-height="600px">
        <div class="gwd-page-content gwd-page-size">
          <img is="gwd-image" source="main_galaxy_wrapper.png" id="main_wrapper" class="gwd-img-bnpg gwd-gen-1mybgwdanimation">
          <img is="gwd-image" source="disrupter.png" id="disrupter" class="gwd-img-1svs gwd-gen-gx3lgwdanimation">
          <img is="gwd-image" source="logo.png" id="logo" class="gwd-img-1mfr">
          <img is="gwd-image" source="bg.jpg" id="bg" class="gwd-img-l5ff gwd-gen-1by8gwdanimation">
          <img is="gwd-image" source="galaxy.png" id="galaxy" class="gwd-img-n640 gwd-gen-1vlxgwdanimation">
          <img is="gwd-image" source="cta.png" id="cta" class="gwd-img-1p26 gwd-gen-4kmrgwdanimation">
        </div>
      </div>
    </div>
  </gwd-doubleclick>
  <script type="text/javascript" id="gwd-init-code">
    (function() {
      var gwdAd = document.getElementById('gwd-ad');

      /**
       * 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>


<script data-exports-type="gwd-studio-registration">function StudioExports() {
}</script><script type="text/gwd-admetadata">{"version":1,"type":"DoubleClick","format":"","template":"Banner 3.0.0","politeload":true,"fullscreen":false,"counters":[],"timers":[],"exits":[],"creativeProperties":{"minWidth":160,"minHeight":600,"maxWidth":160,"maxHeight":600},"components":["gwd-doubleclick","gwd-image","gwd-page","gwd-pagedeck"],"responsive":false}</script></body></html>

This is different environment for banner (Xaxis) and I try with this solutio to add a href below open body tag, but still is Missing click tag check 

<body>
  <a href="https://streaming.grm-pro.com/__Vorlagen.HTML5/scripts/IAB.at.specs/iab.at.specs.txt" id="IAB_clicktag" target="_blank">
    <gwd-genericad id="gwd-ad">
      <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" data-gwd-width="160px" data-gwd-height="600px">
          <div class="gwd-page-content gwd-page-size">
            <img is="gwd-image" source="main_galaxy_wrapper_xaxis.png" id="main_wrapper" class="gwd-img-bnpg gwd-gen-1mybgwdanimation">
            <img is="gwd-image" source="disrupter_xaxis.png" id="disrupter" class="gwd-img-1svs gwd-gen-gx3lgwdanimation">
            <img is="gwd-image" source="logo_xaxis.png" id="logo" class="gwd-img-1mfr">
            <img is="gwd-image" source="bg_xaxis.jpg" id="bg" class="gwd-img-l5ff gwd-gen-1by8gwdanimation">
            <img is="gwd-image" source="galaxy_xaxis.png" id="galaxy" class="gwd-img-n640 gwd-gen-1vlxgwdanimation">
            <img is="gwd-image" source="cta_xaxis.png" id="cta" class="gwd-img-1p26 gwd-gen-4kmrgwdanimation">
          </div>
        </div>
      </div>
    </gwd-genericad>
  </a>
  <script>
    document.getElementById('IAB_clicktag').setAttribute('href', getUriParams.clicktag);
  </script>
  <script type="text/javascript" id="gwd-init-code">
    (function() {
      var gwdAd = document.getElementById('gwd-ad');

      /**
       * 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>

Can you help me how to hard coded that? Thank you in advance

Upvotes: 1

Views: 2445

Answers (1)

Zoha
Zoha

Reputation: 46

Just add a clicktag in your banner with google web designer. Check out the below documentation to add clicktag https://support.google.com/webdesigner/answer/3263494?hl=en
https://adgear.atlassian.net/wiki/pages/viewpage.action?pageId=75104310

You can also check the banner with DCM valitor : https://h5validator.appspot.com

Upvotes: 1

Related Questions