CODEWITHSUNDEEP
javascriptbannerdouble-clickgoogle-web-designerclicktag
plastois
plastois

Reputation: 106

Google Web Designer banner Missing click tag check on validation

I need to create doubleclick banner, and i am using Google Web Designer. I want to call clickTag by simple href="javascript:window.open(window.clickTag)", and everything works fine, but when i validate it on

https://h5validator.appspot.com/dcm/asset i get error:

Missing click tag check

How can I remove this error, what am I missing?

Thanks

Upvotes: 3

Views: 17716

Answers (4)

Ice-Man1021
Ice-Man1021

Reputation: 11

I know I might be late, but I sat with the same problem and I found an easier way to fix the "Missing click tag check" error on https://h5validator.appspot.com/dcm/asset and there is no need to add custom code.

The steps are as follows:

  1. Create a Tap Area
  2. Add an event to the Tap Area and setup the event as follows:

Once you are done, save your build and publish it to ZIP. You can upload the ZIP at https://h5validator.appspot.com/dcm/asset and you should get the all clear.

Upvotes: 1

Gabriel machts
Gabriel machts

Reputation: 187

I had the same problem and I tried to follow the instructions under https://support.google.com/dcm/answer/3145300?visit_id=636892883779240296-1524067146&rd=1#dev > Click tags > Sample click tag insertion. However, I could not make it work, whatever I tried. The result was always: it worked fine, but the validator threw an error.

So I went back to the second option described under "Use Google Web Designer for exit events". Following all the steps there exactly. The result was a creative that checked in the validator but was not clickable.

So after including the gwd tap area, I also manually added an additional anchor just inside the body, so it looked something like this:

<body>
  <a href="javascript:window.open(window.clickTag)">
    <gwd-google-ad id="gwd-ad" polite-load="">
    (...)
      <gwd-pagedeck class="gwd-page-container" id="pagedeck">
        <gwd-page id="page1" class="gwd-page-wrapper gwd-page-size gwd-lightbox" data-gwd-width="300px" data-gwd-height="600px">
         (...)
            <gwd-taparea id="gwd-taparea_1" class="gwd-taparea-vsnj"></gwd-taparea>
          </div>
        </gwd-page>
      </gwd-pagedeck>
      <gwd-exit metric="CTA-xyz" url="http://abc.de"></gwd-exit>
    </gwd-google-ad>
    <script type="text/javascript" id="gwd-init-code">
     (...)
    </script>
  </a>
</body>

Now I had a creative that validated but was also clickable.

Upvotes: 2

playagee
playagee

Reputation: 21

