Build an HTML5 Xandr creative in Google Web Designer

This page explains how to use Google Web Designer to build HTML5 creatives that will properly track clicks in Xandr.

  1. Open Google Web Designer.

  2. Click CREATE NEW FILE. The Create New Blank File pop-up displays.

  3. Click HTML from the Others menu.

  4. Enter a Name and Title for the creative.

  5. Select a Location and Animation Mode.

  6. Click OK. The Create New Blank File pop-up closes.

  7. Click the + button in the lower left of Google Web Designer under the Events tab to add a new event.

    Screenshot of the Events tab.

    A pop-up displays.

  8. Select a target.

    Screenshot that shows Target been selected.

    This will be the element of the ad that will be clickable.

  9. Select an event.

  10. Select one of the available options that display for the event.

    Screenshot of the available event options.

  11. Select Custom under the action menu.

  12. Select Add custom action.

    Screenshot of the Add custom action option.

  13. Type a unique name in the text field that displays next to "gwd." (e.g., XandrClick).

  14. 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 custom code.

    Note

    Since Google Web Designer has a known issue related to key commands, you must paste the code using your computer's menu bar paste option.

  15. Click OK.

  16. Test the creative by performing the following if necessary:

    1. Click Preview in the upper-right of Google Web Designer to open the creative in your browser.

      Screenshot of the preview screen.

    2. Add "?clickTag=https://yoururlhere.com" in the address bar at the end of the landing page URL that you want to test.

    3. Refresh the page and click on the creative.

      A new window with the landing page that you entered should open in your browser. When the creative is served, Xandr sets a value of clickTag to Xandr' click tracker along with a redirect to the landing page URL provided in Microsoft Monetize.