What is a clickTag in HTML5 Ads?

We often come across the word clickTAG while using online programmatic advertising platforms. So What exactly is a clickTag?

clickTag is a parameter or variable that helps Ad Networks or publishers, or DSPs to track clicks to the landing page URLs. clickTag might be ‘ClickTAG’ or ‘clickTag ‘or ‘ClickTag’ depending on the case used by the ad network in its serving technology, but they all serve the same purpose, to take the user to the right landing page and track the click performance of the ad.

The origin of clickTag goes back to the Flash Ads, which was implemented by adding a <Div> tag on the top and then assigning an onclick event to it. As the user clicks on the ad, the script runs, and the user is taken to the landing page in a separate window with or without tracking parameters.

Two ways clickTag is implemented

  1. Some DSP or Ad Serving platforms provides a Script that goes in <head>, and then an onclick event goes in a <div> that wraps everything that comes in <body>.
  2. Some Platforms like Xandr (earlier Appnexus) provide a CDN link to their Javascript library that goes in head and then you add an onlick event to the wrapping <div>.

Adding clickTag using Google Web Designer

Adding click tags in HTML5 Ad builders like Google Web Designer is pretty easy, mostly we need to apply a custom Code to the click event covering the whole document, more or less, it’s the same process and the same JavaScript code every time with variation in the case of the variable (ClickTag/ ClickTAG/ clickTag). Here is the click tag code we have used in the video example:

function getParameterByName(name) {
  var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
  return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
window.open(getParameterByName('clickTag'), '_blank
Adding Xandr ClickTag in Google Web Designer

Adding clickTag using Adobe Animate

The same code (May differ according to the platform) above is used in Adobe Animate. The process slightly differs as the interface of Animate is different from GWD. You go to ‘Actions’ in the Window tab and then choose the Mouse click event in the HTML5 Canvas > Event handlers. You need to replace the “alert("Mouse clicked"); with the code above. The following video explains everything practically.

Adding Xandr ClickTag in Animate

Testing clickTag in Browser

To test the click tag in the browser, we can add

 ?clickTag=https://www.ironpulley.com

at the end of index.html (main banner HTML file) in the browser address bar, it will look something like this:

Then after clicking the banner, the website page should open in the new window, confirming that clickTag is working fine.

 

How to add clickTag in The Trade Desk using Google Web Designer:

  1. Add Tap Area on the banner
  2. Select the tap area and click + in GWD Events.
  3. Choose a custom code and name it anything eg: “clickEvent”.
  4. Add this Custom Code window.open(clickTag);
  5. Add the following script just before the closing </body> tag:

<script type=”text/javascript”>

function getParameterByName(name) {

name = name.replace(/[\[]/, “\\[“).replace(/[\]]/, “\\]”);

var regex = new RegExp(“[\\?&]” + name + “=([^&#]*)”),

results = regex.exec(location.search);

return results === null ? “” : decodeURIComponent(results[1].replace(/\+/g, ” “));

}

var clickTag = getParameterByName(“clickTag”);

</script>

 

How to add clickTag in Sizmek using Google Web Designer:

  1. Select the element, and in the Events pane, click +. Note that the element is usually a tap area.
  2. Click Tap area > Touch/Click > Custom > Add custom action in the Event dialog box.
  3. Enter a name for the function.
  4. In the text area, type adkit.clickthrough();
  5. Click OK.

 

How to add clickTag in Adroll using Google Web Designer:

  1. Put this script inside head tag

       <script type=”text/javascript”>

       var clickTag = “https://www.google.com”;

       </script>

      2. Select tap area >Add event> custom code:

       window.open(clickTag, ‘_blank’);

 

How to add clickTag in Display & Video 360 using Google Web Designer:

  1. Add this script tag in the head, and replace “https://www.google.com” with your advertiser’s landing page or website:
    <script type=”text/javascript”>
        var clickTag = “https://www.google.com”;
     </script>
  2. Add click event on the body and then add this custom code 

    window.open(window.clickTag)”>
     

Please note:

These are general instructions, it’s critical to follow the rules and guidelines of the Ad serving platform you are using to ensure the correct implementation of clickTag.

 

 

More to read:

Google’s ClickTag guidelines:

IAB’s HTML5 clickTag Standard on Xandr