Make Expandable Creatives Expand

Medialets Support -

Using the servo.expand() method is required to assure that:

  1. your creative expands properly for end users in all mobile environments, and;
  2. the total number of expands and expand rate are reported on properly in Servo campaign reporting.

The servo.expand() method automatically provides reporting on the expansion event. Please do not implement any additional reporting to track expansion events — they are tracked automatically.

What does the servo.expand() method actually do when it is used?

When a user taps to expand your HTML5 creative, the servo.expand()automatically detects all the variations in the current environment and invokes one of dozens of lower level expansion functions with just the right combination of parameters (and Inventory Partner-specific hacks) that make the expansion actually occur.

When you flip on a light switch, you don't need to understand that there are wires running inside the walls from the switch to the light bulb, or that there is a power station far away that is generating electricity that is being fed to the building along miles of high tension wires, all being metered and maintained by a staff of dedicated professionals. When you flip a light switch, all you need to know is that — and the light just "magically" turns on.

Similarly, the servo.expand() function makes what would be an often insurmountable task of customizing HTML5 rich media creatives to work in dozens of proprietary Inventory Partner mobile environments as simple as flipping a light switch to turn on a light.

For example, when your expandable creative is delivered to an in-app, MRAID environment, the servo.expand() method calls the mraid.expand() function and changes the dimensions of the UIWebView in the app, loads your creative's expandable.html file inside it.

In a mobile website environment (in a mobile browser), the servo.expand()method will create a second <iFrame>, filling the browser viewport, and loading your creative's expandable.html file within it.

Some Inventory Partners' mobile apps and sites also have proprietary expansion methods, or even known bugs that the servo.expand() method works around automatically for you.

The servo.expand() method is a workhorse that saves creative developers multiple days of intensive and unrewarding debugging work every time they use it. It also helps to assure that creative development resources are conserved and that campaigns launch on time.

Expandable creatives must contain a minimum of three files:

  • Every rich media creative must contain an HTML5 file named index.html.
  • The index.html file contains the HTML5 code representing the banner content, collapsed/initial banner content, or interstitial panel content.
  • The index.html file must be in the "root" directory of the rich media creative.
    Learn more about the contents of the index.html file.

 

  • The expandable.html file is required for Servo rich media creatives that are expandable format.
  • The expandable.html file contains the HTML5 code representing the expanded panel content.
  • The expandable.html file must be in the "root" directory of the rich media creative.

 

  • The servo.config.js file is required for Servo rich media creatives that contain multiple clickthrough hotspots.
  • The servo.config.js file contains a formatted JavaScript object defining each clickthrough hotspot name and the default/fallback URL used for local testing and Client review.
    Learn more about the contents of the servo.config.js file.

 

Expanding to Full-Page (Default Behavior)

By default, the servo.expand() creates a second "container" — WebView in-app or an iFrame in mobile web — that fills all available space (full-page) and loads the expandable.html file inside it.

What Size is "Full-Page"?
Most mobile Inventory Partners and networks allow expanded creatives to fill all available space in the current environment (full-page). But it is important to note that the servo.expand() method does not control the amount of space that the given mobile environment makes available to expanded creative.

In-App: Full-page expanded creatives delivered to in-app environments will usually fill the mobile device's entire screen.

Mobile Web: In mobile web environments, "full-page" is usually not "full-screen" because the browser's navigation bars will take up some (variable) portion of the device's full-screen. But the entire browser viewport — the entire, underlying web page — will be covered by the expanded panel and the expandable.html file.

Since the width and height of "full-page" is inherently variable, creatives that do expand to "full-page" should be designed and developed to render well at all reasonably possible target sizes.

It is also important to consider both portrait and landscape orientations since all mobile web browsers and many in-app environments do require both layouts.

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

 

index.html - Full-Page Expansion

 

Expanding to Fixed Dimensions

To accommodate Inventory Partner placement that require fixed dimensions for the expanded panel, the servo.expand() method accepts an optional object specifying width and height values.

When the object with width and height values is passed in, the expandable.html file creative is given exactly the amount of space specified and is centered in the total available space. A dark "backdrop" layer is also automatically added behind the expanded panel.

 

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

 

index.html - Full-Page Expansion

 

 

Have more questions? Submit a request

Comments

Powered by Zendesk