HTML5 creatives created using Google Web Designer (GWD) should have the clickTag added as a call to action (https://support.google.com/webdesigner/answer/3263494?hl=en) added within Google Web Designer BEFORE exporting to a .zip file.

Since you only have the exported .zip file, you will need to either go back to GWD and add in the call to action OR follow the hardcode workaround I made:

I will refer to your jsfiddle (http://jsfiddle.net/ae363saf):

  1. Paste in the with the rest of style tags (line 8).
<style data-exports-type="gwd-taparea" data-gwd-node="true">gwd-taparea{display:block;cursor:pointer;background-color:rgba(0,0,0,0);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}</style>
  1. Depending on your creative size, you'll need to modify the values in this code. The creative example is 300x250, so in the following code, set: height:300px,
    width:250px,
    transform-origin:125px 150px 0px,
    -webkit-transform-origin:125px 150px 0px, and
    -moz-transform-origin:125px 150px 0px (half width, half height, 0).
    Paste the edited code immediately before </style> at the end of line 13.
.gwd-taparea-11s4{position:absolute;top:0px;height:300px;left:0px;width:250px;transform-origin:125px 150px 0px;-webkit-transform-origin:125px 150px 0px;-moz-transform-origin:125px 150px 0px}
  1. Paste immediately before </head> (line 86).
  <script data-source="gwdtaparea_min.js" data-version="4" data-exports-type="gwd-taparea">(function(){'use strict';var c;var d=function(a,b,e){if(e){var f=document.createEvent("CustomEvent");f.initCustomEvent(a,!0,!0,e)}else f=document.createEvent("Event"),f.initEvent(a,!0,!0);b.dispatchEvent(f);return f};var g=[],h=function(a){a=g.indexOf(a);0<=a&&g.splice(a,1)};document.addEventListener("click",function(a){for(var b=0;b<g.length;b++)if(25>Math.abs(a.clientX-g[b].m)&&25>Math.abs(a.clientY-g[b].o)||25>Math.abs(a.screenX-g[b].A)&&25>Math.abs(a.screenY-g[b].B))g.splice(b,1),a.stopPropagation(),a.preventDefault()},!0);var k=function(){};goog.inherits(k,HTMLElement);c=k.prototype;c.createdCallback=function(){this.l=this.j=0;this.f=this.b=this.g=this.c=null;this.a=!0;this.h=this.s.bind(this)};
c.attachedCallback=function(){this.b||(this.c=this.i.bind(this),this.g=this.w.bind(this),this.b=this.v.bind(this),this.f=this.u.bind(this));this.addEventListener("click",this.c,!1);this.addEventListener("touchstart",this.g,!1);this.addEventListener("action",this.h,!1)};c.detachedCallback=function(){this.removeEventListener("click",this.c,!1);this.removeEventListener("touchstart",this.g,!1);this.removeEventListener("action",this.h,!1)};c.i=function(){this.a&&d("action",this);this.a=!0};
c.w=function(a){this.addEventListener("touchmove",this.b,!1);this.addEventListener("touchend",this.f,!1);a=a.touches[0];this.j=a.clientX;this.l=a.clientY};c.u=function(a){this.i();this.removeEventListener("touchmove",this.b,!1);this.removeEventListener("touchend",this.f,!1);a=a.changedTouches[0];a={m:a.clientX,o:a.clientY,A:a.screenX,B:a.screenY};g.push(a);setTimeout(h.bind(null,a),2500)};c.v=function(a){a=a.touches[0];this.a=this.a&&10>=Math.abs(this.j-a.clientX)&&10>=Math.abs(this.l-a.clientY)};
c.s=function(){var a=this.getAttribute("exit-id"),b=this.getAttribute("product-index"),e=this.getAttribute("exit-override-url");e&&!d("tapareaexit",this,{"exit-id":a,url:e,"product-index":b}).detail.handled&&window.open(e)};c.attributeChangedCallback=function(){};document.registerElement("gwd-taparea",{prototype:k.prototype});}).call(this);
</script>
  <script type="text/javascript" gwd-events="support">var gwd=gwd||{};gwd.actions=gwd.actions||{};gwd.actions.events=gwd.actions.events||{};gwd.actions.events.getElementById=function(id){var element=document.getElementById(id);if(!element){var pageDeck=document.querySelector("[is=gwd-pagedeck]");if(pageDeck){if(typeof pageDeck.getElementById==="function"){element=pageDeck.getElementById(id)}}}if(!element){switch(id){case"document.body":element=document.body;break;case"document":element=document;break;case"window":element=window;break;default:break}}return element};gwd.actions.events.addHandler=function(eventTarget,eventName,eventHandler,useCapture){var targetElement=gwd.actions.events.getElementById(eventTarget);if(targetElement){targetElement.addEventListener(eventName,eventHandler,useCapture)}};gwd.actions.events.removeHandler=function(eventTarget,eventName,eventHandler,useCapture){var targetElement=gwd.actions.events.getElementById(eventTarget);if(targetElement){targetElement.removeEventListener(eventName,eventHandler,useCapture)}};gwd.actions.events.setInlineStyle=function(id,styles){var element=gwd.actions.events.getElementById(id);if(!element||!styles){return}var transitionProperty=element.style.transition!==undefined?"transition":"-webkit-transition";var prevTransition=element.style[transitionProperty];var splitStyles=styles.split(/\s*;\s*/);var nameValue;splitStyles.forEach(function(splitStyle){if(splitStyle){var regex=new RegExp("[:](?![/]{2})");nameValue=splitStyle.split(regex);nameValue[1]=nameValue[1]?nameValue[1].trim():null;if(!(nameValue[0]&&nameValue[1])){return}element.style.setProperty(nameValue[0],nameValue[1])}});function restoreTransition(event){var el=event.target;el.style.transition=prevTransition;el.removeEventListener(event.type,restoreTransition,false)}element.addEventListener("transitionend",restoreTransition,false);element.addEventListener("webkitTransitionEnd",restoreTransition,false)};gwd.actions.gwdDoubleclick=gwd.actions.gwdDoubleclick||{};gwd.actions.gwdDoubleclick.exit=function(receiver,exitId,url,opt_collapseOnExit,opt_pauseMedia){gwd.actions.events.getElementById(receiver).exit(exitId,url,opt_collapseOnExit,opt_pauseMedia)}</script>
  <script type="text/javascript" gwd-events="handlers">gwd.auto_Gwd_taparea_1Action=function(event){gwd.actions.gwdDoubleclick.exit("gwd-ad","clickTag","http://www.visitloscabos.travel/",true,true)}</script>
  <script type="text/javascript" gwd-events="registration">gwd.actions.events.registerEventHandlers=function(event){gwd.actions.events.addHandler("gwd-taparea_1","action",gwd.auto_Gwd_taparea_1Action,false)};gwd.actions.events.deregisterEventHandlers=function(event){gwd.actions.events.removeHandler("gwd-taparea_1","action",gwd.auto_Gwd_taparea_1Action,false)};document.addEventListener("DOMContentLoaded",gwd.actions.events.registerEventHandlers);document.addEventListener("unload",gwd.actions.events.deregisterEventHandlers)</script>
  1. Within the <gwd-metric-configuration> tag (line 90).
<gwd-metric-event source="gwd-taparea_1" event="tapareaexit" metric="" exit="Exit"></gwd-metric-event>
  1. Before </div> of <div class="gwd-page-content gwd-page-size"> (line 95).
<gwd-taparea id="gwd-taparea_1" class="gwd-taparea-11s4"></gwd-taparea>
  1. Replace the URL below with whatever URL you want to click through to (your clickTag) or a default one, because some ad servers will have an option to modify this URL in their interface. Paste immediately before </gwd-doubleclick> (line 98).
<gwd-exit metric="clickTag" url="https://www.google.com/"></gwd-exit>
  1. Replace the URL with the URL you want to click through to. Paste within StudioExports function between the brackets (end of line 138).
Enabler.exit("clickTag", "https://www.google.com/");
  1. Replace the URL with the URL you want to click through to. Paste within <script type="text/gwd-admetadata"> "exits":[] array between the brackets (line 138).
{"exitId":"clickTag","url":"https://www.google.com/"}
  1. Paste to the end of the <script type="text/gwd-admetadata"> tag in the "components":["gwd-doubleclick","gwd-page","gwd-pagedeck"] array after the last component, "gwd-pagedeck" (line 138).
,"gwd-taparea"

Save the file, .zip the folder again, and the creative should now pass in Google's HTML5 Validator.

Upvotes: 2

Ankit Singh
Ankit Singh

Reputation: 270

I think this will help you out to find solution to your problem, please follow the below steps :

Step 1: extract the files from zip. and Open .html file using any code editor, most useful for trafficker is notepad++.

Step 2: There will be two important section in html file <head></head> and <body></body>

  • <head> section will have <script type=”text/javascript”> which handle most the functionality will be present.

  • Now Paste below code Before </head> section and Inside <script type=”text/javascript”>Some Code From Creative </script>

  • var clickTag = "http://www.google.com";

  • Make sure that other tags/function are close and you are not pasting the above code inside other tag/function.

Code:

<head>
    <script type=”text/javascript”>
        var clickTag = “http://www.google.com”;
        Somecode of(function() 
        {
            somefunctionality code ...
        }
    </script>
</head>

Step 3: Paste the below code after <body> start, Arrangement of the code can impact what portion of the creative will be clickable, so make sure that you cover every assets of creative code withing the code below

<body>
    <a href="javascript:window.open(window.clickTag)">
        .......Creative assets code...
        .......Some functionality code.....
    </a>
</body>
click tag google web designer

Step 4: Make sure that clickTag defined in body and clickTag defined in head section should be same. Now save the file.

Step 5: Go to the folder where all the assets presents, Select all then create the zip, make sure you create zip and not rar because zip is only supported format in DFP. For other servers it might be different.

Because if don’t zip all files correctly you might get “No Primary HTML file detected” this error

No Primary HTML file detected

Creative is built from Adobe Animate CC

Step resolve the creative issue

  • Step 1: Extract the zip file and open the html file present in the folder
  • Step 2: Open the .html in file sublime/Notepad++ editor, Paste below Code in <head> section just before You can replace the http://www.google.com with the clicktracker or landing page URL provided by client.

Code:
var clickTag = "http://www.google.com"; 

Adobe_animate_CC_clickTag_Issue_head_section

  • Step 3: Now once above code is implemented its time to implement the clickTag in body section, Since the clickTag is case sensitive make sure that clickTag implemented in Head section should match with clickTag in body section, Now implement below code just After tag.

    Adobe_animate_CC_clickTag_Issue_body_section

  • Step 4: Make sure that the placement of tag is important, you must cover the whole canvas portion so that whole creative will be clickable.

Upvotes: 5

Related Questions