This instruction guide assumes the creative file has been developed in the Hype creative platform. Please ensure all creative animation and interactivity is fully functional at this point. We recommend testing on a mobile device.
This guide provides instructions for building a rich media banner asset with one click-through. The same process can be applied for banner units with multiple click-throughs as well.
Part I. Set Up Your Click-through(s):
- Find and select your button/click-through area on the stage. On the right, expand the Inspector panel. Click on the Actions panel.
- Expand the On Mouse Click (Tap) section by clicking on the plus sign. You should see the following screen:
- Click on the Function drop-down list and select New Function.
- Name your function.
- Inside of your function insert the following:
'myClickThru' corresponds to how the click-through keyname will read in Servo reporting.
Note: Only alphanumeric and the underscore characters are supported. The keyname must begin with a letter.
- 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.
Download a sample servo.config.js file at the bottom of the article.
Part II. Add Servo API and servo.config.js Call to Your HTML File
- Include the servo.config.js file in your index.html file (and your expandable.html file if applicable).
- To add the Servo Rich Media API and Servo servo.config.js files, open your Inspector again and click on the Document tab.
- Click Edit Head HTML.
Below is a reference of how to properly include the Servo Rich Media API and Servo servo.config.js file.
To test the click-through locally, ensure the servo.config.js file is located at the root of the folder structure, where the index.html (and expandable.html if applicable) file also lives.
Part III. Export Your HTML from Hype
Once your creative is completely built, export your HTML from within Hype.
- Go to File > Export as HTML5 > Folder, save the file as “index.html” for your collapsed portion (or if this is not an expandable creative), and “expandable.html” for your expand portion. Read more about this here. This naming convention will allow the Servo API to function properly.
- Once you have chosen your location, click the Save button.
Hype will output with the following:
- HTML file
- Hype resources folder which includes:
Note: The .hype file is not needed for your bundle, but we recommend keeping this file in case edits are needed to be made later. Please make sure to include everything else as well as your servo.config.js file in your zipped bundle to upload to Servo. Save your file within Hype by going to File > Save.
Part IV. Upload to Servo
Zip the entire folder and upload the zip file 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.