ClickTag Parameter Guide for HTML5 Creatives
Integrating the clickTag parameter into your HTML5 ads ensures accurate click tracking and seamless redirection to your landing page. This guide simplifies the process using creatives from Google Web Designer, Adobe Edge, or manually created HTML5 ad
Ciro Scognamiglio
Last Update één jaar geleden
Integrating the AppNexus HTML5 Library with Manually Created HTML5 Ads
For standard ads, the integration process revolves around modifications to the index.html file. Here’s a step-by-step breakdown:
- Step 1: Add the AppNexus HTML5 Library
First, incorporate the AppNexus HTML5 JavaScript library into your ad’s index.html file. This script should be placed within the <head> tag as shown below:
- Step 2: Add a Clickthrough Element
Assign a unique id clickthrough to a <div> element within your ad, ideally the container div. If your ad doesn’t have a container div, you can directly add it to the <body> tag. Here’s how to modify the div:
Before:
After:
- Step 3: Handle Click Event
The click event is crucial for tracking user interactions with your ad. Utilize the APPNEXUS.ready() and APPNEXUS.click() functions from the previously added AppNexus HTML5 JavaScript library to manage this. Insert the following script block just before the closing body tag (</body>) to set up the click event listener:
Integrate the AppNexus HTML5 Library with Ads Created in Google Web Designer
- Step 1: Find the index.html file
Firstly, locate the folder of your Google Web Designer ad. If it's compressed into a .zip file, unzip it to access the folder containing all ad assets. Within this folder, open the index.html file for editing. - Step 2: Add the AppNexus HTML5 Library
To incorporate the AppNexus HTML5 Library, insert the following script tag just before the closing </head> tag in your index.html file:
- Step 3: Replace Hard-coded URL with APPNEXUS.getClickTag()
In the index.html file, search for gwd-events="handlers". You’ll likely find a script block similar to the one below, which contains a hard-coded URL meant for ad click redirection:
Replace the hard-coded URL (https://appnexus.com in this example) with APPNEXUS.getClickTag(), so the function now reads:
- Step 4: Save Changes
After making the necessary modifications, save your changes to the index.html file. - Step 5: Re-zip Creative Contents
Finally, prepare your creative for upload: select all contents within the folder (now modified), and compress them into a new .zip file. This file is now ready for submission, complete with the integrated AppNexus HTML5 Library and the dynamic clickTag functionality for enhanced tracking and performance.
Implementing IAB's HTML5 clickTag Standard
To align your HTML5 creatives with IAB's clickTag standard on Xandr, ensuring clicks are accurately tracked and landing pages are correctly set, follow these straightforward steps. Remember, landing page URLs should not be hardcoded into your creative but set through the Xandr platform upon asset upload.
- Step 1: Integrate the Xandr HTML5 Library
Begin by adding the Xandr HTML5 Library to your creative. Insert the following script tag within the <head> section of your index.html file:
Tip: Utilize HTTPS to ensure your creative is compatible with secure inventory.
- Step 2: Implement APPNEXUS.getClickTag() on a Clickable Element
To capture clicks, wrap your banner's HTML markup in an anchor (<a>) element that initiates a new window/tab upon click, utilizing the APPNEXUS.getClickTag() function to dynamically set the click-through URL. Implement this directly after the <body> tag and ensure it’s closed before </body>. Your banner markup will be nested within this setup:
- Step 3: Test Your Creative
After setting up the clickTag functionality, it's crucial to test: - Save your changes and open the index.html file in a web browser.
- To simulate the ad serving environment, append ?clickTag=http://www.xandr.com to the file URL in the address bar, like so:
Refresh the page and click on your ad. A new window/tab should open to the Xandr website, indicating the clickTag parameter is functioning correctly. When live, Xandr will replace the clickTag with the actual tracking URL and designated landing page URL for your creative.
Ensure all modifications are saved once testing is successfully completed.
- Step 4: Prepare Your Creative for Upload
Finally, compile all your creative assets: - Select all files and folders associated with your ad.
- Compress these into a .zip file, ready for submission on the Xandr platform.