Google Web Designer is a beta application. This article was written for Google Web Designer 1.6.0.0429
This guide provides instructions for building a rich media banner creative with a single click-through action. The same process can be applied for banner units with multiple clickthrough actions.
Part I. Setting up your document
- When Google Web Designer opens, select Create New File.
- Under the environment section, open the drop-down and select Non-Google Ad.
- Add all other pertinent information such as size and location to save your assets.
- Select OK when finished.
This instruction guide assumes the creative file has been developed in the Google Web Designer platform. Please ensure all creative animation and interactivity is fully functional at this point. We recommend always testing the creative on a mobile device.
Part II. Add Servo API and servo.config.js call to your HTML File(s):
- Select the Code View button in the top right of the applicaiton.
- At the top of your code, under the last meta tag, add the following lines of code.
Part III. Set up your click-through(s):
Adding click-through code
- On the right hand side, select the Components tab.
- Drag the Tap Area component over the top of your creative and size to fit your needs.
- Under the Events tab, select the Plus (+) button at the bottom of the events tab to add a new event.
- In the Target section within the pop-up dialogue box, select your Tap Area target.
- Next, in the Event section, select the Tap Area Drop-Down, and select Touch/Click.
- Next, in the Action section, select the Custom Drop-Down and select + Add Custom Action.
- Next, in the Add Custom Action section, give your function a name and add the following code in the large input box: servo.clickthrough('clickTag');
- Finally, select Save.
Creating servo.config.js file
- Create the servo.config.js file, referencing the keyname you put within your servo.clickthrough call above, and have that file at the root of your file structure.
- Please reference Servo’s Creative API documentation, found here, regarding the servo.config.js file, and/or download a sample servo.config.js file here.
Note: You may replace 'clickTag' with the keyname you want to have appear in Servo reporting.
Note: Only alphanumeric and the underscore characters are supported. The keyname must begin with a letter. You can read more about adding servo clickthrough here.
Note: Your servo.config.js file MUST live at the root of your Google Web Designer project folder. This will allow you to publish your creative. If the file is not there, but is called, you will get an error when trying to publish.
Part IV. Publishing your creative
- At the bottom, right above the timeline, you’ll see Publish. Select The Up Arrow next to the Publish button to bring up a dialogue box of options.
- Select Publish Locally.
- Name your creative bundle (.zip), and select the location you wish to save.
- Check the following boxes only:
Webkit (Safari, Android 4.x or lower)
Mozilla (Firefox 15 or lower)
You may also optionally select to add a border.
- Select Publish.
Part V: Upload to Servo
Read more about How to Upload Rich Media Creative to Servo.
For additional Servo Rich Media API video, data, or engagement tracking, please read Servo’s Creative API Documentation.