Ad Formats - ClickTAG Installation Guideline
Home|Ad Formats|ClickTAG Installation Guideline
Google Web Designer (GWD)
https://www.google.com/webdesigner/

File EnvironmentCreate a new ad from scratch should run in "Non-Google Ad" environment.

Tap AreaBuild your animations.
Drag "Tap Area" from Components and set ID to "clickTAG" (case sensitive).

* clickTAG should be placed on its own separate layer, above all your creative.

Add EventRight click clickTAG and select "Add Event" or click "+" from Event section.

Insert CodeAdd Touch/Click event and custom action to clickTAG.

Set function name and insert the code below.

function nw_getUrlVars() {     var vars = {};     var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m, key, value) {         vars[key] = value;     });     return vars; } var clickTAG = unescape(nw_getUrlVars()["clickTAG"]); window.open(clickTAG, "_blank");

Adobe Animate CC
https://www.adobe.com/products/animate.html

Covert to Symbol
Right click transparent image select "Convert to Symbol" and name it to clickTAG

* clickTAG should be placed on its own separate layer, above all your creative.

Color EffectPrepare a transparent image and setting the symbol's Alpha property to 1.

Instance NameSet the instance name of button to clickArea from Properties.

Insert ActionsAdd click action and insert the code below for the function.

this.clickArea.addEventListener("click", nwclickTAG); function nwclickTAG() {     var clickTAG = unescape(nw_getUrlVars()["clickTAG"]);     window.open(clickTAG, "_blank"); } function nw_getUrlVars() {     var vars = {};     var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m, key, value) {         vars[key] = value;     });     return vars; }

Anchor Tags <a>
Method to add clickTAG instance on some particular element in HTML document.

HTML headerFirst of all, it is important to add javascript function in document's header in all cases.

Insert the following code in <head></head>.

<script type="text/javascript"> function nw_getUrlVars() {     var vars = {};     var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m, key, value) {         vars[key] = value;     });     return vars; } </script>

[Option 1]Adding clickTAG on Particular Div

1. Set id for clickTAG area

<div id="clickArea"></div>

2. Take this particular element by It's id and set the click function to it. Place such script somewhere below the element in html document (to make sure the element is created earlier then the code is executed).

<script type="text/javascript"> var clickTAG = unescape(nw_getUrlVars()["clickTAG"]); var clickArea = document.getElementById("clickArea"); clickArea.onclick = function(){     window.open(clickTAG, "_blank"); } </script>

[Option 2]Adding clickTAG as element's attribute

1. Set id to particular <a> elements.

<div id="links">     <a href="javascript:void(0)" id="clickArea" target="_blank"></a> </div>

2. Below in html banner's code use this script to get particular <a> element and set href attribute for it.

<script> var clickTAG = unescape(nw_getUrlVars()["clickTAG"]); document.getElementById("clickArea").setAttribute('href', clickTAG); </script>