Introduction

This document provides sample ads that demonstrate the basic functionality of the ad types described in the MRAID v1.0 and v2.0 standards and supported in Opera Mediaworks’ SDKs. Each example below provides an HTML code snippet, a list of the methods and events used, and the expected behavior for a given ad type. The ads were successfully tested using AdMarvel’s iOS and Android Tester Apps. They were also successfully tested using the MRAID web tester, a tool that simulates an SDK environment. Any exceptions in web tester behavior are noted in the respective sections.

Audience

This document is for anyone creating MRAID-compliant ads meant to run in Opera Mediaworks SDKs. Some familiarity with the MRAID specification is required.

MRAID v2.0 Ads

Each ad type here uses at least some functionality that is only available in MRAID v2.0. The URLs contain raw HTML code and must be used as HTML snippets/fragments. They are not complete HTML documents/pages. Following are the available ad types:

• Expand with Orientation Locked to Portrait
• Expand Stay Centered Using Size Change
• Simple Resize
• Video Interstitial
• Diagnostic Ad

Expand with Orientation Locked to Portrait

Ad HTML Snippet URL

http://admarvel.s3.amazonaws.com/demo/mraid/MRAID_v2_expand_with_locked_portrait_orientation.txt

Methods

• expand

• close

• addEventListener

• removeEventListener

• open

• getState

• setOrientationProperties

• playVideo

• supports

• storePicture

• createCalendarEvent

Events

• ready

• stateChange

Expected Behavior

This ad renders as a 320×50 banner that attempts to expand when clicked. No special expand properties are set, but setOrientationProperties() is called to lock the orientation so that the ad expands in portrait only. The expanded ad has buttons for various click actions that use the new MRAID v2.0 methods, such as playVideo() instead of open(), when appropriate. They also check the supports() method where possible, and if the current device does not support the given action, displays an alert instead of processing the action.

Expand Stay Centered Using Size Change

Ad HTML Snippet URL

http://admarvel.s3.amazonaws.com/demo/mraid/MRAID_v2_expand_stay_centered.txt

Methods Used

• expand
• close
• addEventListener
• removeEventListner
• open
• getState
• playVideo
• supports
• storePicture
• createCalendarEvent

Events Used

• ready
• stateChange
• sizeChange

Expected Behavior

This ad renders as a 320×50 banner that attempts to expand when clicked. No special expand properties are set. The ad uses the sizeChange events to keep the 320×250 expanded ad contents centered on the screen both horizontally and vertically. The expanded ad has buttons for various click actions that use the new MRAID v2.0 methods, such as playVideo() instead of open(), when appropriate. They also check the supports() method where possible and, if the current device doesn’t support the given action, displays an alert this instead of processing the action.

Simple Resize

Ad HTML Snippet URL

http://admarvel.s3.amazonaws.com/demo/mraid/MRAID_v2_simple_resize.txt

Methods Used

• close
• addEventListener
• removeEventListener
• open
• getState
• resize
• setResiveProperties
• playVideo
• supports
• storePicture
• createCalendarEvent

Events Used

• ready
• stateChange
• orientationchange (covered in MRAID v2.0 Ads above)

Expected Behavior

This ad renders as a 320×50 banner that attempts to resize to a 320×250 non-modal ad when clicked. The resize properties are setup so that the width is 320, the height is 250, the offsetX is 0, offsetY is 0, and allowOffscreen is false. This means that the ad resizes down if there is space, but will resize to fit on screen if there is not, so a banner on the bottom of the app would resize up. Since resize ads are unable to lock orientation, this collapses itself on a rotation change to prevent any unexpected behavior. The resized ad has buttons for click actions that use the new MRAID v2.0 methods, such as playVideo() instead of open(), when appropriate. They also check the supports() method where possible, and if the current device does not support the given action, then the device displays an alert instead of processing the action.

Video Interstitial

Ad HTML Snippet URL

http://admarvel.s3.amazonaws.com/demo/mraid/MRAID_v2_video_interstitial.txt

Methods Used

• addEventListener

• removeEventListner

• open

• getState

• isViewable

• supports

• close

• useCustomClose

• setOrientationProperties

• getScreenSize

Events Used

• ready

• viewableChange

Expected Behavior

