HTML5 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

A pop-up displays

8. Select a target.

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.

11.Select Custom under the action menu.
12.Select Add custom action

13.Type a unique name in the text field that displays next to “gwd.” (e.g., KeynesClick).
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');

15.

16.Click OK.
17.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.

2. Add “?clickTag=http://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, Keynes sets a value of clickTag to Keynes’s click tracker along with a redirect to the landing page URL provided in the Console.

Are your video assets ready for the TV screen? CTV Spec Check >