MediaMind Mobile Rich Media

© 2012 MediaMind | A Division of DG | All rights reserved

Matthew Flatman | Creative Account Manager / Developer

September 2012

MediaMindMobile Rich Media <HTML5>

© 2012 MediaMind | A division of DG | All rights reserved

What is HTML5?

• HTML5 is the new standard of HTML• Introduces new features & capabilities• JavaScript and CSS provide the means to

animate and add interactivity.• Removes the reliance on 3rd party plug-ins eg.

Flash

<HTML>JavaScript CSS 3


Scalability on Mobile

Standard Rich Media IAB Rising Stars Custom Executions

HTML 5 is the easiest way to scale Mobile across the most devices and formats.

http://qatech.unicast.com/mobile/adAPPter/mm/v1.0.32.html

http://cdn.eyewonder.com/100125/DEMO/nytimes/whitecollarnytimesdemo.html

http://demo.eyeblaster.com/Mobile2010/v2FlashDemo/MediaMind_Buttons_v3.html


Mobile Ad Formats

In-App Mobile Site Ads

Tablet specific Smartphones

http://qatech.unicast.com/mobile/adAPPter/mm/v1.0.32.html


HTML5 templates

▸Basic

• Polite banner

• Expandable banner

▸Mobile Specific

• Tap to call

• Tap to Video and social sharing

• Tap to Image gallery

• adAPPter

© 2012 MediaMind | A division of DG | All rights reserved© 2012 MediaMind | A division of DG | All rights reserved

HTML5 Creative Upload


HTML5 API

In order to be tracked and function properly, every HTML5 ad must include the following:

▸Loading the initialisation code:

<script type="text/javascript" src="http://ds.serving-sys-dev.com/BurstingScript/EBLoader.js"></script>


HTML5 API

▸ Initializing the ad flow after the EB script has been loaded:

<script type="text/javascript">

function onInit() {

// show the creative and start the flow

}

if (!EB.isInitialized())

EB.addEventListener(EBG.EventName.EB_INITIALIZED, onInit);

else

onInit();

</script>


HTML5 API

Common API methods:

▸ isInitialized()

Checks whether the EB object is fully initialized and available for API calls.

▸browserSupports()

Verifies if the browser supports the specified HTML feature, using Modernizr

▸showDefaultImage()

Makes a request to show the default image defined for the ad, instead of the displayed rich banner.

http://modernizr.com/docs/


HTML5 API

Common API methods:

▸clickthrough()

Tracks a clickthrough custom interaction

▸userActionCounter()

Tracks a user action custom interaction

▸automaticEventCounter()

Tracks an automatic event counter custom interaction.


HTML5 API

Common API methods:

▸startTimer()

Starts a timer to measure the duration of a custom interaction

▸stopTimer()

Stops a timer used to measure the duration of a custom interaction

▸ initExpansionParams()

Initializes the expansion parameters prior to using expand() ( "expand()") and collapse() ( "collapse()").

.


Debugging

▸ To debug your HTML5 ad , you can use the built in developer debugging tool in every browser (usually by pressing F12):


Debugging

▸ The debugging tool:• Detects Errors

• Shows Warnings

• Logs activity


Debugging – Metrics tracked

▸ The following metrics are available for HTML5 Ads:ImpressionsClicksCTRExpandCollapseExpand Duration1x1 Impression TrackingCustom Interactions

Video StartedVideo Quartile Reporting (video played to 25%, 50%, 75%, and completion)Video CompletedReplayPauseMute/Unmute


HTML5 Beta Details

▸Looking for Beta Partners to lead HTML5 in APAC

▸ Ideal campaign criteria – cutting edge innovation

▸MediaMind to add tracking to fully functional HTML5 ads and upload (full service).

▸Self-Service HTML5 process to follow

▸Templates and demo files available to use now!

Documents

MediaMind Mobile Rich Media