How To Fix Clicktag Issue in HTML5 ads Skip to main content

How To Fix Clicktag Issue in HTML5 ads

Last year, Chrome and Firefox which cover almost all of the browser users, declared that they will block flash content serving on on the website to reduce the vulnerability and memory usage.

Though IAB proposed HTML5 way back to that Advertisement industry move toward the use of the HTML. You can check the difference in my post.

HTML5 ads are responsive,non flash and advance interactive ads created using various tools such Google Web designed and other creative building tools.

But Most common issue which every ad trafficker  faced is to understand the HTML5 ads 

HTML5 ads comes as a bundle of files which contain all image assets along with code related files such as html,css, javascript.

When we want to traffic these kind of creative, Most of the adservers accept it as .zip file.

When we upload this file in DFP/DCM we get the issue stating that Warning:Missing clicktag. Add a valid or exit function before uploading the creative to DFP “ is missing, and then we can’t upload the creatives. Or in some case adservers let you upload the assets but when you preview the creative is not clickable.

DFP-clicktag-issue

Since most of the trafficker are non coder and think that its not our job to edit the code..But in time sensitive campaign where sales want to see the ads live and don’t want to reach out to creative agency, it up-to us to get it live.

So How to solve the ClickTag Issue ?

Test resp_on_demand DFP

There are many creative building tools most widely used are

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.

<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 </head> You can replace the http://www.google.com with the clicktracker or landing page URL provided by client.


<meta name="ad.size" content="width=300,height=250">
<script type="text/javascript">
var clickTag = "http://www.google.com"; </script>

 

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 <body > tag.


  <a href="javascript:window.open(window.clickTag)"><canvas id="canvas" width="300" height="250"></canvas></a>

Adobe_animate_CC_clickTag_Issue_body_section

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

We must also note that each time creative code will be different and it doesn't necessary that creative agency use GWD or Adobe CC, But must note that basic building block for htm5 ad remain same. So Make sure to implement the code as instructed as above.

If you are good in coding and have in depth knowledge of GWD or Adobe Animate, Best way to resolve the clicktag issue is by handling the clickevent inside creative builder. Below is link of Adobe animate explaining how to make the creative clickable.

Step-By-Step HTML5 Ad Creation With Adobe Animate CC

 

If you have any query drop mail

 

 

Facebook Comments
 
 
   
   
     
   
       
 
   

Admin

My name’s Sachin, and I am Blogger and tech geek, currently working in Digital Advertisement Domain having work experience of more than 3 years.
Ad-Tag Macros is the professional association dedicated exclusively to online advertising operations and technology.
We focus primarily on topics such as ad serving and related technologies, yield management, policies, procedures, and standards.
Experience
Platform
DFP Small Business
Google Analytics
Native Ads
Mgid
WP
ComScore
Blogspot
AdSense
Skills
HTML/CSS
Javascript
Yield optimization
Trafficking
Mobile web ads
Display, video ads
Troubleshooting creative issue
SEO and Blog revenue Optimization
For Any Queries Please Contact Me
Contact@adtagmacros.com

Leave a Reply