Delfi Showroom

DELFI Clicktag

Clicktag is a ad engine specific piece of script that ensures that each click on banner is tracked and counted. DELFI uses Adform clicktag which you can read more about here.

There are different ways of implementing clicktag depending on banner requirements and platform the banner is targeted to but in every case the banner must include the Adform.DHTML.js library in the head section of the banner.

<script>
    document.write('<script src="'+ (window.API_URL || 'https://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js?bv='+ Math.random()) +'"><\/script>');
  </script>

This script makes sure that the clicktag open functions described below work as intended and must be included between the banner <head> and </head> tags.

Adding clickTAG window

To add a global clickTAG to make the whole (banner) window clickable:

1. Add the Adform.DHTML.js library to the head section of the banner

<script>
    document.write('<script src="'+ (window.API_URL || 'https://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js?bv='+ Math.random()) +'"><\/script>');
  </script>

2. Add the following javascript anywhere inside the body tag to make banner clikcable:

<script>
    function adfOpenGlobalClickTAG() {
      window.open(dhtml.getVar('clickTAG', 'http://www.example.com'), '_blank');
    }
    if(window.document.addEventListener) {
      window.document.addEventListener('click', function(e) {
          if(e.button !== 0) return;
          e.stopPropagation();
          e.preventDefault();
          adfOpenGlobalClickTAG();
      }, true);
    } else {
      document.attachEvent('onclick', function() {
          adfOpenGlobalClickTAG();
      });
    }
</script>

NOTE: As an alterantive you can use AdForm Studio to make the whole banner clickable in a few clicks without any code changes. Using AdForm Studio is the preferred way.

Adding a clickTAG to a particular div

To add a basic clicktag to a single element on the banner:

1. Add the Adform.DHTML.js library to the head section of the banner

<script>
    document.write('<script src="'+ (window.API_URL || 'https://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js?bv='+ Math.random()) +'"><\/script>');
  </script>

2. Have an element on the banner with the id clickLayer that you want to have open clicktag on click event

<div id="clickLayer"></div>

3. Add click event on the element with the id of clickLayer

<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>

This is the most basic clicktag event implementation. When a banner with this implementation is uploaded to the ad engine the dhtml.getVar function gets the defined url from the system. This makes it possible to change the url in the system without having to re-create the banner.
Testing locally will open the fallback url (in this case: http://www.example.com)

Multi Clicktag

If your banner needs to have multiple clicktags that track the clicks separately then you need to add an onclick event to each element separately.

<script>
    var clickArea = document.getElementById('clickLayer');
    var clickArea2 = document.getElementById('clickLayer2');
    var clickTAGvalue = dhtml.getVar('clickTAG', 'http://www.google.com');
    var clickTAGvalue2 = dhtml.getVar('clickTAG2', 'http://www.delfi.ee');
    var landingpagetarget = dhtml.getVar('landingPageTarget', '_blank');
    clickArea.onclick = function() {window.open(clickTAGvalue,landingpagetarget);}
    clickArea2.onclick = function() {window.open(clickTAGvalue2,landingpagetarget);}
  </script>

Please note that the multiclicktag urls still come from the ad engine system and need to be defined in a manifest.json file for the system to be aware that there are multiple clicktags.

NOTE: It is strongly recommended to add Multi Clicktag in AdForm Studio instead of creating manifest.json file manually.

Redirect Clicktag

If you want to create a dynamic clicktag that tracks one clicktag but redirects to a dynamic url you have to use redirec clicktag. Redirect clicktag works as normal but the clickTAGvalue has a referrer apended.

<script>
    var redirect = 'http://www.example.com';
    var custom = ';cpdir=' + redirect;
    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 + custom,landingpagetarget);}
  </script>

In the script above the custom variable is ;cpdir= + the target url to redirect to. This custom variable is apended to the clickTAGvalue variable. In this case the redirect variable is the variable to be changed dynamically.
Please note that the clicktag redirect does not work if testing locally. This works only in live enviornment where the referrer macro is acknowledged.

AdForm Clicktag

For more advanced uses of clicktag please read more about Adform clicktag implementation here.