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
On
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";
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
<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.
On
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):
<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>
</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}
</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>
<gwd-metric-configuration> tag (line 90).<gwd-metric-event source="gwd-taparea_1" event="tapareaexit" metric="" exit="Exit"></gwd-metric-event>
</div> of <div class="gwd-page-content gwd-page-size"> (line 95).<gwd-taparea id="gwd-taparea_1" class="gwd-taparea-11s4"></gwd-taparea>
</gwd-doubleclick> (line 98).<gwd-exit metric="clickTag" url="https://www.google.com/"></gwd-exit>
Enabler.exit("clickTag", "https://www.google.com/");
<script type="text/gwd-admetadata"> "exits":[] array between the brackets (line 138).{"exitId":"clickTag","url":"https://www.google.com/"}
<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.
On
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:
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.
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:
Now I had a creative that validated but was also clickable.