Working with Adobe Edge Files

Medialets Support -

This instruction guide assumes the creative file has been developed in the Adobe Edge 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 with one click-through. The same process can be applied for banner units with multiple clickthroughs as well.

Part I. Set up Your Click-Through(s):

  1. Select your click-through hotspot/button on the stage or layer and right-click. At the bottom of the drop-down menu, you will see “Open actions for X”, where “X” is the name of your hotspot/button.

  2. Set up a function for your click-through link. Select the touchend event.



  3. Type in your click-through code:

    servo.clickthrough('myKeyName');

    replacing 'myKeyName' 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.

    TouchEnd.png

  4. 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

  1. To include the Servo Rich Media API, you will need to incorporate the following Servo Rich Media API Javascript file from the Medialets CDN into your index.html file (and expandable.html file if applicable):

    <script src=”http://cdn.creative.medialytics.com/javascript/servo-rich-media.js”></script>

    Note: The Servo Rich Media API’s javascript file must always be delivered from the Medialets CDN. Never save the API’s javascript library file to a local directory.

  2. Include the the servo.config.js file in your index.html file (and your expandable.html file if applicable):

    <script src=”servo.config.js”></script>

    Caution: Do not implement the Servo Rich Media API using the “scripts” panel within Edge. Edge does not append the scripts into the HTML, but rather its own javascript file, which may break functionality of the creative.

    Below is an example of proper implementation for these two files:



    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.

    Read more about this here and here.

Part III. Export Your HTML Creative from Edge

  1. Go to File > Save As, save the file as “index.html” for the banner (or initial banner if this is 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.

  2. Once you have chosen your location, click Save.

Edge will output with the following:

  1. HTML file

  2. “edge_includes” folder

  3. “images” folder (if applicable)

  4. edge.js file

  5. edgeActions.js file

When creating your ad bundle zip file to upload to Servo, you may remove the .an file, as that is not required in Servo (but you will still want to keep this file on hand in case additional edits are needed later). Please make sure to include everything else as well as your servo.config.js file when uploading your your zipped ad bundle to Servo.

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.

Additional Tracking

For additional Servo Rich Media API video, data, or engagement tracking, please read Servo’s Creative API Documentation.

Have more questions? Submit a request

Comments

Powered by Zendesk