ad:personam GmbH logo

ClickTag Parameter Guide for HTML5 Creatives

Published on

Integrating the clickTag parameter into your HTML5 ads ensures accurate click tracking and seamless redirection to your landing page. This guide will walk you through the process, whether you are using creatives from Google Web Designer, Adobe Edge, or manually created HTML5 ads.

Integrating the AppNexus HTML5 Library with Manually Created HTML5 Ads

For manually created HTML5 ads, the integration process involves adding the AppNexus HTML5 library to your ad’s index.html file. Here’s a step-by-step guide:

Step 1: Add the AppNexus HTML5 Library

First, incorporate the AppNexus HTML5 JavaScript library into your ad by adding the following script inside the <head> tag of your index.html file:

<head>
  <script
    type="text/javascript"
    src="https://acdn.adnxs.com/html5-lib/1.4.1/appnexus-html5-lib.min.js"
  ></script>
</head>

Step 2: Add a Clickthrough Element

Assign a unique id="clickthrough" to the <div> element that will serve as the clickable area. Ideally, this should be your ad’s container div. If there isn’t one, you can add it directly in the <body> tag.

Before:

<div class="container"></div>

After:

<div class="container" id="clickthrough"></div>

Step 3: Handle Click Event

Set up the click event to track user interaction by using the AppNexus JavaScript functions. Insert this script block just before the closing </body> tag:

<script type="text/javascript">
    APPNEXUS.ready(function () {
        var clickthrough = document.getElementById("clickthrough");
        clickthrough.addEventListener("click", function () {
            APPNEXUS.click();
        });
    });
</script>
</body>

Integrating the AppNexus HTML5 Library with Ads Created in Google Web Designer

Step 1: Find the index.html File

Locate the folder containing your Google Web Designer ad. If it’s in a .zip file, unzip it. Open the index.html file for editing.

Step 2: Add the AppNexus HTML5 Library

Insert the following script just before the closing </head> tag in your index.html file:

<head>
  <script
    type="text/javascript"
    src="https://acdn.adnxs.com/html5-lib/1.4.1/appnexus-html5-lib.min.js"
  ></script>
</head>

Step 3: Replace Hard-Coded URL with APPNEXUS.getClickTag()

Find the script block containing the hard-coded URL for the click event:

<script type="text/javascript" gwd-events="handlers">
  gwd.auto_BodyClick = function (event) {
    gwd.actions.gwdGenericad.exit('gwd-ad', 'https://appnexus.com', true);
  };
</script>

Replace the hard-coded URL with the dynamic APPNEXUS.getClickTag() function:

<script type="text/javascript" gwd-events="handlers">
  gwd.auto_BodyClick = function (event) {
    gwd.actions.gwdGenericad.exit('gwd-ad', APPNEXUS.getClickTag(), true);
  };
</script>

Step 4: Save and Re-zip the Creative

Save your changes to the index.html file. Then, re-zip all the files in the folder, ensuring it’s ready for submission with the integrated clickTag functionality.

Implementing IAB's HTML5 clickTag Standard

To align with the IAB clickTag standard for accurate click tracking on Xandr, follow these steps:

Step 1: Add the Xandr HTML5 Library

Insert the following script tag in the <head> section of your index.html file:

<script
  type="text/javascript"
  src="https://acdn.adnxs.com/html5-lib/1.4.1/appnexus-html5-lib.min.js"
></script>

Step 2: Implement APPNEXUS.getClickTag() for Click Events

Wrap your banner's HTML in an anchor <a> element that calls the APPNEXUS.getClickTag() function when clicked. Insert this structure inside the <body>:

<body>
  <a
    href="javascript:void(0)"
    onClick="window.open(APPNEXUS.getClickTag(), '_blank');"
  >
    <!-- Place your banner markup here -->
  </a>
</body>

Step 3: Test Your Creative

Test the functionality by adding ?clickTag=http://www.xandr.com to the file URL in your browser:

file:///Users/username/Desktop/ad.html?clickTag=http://www.xandr.com

Click the ad and ensure a new tab opens to the Xandr website. This confirms that the clickTag parameter is working correctly.

Step 4: Prepare Your Creative for Upload

Once testing is complete, compress all files into a new .zip file for submission on the Xandr platform.