Add Click Tag Variables

Greta
Greta
  • Updated

To make your banner clickable, make sure that a click tag is set up correctly. You can add a clickTag variable in several ways:

Add a Click Tag to a Div Element

Here is an example of how to add a clickTag to div element in an HTML5 banner:

  1. Set ID (or class name) value for clickTag area/layer:

    <div class="click-layer" id="clickLayer"></div>

  2. Take this particular element by its id (or class name) and set the onclick function to it. Place this script somewhere below the element in the HTML document (to make sure the element is created earlier than the code is executed):

    <script>
 var clickArea = document.getElementById('clickLayer');

 var clickTAGvalue = dhtml.getVar('clickTag', 'http://www.example.com');
 var landingpagetarget = dhtml.getVar('landingPageTarget', '_blank');

 clickArea.onclick = function() {
 window.open(clickTAGvalue,landingpagetarget);
 }
</script>

Adding a Click Tag as an Element's Attribute

You can set a clickTag as <a> element's href value. To do that, follow these steps:

  1. Set id (or class name) value to each <a> element. You may leave href values not yet defined here:

    <div id="links">
 <div class="links-title"></div>
  <a class="link link-1" id="link-1" target="_blank">My first link</a>
  <a class="link link-2" id="link-2" target="_blank">My second link</a>
  <a class="link link-3" id="link-3" target="_blank">My third link</a>
  <a class="link link-4" id="link-4" target="_blank">My fourth link</a>
</div>

  2. Below in the banner's HTML code use this script to get a particular <a> element and set a href attribute for it. Each href attribute may inherit the clickTag variable value from the Adform system or some static URL if the banner is being tested locally:

    <script>
        document.getElementById('link-1').setAttribute('href', dhtml.getVar('clickTag', 'http://www.example-1.com'));
        document.getElementById('link-2').setAttribute('href', dhtml.getVar('clickTag2', 'http://www.example-2.com'));
        document.getElementById('link-3').setAttribute('href', dhtml.getVar('clickTag3', 'http://www.example-3.com'));
        document.getElementById('link-4').setAttribute('href', dhtml.getVar('clickTag4', 'http://www.example-4.com"')); 
</script>

  3. Register multiple click tags to manifest.json file before the banner is uploaded to the system, e.g.,

    {
        "version": "1.0",
        
        "title": "Banner-Sample-930x400",
        "description": "",

        "width" : "930",
        "height": "180",

        "events": {
                "enabled": 1,
                "list": { }
        },
        
        "clicktags": {
                "clickTag": "http://www.example-1.com",
                "clickTag2": "http://www.example-2.com",
                "clickTag3": "http://www.example-3.com",
                "clickTag4": "http://www.example-4.com",
        },
        
        "source": "index.html"
}

Create an Inline Click Tag

You can create a clickTag element and add a JavaScript click functionality directly inline. See the samples below.

  1. How to create a clickable div with id "clicktagger" and a mouse pointer that changes on mouseover/mouseout events.

    <div id="clicktagger" onclick="javascript:window.open(dhtml.getVar('clickTag'),'_blank');" 
onmouseover="javascript:this.style.cursor='pointer';" onmouseout="javascript:this.style.cursor='auto';"></div>

  2. How to create a hyperlink element <a href=''>, set clickTag variable value as href attribute, and append it to a document body.

    <script>
    window.onload = function() {
        var link = document.createElement('a');
        link.style.display = 'block';
        link.href = dhtml.getVar('clickTag');
        link.target = dhtml.getVar('landingPageTarget');
        document.body.appendChild(link);
    }
</script>

Use Click Tag With Redirect

To dynamically redirect the clickTag value to another landing page, use the ;cpdir= referrer. E.g.,

var redirect = 'http://www.example.com';
var custom = ';cpdir=' + redirect;
window.open(clickTag + custom, landingpagetarget);

Note

The referrer will not work while testing locally or in an HTML5 Studio environment. The creative must be served through the platform for this kind of redirect to function properly.

Add a Global Click Tag to a Banner

If you created a banner on an external platform, and now are using it for your campaigns in Adform, you need to make sure that a click tag is set up correctly so that your banner is clickable.

To set up a global click tag:

  1. Drag and drop your zipped banner into Adform Studio. If no click tag is detected in your banner, a pop-up notification will appear suggesting to add one. In case the message doesn't appear, proceed to the following steps.

  2. In the top-right corner, click more30x30.png.

  3. Select Global ClickTAG from the dropdown list.

  4. In the window that appears, enter the desired landing page.

  5. Click Proceed.

Add Multiple Click Tags

If you need to have multiple click tags on the same banner, do the following:

  1. Set ID or (class name) for click elements:

    <body> 
<div id="element"> 
<div id="linkbox"> 
<a id="left">My Link1</a> 
<a id="center">My Link2</a> 
<a id="right">My Link3</a> 
</div> 
</div>

  2. Define a click tag value for each clickTag instance. Values should get landing page URLs from the Adform system (dhtml.getVar) once the banner is placed there or you may use some static value for local testing. Collect all clickTag instance elements from HTML document by using getElementById or getElementsByClass methods. Set the onlick function to each element separately. Place this script somewhere below the click elements in the HTML document (to make sure the elements are created earlier than the code is executed):

    <script> 
 clickTAGvalue = dhtml.getVar('clickTag', 'http://www.adform.com'); 
 clickTAGvalue2 = dhtml.getVar('clickTag2', 'http://html5toolkit.adform.com/'); 
 clickTAGvalue3 = dhtml.getVar('clickTag3', 'http://site.adform.com/resources/creative-space/'); 
 landingpagetarget = dhtml.getVar('landingPageTarget', '_blank'); 

 var center = document.getElementById('center');  
 var left = document.getElementById('left'); 
 var right = document.getElementById('right'); 

 center.onclick = function() { 
 window.open(clickTAGvalue,landingpagetarget); 
 }
 
 left.onclick = function() { 
 window.open(clickTAGvalue2,landingpagetarget); 
 }
 
 right.onclick = function() { 
 window.open(clickTAGvalue3,landingpagetarget); 
 } 
</script>

    A click on a particular click layer area calls a function that opens a window with an inherited particular clickTag URL value from the Adform system or the particular fallback static URL (when testing locally). When a banner is uploaded to the system, getVar returns the URL defined in the system next to the asset. When a banner is being tested locally, a fallback URL is taken as if a clickTag is 'null' so far.

  3. Register multiple click tags to manifest.json file before the banner is uploaded to the system, for example:

    { 
        "version": "1.0", 
        
        "title": "Banner-Sample-580x400", 
        "description": "", 
        
        "width" : "580", 
        "height": "400", 

        "events": { 
                "enabled": 1, 
                "list": { } 
        }, 

        "clicktags": { 
                "clickTag": "http://www.adform.com", 
                "clickTag2": "http://html5toolkit.adform.com/", 
                "clickTag3": "http://site.adform.com/resources/creative-space/", 
        }, 

        "source": "index.html" 
}

Add Click Tags for Mobile Banners

Here is a code snippet on how to correctly add click tags for banners that are in the mobile category:

            var banner = document.getElementById('banner');
                var container = document.getElementById('container');

                banner.addEventListener('click', function() {
                        mraid.open(Adform.getClickURL('clickTAG'));
                });

                container.addEventListener('click', function() {
                        mraid.open(Adform.getClickURL('clickTAG2'));
                });

Was this article helpful?

/
How we can make it better?

Thank you for your feedback!