1. 242/102/49 0/51/59 181/172/166 Primary colors 248/152/29 PMS 172 PMS 137 PMS 546 PMS 407 251/206/146 202/227/233 141/129/123 Secondary colors 114/181/204 PMS 148 PMS 7458 PMS 7457 PMS 409 93/79/75 PMS 411 233/166/143 PMS 487 © 2010 MediaMind Technologies Inc. | All rights reserved Michael Denton | Publisher Formats Engineer Tia Koehler | Tier 2 Engineer November 2011 Custom Scripts and Ad Customization

2. © 2010 MediaMind Technologies Inc. | All rights reserved ▸ Existing Mediamind Platform Formats ▸ Customization ▸ Examples ▸ Certification Process ▸ Q&A/Discussion Agenda

3. © 2010 MediaMind Technologies Inc. | All rights reserved Existing Mediamind Platform Formats

4. © 2010 MediaMind Technologies Inc. | All rights reserved List of Existing Formats ▸ In Banner Standard Banner / Enhanced Standard Banner Polite Banner Expandable Banner / Standard Expandable Single Expandable / Expandable Strip Popup Banner Pushdown ▸ Out Of Banner Commercial Break, Floating Ad (w/ reminder or without), Wallpaper Ad, Window Ad, Standard Floating Ad ▸ Mobile ▸ Other (Vast/InStream)

5. © 2010 MediaMind Technologies Inc. | All rights reserved Platform List of Display Ad Formats

6. © 2010 MediaMind Technologies Inc. | All rights reserved Customization

7. © 2010 MediaMind Technologies Inc. | All rights reserved How does customization work? ▸ Sometimes just creative execution utilizing existing format ▸ Can require much more ▸ If a one-off, would go to the Custom Projects queue ▸ If a template for multiple ads, would go to PIT (Product Innovation Team), formerly the Publisher Formats team ▸ If an issue (something is broken), would go to Tier 1 by emailing (support@mediamind.com). The issue then may be resolved with custom script patch by Tier 1 or, when necessary, they may escalate to Tier 2 or Tier 3 to develop.support@mediamind.com

8. © 2010 MediaMind Technologies Inc. | All rights reserved Type of customization via javascript ▸ Injection Points (triggered by delivery scripts) via javascript to modify an ads behavior ▸ Modify CSS (including animation) ▸ Event-driven actions ▸ Javascript/Flash communcation ▸ Flash/Flash communication via javscript ▸ Communcation with parent page (pause existing videos, collapse visible divs, etc)

9. © 2010 MediaMind Technologies Inc. | All rights reserved Injection Points ▸ onClientScriptsLoaded ▸ onBeforeAddRes ▸ onBeforeAddPanelRes ▸ onHandleInteraction ▸ onBefore(After)DefaultBannerShow ▸ onBefore(After)RichFlashShow ▸ onBefore(After)PanelShow(Hide) ▸ onBefore(After)AdClose ▸ onBefore(After)IntroShow (Hide) ▸ onBefore(After)RemShow (Hide) ▸ onBefore(after)MiniSiteShow (Hide)

10. © 2010 MediaMind Technologies Inc. | All rights reserved Injection Points ▸ onClientScriptsLoaded - Fires when all the JavaScript files have been loaded (except for the Positioning file for OOB). Can overwrite client code functions here ▸ onBeforeAddRes/onBeforeAddPanelRes - Use when you need to modify something (possibly position or dimension) in the banner / panel assets which you need to save permanently in the banner/panel object. ▸ onHandleInteraction - Custom Interactions, Unique Dwell, Above The Fold, Clickthroughs, etc. ▸ onBefore(After)DefaultBannerShow and onBefore(After)RichFlashShow - Change CSS

11. © 2010 MediaMind Technologies Inc. | All rights reserved Custom Script Template ▸ http://ds.serving- sys.com/BurstingRes/CustomScripts/CustomScri pt_Template.js http://ds.serving- sys.com/BurstingRes/CustomScripts/CustomScri pt_Template.js

12. © 2010 MediaMind Technologies Inc. | All rights reserved When to Fire the Script (On Ad Preload)

13. © 2010 MediaMind Technologies Inc. | All rights reserved When to Fire the Script (On Ad Download)

14. © 2010 MediaMind Technologies Inc. | All rights reserved When to Fire the Script (On Ad Play)

15. © 2010 MediaMind Technologies Inc. | All rights reserved Tokens ▸ [%tp_adid%] ▸ [%tp_flightid%] OR [%tp_PlacementID%] ▸ [%tp_CampaignID%] ▸ [%tp_PlacementBannerSize%]

16. © 2010 MediaMind Technologies Inc. | All rights reserved Other Abilities ▸ Can handle (and filter) browser version/type and OS detection ▸ Create event handlers (mouseover/out, scroll, resize, etc) ▸ Communicate with flash assets via javscript (and vice versa) ▸ Calculate viewable size of screen and adjust swfs accordingly (positioning/dimension) ▸ Implement non-standard Brand Awareness / Surveys which do not fire properly in the system as is

