• TEGEVUSALAD
  • REKLAAM
  • PARTNERILE
  • ELAMUS
  • PRAKTIKA
  • Töötamine
  • CO2
  • Kontakt

DELFI Clicktag

  • Esileht
  • TEGEVUSALAD
  • REKLAAM
  • PARTNERILE
  • ELAMUS
  • PRAKTIKA
  • Töötamine
  • CO2
  • Kontakt

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.

All banners except mobile banners use basic Adform clicktag. 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>
    1. Have an element on the banner with the id clickLayer that you want to have open clicktag on click event
<div id="clickLayer"></div>
    1. 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.

See also

Ad creation tools:

  • Implementing clicktag in Adobe Animate CC
  • Implementing clicktag in Adobe Edge
  • Implementing clicktag in Google Web Designer
  • Implementing clicktag in Tumult Hype

Ekspress Meedia AS
+372 669 8040
info@ekspressmeedia.ee

Rekvisiidid
Narva mnt 13, 10151 Tallinn
Reg. nr. 10586863
KMK reg.nr. EE100576146

Klienditeenindus
+372 680 4444
klienditugi@ekspressmeedia.ee
(E-R 9.00-17.00)

Kasutame oma veebilehel küpsiseid. Küpsistest saad loobuda, muutes veebilehitseja privaatsusseadeid. NÕUSTUN
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled

Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.

Non-necessary

Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.

SAVE & ACCEPT