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.
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 ?
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>
<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
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
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.
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.
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.
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.
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 ?
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>
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
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>
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>
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
How To Fix Clicktag Issue in HTML5 ads
![How To Fix Clicktag Issue in HTML5 ads]()
Reviewed by Unknown
on
March 02, 2017
Rating:
No comments: