Adding clickTAG Variables

Adding clickTAG Variables
Adding a clickTAG to a particular div
Adding multiple clickTAGs
Adding a clickTAG as an element’s attribute
Creating an inline clickTAG
Using clickTAG with redirect

There are various methods how to add a clickTAG to an HTML5 banner. Below you will find examples how to add a clickTAG instance to some particular element in an HTML document, assign a clickTAG to some frame source, etc.

Note, that Adform.DHTML.js library should be added in HTML document’s header in all cases:

Follow these steps to add a clickTAG to some particular div in an HTML5 banner:

Set id (or class name) value for clickTAG area/layer:

<div class=”click-layer” id=”clickLayer”></div>
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’);

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

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

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

Cursor style for a clickTAG can be changed to a pointer by adding clickArea.style.cursor = „pointer”; to a click function.

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

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>
Define a clickTAG 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 URL defined in the system next to asset. When a banner is being tested locally, a fallback URL is taken as if a clickTAG is 'null’ so far.
Register multiple clickTAGs to manifest.json file before the banner is uploaded to system, e.g.,

{
„version”: „1.0”,

„title”: „Banner-Sample-580×400”,
„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”
}

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

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>
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>
Register multiple clickTAGs to manifest.json file before the banner is uploaded to the system, e.g.,

{
„version”: „1.0”,

„title”: „Banner-Sample-930×400”,
„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”
}
Register multiple clickTAGs to manifest.json file before the banner is uploaded to the system, e.g.,

{
„version”: „1.0”,

„title”: „Banner-Sample-930×400”,
„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”
}

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

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

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 ;cpdir= referrer will not work while testing locally or in HTML5 Studio environment. The creative must be served through the platform for this kind of redirect to function properly.

Adding clickTAG Variables

Adding clickTAG Variables

Szukaj

Specyfikacje