Share via

Build an HTML5 Xandr creative in Adobe Animate CC

  • Article

This guide explains how to use Adobe Animate CC to build HTML5 creatives that will properly track clicks in Xandr. It assumes that you are familiar using Adobe Animate CC to build creatives.

With Xandr HTML5 library

  1. From within Adobe Animate CC, select the element you want to make clickable.

  2. Open the Actions window.

    Screenshot that illustrates the process of selecting Actions from the Window menu in Adobe Animate C C.

  3. Select Code Snippets in Actions toolbar.

    Screenshot of the Actions toolbar with Code Snippets selected.

  4. Click HTML Canvas, then Event Handlers, and then select Mouse Click and click OK if you receive a warning.

    Screenshot of the Code Snippets window with Mouse Click event selected.

  5. You will see a text editor pre-populated with code. Replace the “alert("Mouse clicked");” with:

    function getParameterByName(name) {
  var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
  return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
window.open(getParameterByName('clickTag'), '_blank');

    Screenshot of the text editor pre-populated with a code.

  6. Save and Publish your work. Open the project's .html file in your web browser. Add ?clickTag=http://www.appnexus.com at the end of the URL in the address bar.

    Screenshot of the address bar.

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

Use IAB's HTML5 clickTag Standard on Xandr