17. © 2010 MediaMind Technologies Inc. | All rights reserved Uploading Custom Scripts

18. © 2010 MediaMind Technologies Inc. | All rights reserved Uploading Custom Scripts ▸ Naming Convention: PL_ScriptName_PublisherName.js OAD_ScriptName_PublisherName.js OAP_ScriptName_PublisherName.js ▸ Akamai Purge URL: http://10.2.0.110:8080/Default.aspx

19. © 2010 MediaMind Technologies Inc. | All rights reserved Examples

20. © 2010 MediaMind Technologies Inc. | All rights reserved Windows Live Click to Share ▸ http://demo.mediamind.com/PublisherFormats/MS/WL_Clic kToShare_300x250_Expandable_Demo.html http://demo.mediamind.com/PublisherFormats/MS/WL_Clic kToShare_300x250_Expandable_Demo.html ▸ Using OnAfterPanelShow ▸ Constantly checks for loss of focus of the panel swf, upon loss of focus, collapse panel

21. © 2010 MediaMind Technologies Inc. | All rights reserved MSN Filmstrip ▸ http://demo.mediamind.com/PublisherFormats/MS/WL_Film strip_300x600_Demo.html http://demo.mediamind.com/PublisherFormats/MS/WL_Film strip_300x600_Demo.html ▸ Only using injection points to get a reference to the SWF and attach an onScroll event ▸ Listening for scroll of page, then sends message to SWF notifying SWF to advance the scene to the next

22. © 2010 MediaMind Technologies Inc. | All rights reserved New York Times Sidekick With Ears ▸ http://demo.mediamind.com/PublisherFormats/NYTimes/NY Times_SidekickWithEars_AS3_Demo.html http://demo.mediamind.com/PublisherFormats/NYTimes/NY Times_SidekickWithEars_AS3_Demo.html ▸ Modified version of "Sidekick" format (which is available as a block, a modified version of the expandable banner) ▸ Using many different functions to achieve cross-swf communcation and expansion of the sidekicked panel. ▸ 3 separate ads on the page, all communicating together ▸ Script allows positioning of the "sidekick" panel is relative to another div on the page, not to the banner (which is more typical)

23. © 2010 MediaMind Technologies Inc. | All rights reserved Windows Live SmartServe API Header ▸ http://demo.mediamind.com/PublisherFormats/MS/WLHM_ SmartServeAPI_ExpandableHeader_Demo.html http://demo.mediamind.com/PublisherFormats/MS/WLHM_ SmartServeAPI_ExpandableHeader_Demo.html ▸ Ad served in unfriendly Iframe and communicates with a publisher API ▸ API allows expansion of iframes and creation of header iframe ▸ Header and Banner communicate via javascript with one another for changing states ▸ Overrides the collapsing of all panels on clickthrough, as this would break functionality and leave header expanded.

24. © 2010 MediaMind Technologies Inc. | All rights reserved NetEase China Pushdown With Reminder ▸ http://demo.mediamind.com/PublisherFormats/NetEaseChin a/NetEaseChina_Pushdown_Demo.html http://demo.mediamind.com/PublisherFormats/NetEaseChin a/NetEaseChina_Pushdown_Demo.html ▸ Ad is served out of a 1x1 ▸ Pushdown swf and reminder swf are all panels ▸ Reminders sit along bottom of screen and don't scroll ▸ Pushdown rhas smooth animation and receives events from javascript for ending of animation for expansion and beginning of animation for collapse ▸ Pushdown is injected into DOM via javscript

25. © 2010 MediaMind Technologies Inc. | All rights reserved Generic Script ▸ http://ds.serving- sys.com/BurstingRes/CustomScripts/SetDivsStyles_Event_ BrowserVer_RB_OOB_Relative_Class_Rules.js http://ds.serving- sys.com/BurstingRes/CustomScripts/SetDivsStyles_Event_ BrowserVer_RB_OOB_Relative_Class_Rules.js ▸ This script allows us to modify any css rules of any div or style on the page, triggered by any event supported, and filterable by browser type and version. ▸ Able to use one script and pass parameters to that script to handle the CSS change ▸ Prior to development of this script, would need css changes hard-coded into script, now is more dynamic and script is reusable

26. © 2010 MediaMind Technologies Inc. | All rights reserved Certification Process

27. © 2010 MediaMind Technologies Inc. | All rights reserved Why do we certify formats? ▸ All publisher pages are different (Layout, JS, CSS) ▸ Many publishers have different specifications for their ads ▸ Ensure an ad format we currently offer runs correctly on the publisher’s site ▸ Ensure a newly created format we do not currently offer is developed to spec and runs smoothly/correctly on publisher’s site ▸ Provide templates and build guides to creative shops for easier/smoother execution ▸ Cut down on required escalated support by eliminating bugs before campaigns go live

28. © 2010 MediaMind Technologies Inc. | All rights reserved Q&A / Discussion

29. © 2010 MediaMind Technologies Inc. | All rights reserved Thank you!