Create the servo.config.js File and Add Click-Through Actions

Medialets Support -

Why use the servo.config.js file?

The servo.config.js file is used to name and configure one or more clickthrough URLs for your rich media creative.

Each clickthrough defined in the servo.config.js file can then be modified by an AdOps Trafficking team (for click tracking purposes) without editing any source code in your rich media creative.

The design of this structure allows your clickthroughs to function normally during creative development, testing, and review while also and allowing Ad Trafficking teams to easily specify click tracker URLs per campaign traffic sheets.

Where does the servo.config.js file go in my creative?

The servo.config.js should be placed in the "root" level of your creative, alongside the index.html file.

Is the servo.config.js file required?

Yes. The servo.config.js file is required for every rich media creative that is uploaded to Servo, even if there is only a single clickthrough action in your creative execution.

What does servo.config.js file contain?

The servo.config.js file defines a JavaScript object named config that sits in the servo namespace. That config object defines an object named clickthroughs that specifies one or more name/value pairs using JSON format. Please see the below example:

servo.config.js
 

How to specify each "clickthroughName" : "fallbackURL" pair

"clickthroughName"

The name of each clickthrough defined in the clickthroughs object is very important.

  • HTML5 developers will use the "clickthroughName" string when implementing clickthroughs in their creative.
  • The "clickthroughName" string is used directly in Servo campaign reporting to show how many clickthroughs each clickthrough hotspot received.

As general guidelines, each "clickthroughName" should be:

  • a string, surrounded by double or single quotes
  • be formatted in camelCase with no spaces or special characters; just use letters & numerals.
  • meaningful and relevant. Anyone should be able to tell which CTA hotspot within the creative a "clickthroughName" is referring to.
  • do not use any variables or calculations to specify the "clickthroughName"

"fallbackURL"

The value of each clickthrough defined in the clickthroughs object is a full and functioning URL that will be applied to clickthrough hotspots when testing/previewing creative locally and in the Servo Review app. The URL should be:

  • a landing page that the Client would expect to see when clicking that hotspot in the creative when reviewing the creative.

When the creative is trafficked and served to a Inventory Partner placement via the actual Servo ad tag, this value may be overridden with any click-tracker URL specified by an AdOps Trafficking team. 

Creative developers use the servo.clickthrough() method to implement clickthroughs in their rich media creative.

Add Click-Through Actions 

Before using the servo.clickthrough() method, you must configure the clickthroughs in your creative's servo.config.js file.

To protect against malicious and fraudulent activity, the servo.clickthrough() method must be triggered from either a click or touchend DOM event.

index.html or expandable.html

 

The above servo.clickthrough() implementation example, assumes the use of the servo.config.js file, such as the one below:

 
servo.config.js

 

Upon clicking any of the hotspots in the creative defined as above:

  1. The user would be taken to the appropriate "default" URL, as specified in the servo.config.js file's clickthroughs object.
  2. Total counts of all valid clickthroughs and clickthrough rate will automatically be provided in campaign reporting.
  3. Total counts for each, individually named clickthrough hotspot will automatically be provide in campaign reporting.
  4. An AdOps Trafficking team using Servo will be able to override the "default" URLs specified in servo.config.js. They would typically use click tracker URLs specified in a trafficking sheet when trafficking ads to a Inventory Partner's site or app.

 

Note: When viewing this video, view Fullscreen and select 1080p for best quality. 

Have more questions? Submit a request

Comments

Powered by Zendesk