Custom Scripts and Ad Customization

© 2010 MediaMind Technologies Inc. | All rights reserved

Michael Denton | Publisher Formats Engineer

Tia Koehler | Tier 2 Engineer

November 2011

Custom Scripts and Ad Customization


▸ Existing Mediamind Platform Formats

▸ Customization

▸ Examples

▸ Certification Process

▸ Q&A/Discussion

Agenda


Existing Mediamind Platform Formats


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 BannerCommercial Break, Floating Ad (w/ reminder or without), Wallpaper Ad, Window Ad, Standard Floating Ad

▸ Mobile

▸ Other (Vast/InStream)


Platform List of Display Ad Formats


Customization


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 ([email protected]). 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.

mailto:[email protected]


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)


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)


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


Custom Script Template

▸ http://ds.serving-sys.com/BurstingRes/CustomScripts/CustomScript_Template.js

http://ds.serving-sys.com/BurstingRes/CustomScripts/CustomScript_Template.js

http://ds.serving-sys.com/BurstingRes/CustomScripts/CustomScript_Template.js


When to Fire the Script (On Ad Preload)


When to Fire the Script (On Ad Download)


When to Fire the Script (On Ad Play)


Tokens

▸ [%tp_adid%]

▸ [%tp_flightid%] OR [%tp_PlacementID%]

▸ [%tp_CampaignID%]

▸ [%tp_PlacementBannerSize%]


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


Uploading Custom Scripts


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

http://10.2.0.110:8080/Default.aspx


Examples


Windows Live Click to Share▸ 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

http://demo.mediamind.com/PublisherFormats/MS/WL_ClickToShare_300x250_Expandable_Demo.html

http://demo.mediamind.com/PublisherFormats/MS/WL_ClickToShare_300x250_Expandable_Demo.html


MSN Filmstrip▸ 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

http://demo.mediamind.com/PublisherFormats/MS/WL_Filmstrip_300x600_Demo.html

http://demo.mediamind.com/PublisherFormats/MS/WL_Filmstrip_300x600_Demo.html


New York Times Sidekick With Ears▸ 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)

http://demo.mediamind.com/PublisherFormats/NYTimes/NYTimes_SidekickWithEars_AS3_Demo.html

http://demo.mediamind.com/PublisherFormats/NYTimes/NYTimes_SidekickWithEars_AS3_Demo.html


Windows Live SmartServe API Header▸ 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.

http://demo.mediamind.com/PublisherFormats/MS/WLHM_SmartServeAPI_ExpandableHeader_Demo.html

http://demo.mediamind.com/PublisherFormats/MS/WLHM_SmartServeAPI_ExpandableHeader_Demo.html


NetEase China Pushdown With Reminder▸ 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

http://demo.mediamind.com/PublisherFormats/NetEaseChina/NetEaseChina_Pushdown_Demo.html

http://demo.mediamind.com/PublisherFormats/NetEaseChina/NetEaseChina_Pushdown_Demo.html


Generic Script▸ http://ds.serving-sys.com/BurstingRes/CustomScripts/SetDi

vsStyles_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

http://ds.serving-sys.com/BurstingRes/CustomScripts/SetDivsStyles_Event_BrowserVer_RB_OOB_Relative_Class_Rules.js




Certification Process


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


Q&A / Discussion


Thank you!

Documents

Custom Scripts and Ad Customization