This ad renders as a full screen video interstitial. It forces landscape orientation using setOrientationProperties() and uses the getScreenSize() method to scale the video to the max size for the device without chopping any of the video. It uses the viewableChange event to tell when it is displayed and therefore should start the video. This ad assumes the device supports HTML5 video and the video object can be used to play video. If the SDK supports inlineVideo, then the close button is hidden and the video auto-closes when the video completes. If the SDK does not support inlineVideo, then the close button remains and it is assumed the video will play full-screen.

Diagnostic Ad

Ad HTML Snippet URL

http://admarvel.s3.amazonaws.com/demo/mraid/MRAID_v2_diagnostics.txt

Methods Used

• addEventListener
• removeEventListner
• getState
• isViewable
• supports
• close
• useCustomClose
• getScreenSize
• getCurrentPosition
• getDefaultPosition
• getMaxSize
• getVersion
• getPlacementType
• expand
• getExpandProperties
• setExpandProperties
• useCustomClose
• open
• playVideo
• storePicture
• createCalendarEvent

Events Used

• ready
• error
• sizeChange
• stateChange
• viewableChange

Expected Behavior

This ad is intended to help diagnose problems that are occurring in the MRAID container. It can run as a banner or an interstitial. Since there is a lot of information to fit in this ad, run it as at least a 320×250 banner. Also, it is much easier to use in a simulator than on device where values are hard to edit. This ad provides access to all MRAID v2 APIs and also listens to all MRAID v2.0 events. When an event fires the affected value flashes green for a second to provide a visual clue that this values changed. This ad is also useful for testing cases not covered by the specific test ads above. Potential useful test cases include more complicated resize scenarios, resize and then expand, two part expands, etc.

MRAID v1.0 Ads

These ads run fine in both MRAID v1.0 and v2.0, though the behavior might be slightly different depending on the SDK implementation. The URLs contain raw HTML code and must be used as HTML snippets/fragments. However, they are not complete HTML documents/pages. Following are the available ad types:

• Expand with Custom Close
• Expand Using getExpandProperties to Center
• Simple Interstitial

Expand with Custom Close

Ad HTML Snippet URL

http://admarvel.s3.amazonaws.com/demo/mraid/MRAID_v1_expand_with_custom_close.txt

Methods Used

• expand
• close
• addEventListener
• removeEventListner
• setExpandProperties
• open
• getState

Events Used

• ready
• stateChange
• orientationchange (not covered in MRAID v1.0)

Expected Behavior

This ad renders as a 320×50 banner that expands when clicked. The expand properties set a 320×250 size and useCustomClose to true to hide the SDK close button. On MRAID v1.0, this is a modal full screen expansion or a non-modal partial screen expansion. On MRAID v2.0, you are guaranteed a full screen expansion. Since orientation locking was not possible in MRAID v1.0, this ad collapses itself on rotation change to prevent any unexpected behavior. The expanded ad has buttons for various click actions, all handled by calling open().

Expand Using getExpandProperties to Center

Ad HTML Snippet URL

http://admarvel.s3.amazonaws.com/demo/mraid/MRAID_v1_expand_centered.txt

Methods Used

• expand()
• close()
• addEventListener
• removeEventListner
• getExpandProperties
• open
• getState

Events Used

• ready
• stateChange
• orientationchange (not covered in MRAID v1.0)
• window.orientation (not covered in MRAID v1.0)

Expected Behavior

This ad renders as a 320×50 banner that expands when clicked. The expand properties are not set, so a full screen expansion is intended and the SDK provided close button is used. Also, the getExpandProperties are read prior to expansion to get the screen dimensions and to center the 320×250 when expanded. The behavior on MRAID v1.0 and MRAID v2.0 should be very similar since this is a full screen expansion on both. Since orientation locking wasn’t possible in MRAID v1.0, this ad collapses itself on rotation change to prevent any unexpected behavior. The expanded ad has buttons for various click actions, all handled by calling open().

Simple Interstitial

Ad HTML Snippet URL

http://admarvel.s3.amazonaws.com/demo/mraid/MRAID_v1_simple_interstitial.txt

Methods Used

• addEventListener
• removeEventListner
• open
• getState
• isViewable

Events Used

• ready
• viewableChange

Expected Behavior

This ad renders as a full screen 320×480 interstitial. The important part of this ad is that it uses the viewableChange event to tell when it is displayed. In this case, this event just makes the ad visible. However, most ads use this to fire impressions as well as start the ad experience. The behavior on MRAID v1.0 and MRAID v2.0 is the same for this ad. The interstitial has buttons for various click actions, all handled by calling open().

Last Updated Sep 18, 2015