ClickTAG and multiple Landing Pages

This section will help you understand Click Tags and how to build a simple ad in HTML5 with support for single and multiple landing pages.

A Click Tag is a variable that defines the landing page of your ad, usually a URL to the client's web site or campaign site. This variable is conventionally called clickTAG. It is used by our system for tracking and evaluating how effective the advertising campaign has been.

ClickTAG definition example

The following code snippet will create a <div>-element and attach a click handler to it after our library has been initialized. The click handler will open a new window using the URL read from html5.getClickTag().

In the below example the <div>-element with ID "click-me" will be the clickable area of the ad. And the recommended placement for the ClickTAG definition is just before </body>.

<script type="text/javascript">
  html5.ready(function() {
    document.getElementById("click-me").onclick = function() {
      window.open(html5.getClickTag(), "_blank");
    }
  });
</script>
<div id="click-me">Click me</div>

Defining and getting the landing page URL

Reading the landing page URL from JavaScript is done using html5.getClickTag() which will return a URL that should be used for redirecting the browser to the specified landing page. html5.getClickTag() uses the landing page specified as "clickTAG" by default. It is important to use html5.getClickTag() and not specify the landing page URL in code since it is used for click tracking. Ads that do not correctly click through our system will be automatically flagged as broken.

Landing page URLs can also be specified in your manifest.json file by adding a "clickTAG" entry to "clicktags". The following manifest.json example declares http://example.org as the landing page of your ad.

"clicktags": {
  "clickTAG": "http://example.org"
}

Multiple landing pages

Multiple landing pages can be specified by adding multiple click tags in your manifest.json file:

"clicktags": {
  "clickTAG": "http://example.org",
  "landingPage2": "http://deltaprojects.com"
}

Calling html5.getClickTag() with a single argument returns the landing page for that specific click tag. html5.getClickTag("landingPage2") will, given the manifest.json file above, return a URL that redirects to http://deltaprojects.com.

The following example creates two <div>-elements and attach a different click handler to each. One using the default click tag and the other using a named click tag.

<script type="text/javascript">
  html5.ready(function() {
    document.getElementById("click-area-1").onclick = function() {
      window.open(html5.getClickTag(), "_blank");
    }
    document.getElementById("click-area-2").onclick = function() {
      window.open(html5.getClickTag("landingPage2"), "_blank");
    }
  });
</script>
<div id="click-area-1">Go to landing page 1</div>
<div id="click-area-2">Go to landing page 2</div>

Dynamic generation of landing pages

If the HTML5 ads are dynamically generating landing pages they should call html5.createClickTag() with the URL as a parameter. Which will augment the URL with click tracking information.

Last modified: Mon Sep 23 2024 11:48:54 GMT+0200 (Central European Summer Time)