Share via

Build an HTML5 Xandr creative in Adobe Edge

  • Article

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

With Xandr HTML5 library

  1. From within Adobe Edge, select the element you want to make clickable from the Elements panel. (Naming the element "clickable" is not required.)

    Screenshot of the Elements panel.

  2. Open Actions for the selected element. The Actions panel will pop-up with a dropdown menu. Then select click in the dropdown menu.

    Screenshot of the Actions panel.

  3. Select Links and Link in New Window from the Pick an Action area.

    Screenshot of the Pick an Action screen.

  4. You will see code that looks like this.

    Screenshot of the code screen that show function's properties.

  5. Replace the “https://www.adobe.com” with APPNEXUS.getClickTag(). Make sure to remove the quotations.

    Screenshot that shows the function properties screen with the target attribute replaced.

  6. From the Library panel, in the Scripts drop-down, click Add JS File from URL... Paste https://acdn.adnxs.com/html5-lib/1.3.0/appnexus-html5-lib.min.js into the field and click OK.

    Screenshot of the Library panel.

    Tip

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

  7. Click Preview in Browser to open the ad in your browser. Add ?clickTag=http://YOUR-URL-HERE.com at the end of the URL in the address bar with the landing page you want to test. Refresh the page and click on the ad. A new window with the landing page you entered should open in your browser. When the creative is served, Xandr sets the value of clickTag to Xandr's click tracker and sets a redirect to the landing page URL provided in Microsoft Monetize.

Without Xandr HTML5 library

  1. From within Adobe Edge, select the element you want to make clickable from the Elements panel. (Naming the element "clickable" is not required).

    Screenshot that shows the Elements panel.

  2. Open Actions for the selected element. The Actions panel will pop-up with a dropdown menu. Then select click in the dropdown menu.

    Screenshot of the Actions panel with Click option selected.

  3. Paste the code below into the text box provided (this is your clickTag code).

    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 Click Tag Code.

  4. Click Preview in Browser to open the ad in your browser. Add ?clickTag=http://YOUR-URL-HERE.com at the end of the URL in the address bar with the landing page you want to test. Refresh the page and click on the creative. A new window with the landing page you entered should open in your browser. When the creative is served, Xandr sets the value of clickTag to Xandr's click tracker and sets a redirect to the landing page URL provided in Microsoft Monetize.

Build an HTML5 Xandr Creative in Google Web Designer