Share via

Use IAB's HTML5 clickTag standard on Xandr

  • Article

Follow these instructions to use the IAB's clickTag standard in HTML5 creatives hosted with Xandr. This allows Xandr to track clicks and set the ad's landing page to the URL provided in.

Prerequisites

You will require a text editor to complete the procedure below. If you do not have one, we recommend Sublime Text.

Note

Do not hardcode landing page URLs for your creative. This will be set in when the assets are uploaded.

Step 1: Add the Xandr HTML5 library

Add the Xandr HTML5 Library inside the <head> tag in the index.html file, by adding the following <script> tag:

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

Tip

Use https to ensure the creative can serve on secure inventory.

Step 2: Add APPNEXUS.getClickTag() to a clickable element

Wrap the banner markup in an HTML element that opens a new window and uses the APPNEXUS.getClickTag() function. This will retrieve the value of the clickTag parameter set in the ad URL. The example below uses the <a> anchor element with the href attribute set to javascript:void(0) and an onClick attribute set to window.open(APPNEXUS.getClickTag(), '_blank');.

Open <a href="javascript:void(0)" onClick="window.open(APPNEXUS.getClickTag(), '_blank');"> immediately after <body> and be sure to close it with </a> immediately before </body>. The banner markup should go between <a href="javascript:void(0)" onClick="window.open(APPNEXUS.getClickTag(), '_blank');"> and </a>.

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

Step 3: Test

Save your work. Open the index.html file in your web browser. Add ?clickTag=http://www.xandr.com at the end of the URL in the address bar.

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

Refresh the page and click on the ad. A new window with Xandr' website should open in your browser. When the ad is served Xandr sets the value of clickTag to Xandr' click tracker and a redirect to the landing page URL provided for the creative in.

Save your work again.

Step 4. Zip creative contents

Select all of the contents. Compress the contents into a .zip file.

Screenshot that explains how you can select all of the contents and compress the contents into a .zip file.

You are now ready to upload your HTML5 creative onto the Xandr platform.

Additional option

Xandr follows IAB HTML5 guidance for clickTag (Section 3.10.1). The ad URL returned to a publisher's page includes a clickTag parameter in the query string. Ad developers who prefer not to use Xandr' getClickTag() convenience can access the clickTag parameter's value with their own Javascript. In this case, the ad does not need to load the Xandr HTML5 Library.

Example Ad URL with clickTag parameter https://vcdn.``adnxs``.com/.../index.html?clickTag=http%3A%2F%2Fnym1-ib.``adnxs``.com%2Fclick%3FAA...gwJUgAAAAA.%2Fbn%3D0%2Fclickenc%3Dhttp%253A%252F%252Fwww.``appnexus``.com%252F