© 2010 MediaMind Technologies Inc. | All rights reserved
Architecture & Concepts
Itay KinnrotJune 2012
New Web Client - Training
© 2010 MediaMind Technologies Inc. | All rights reserved
Agenda
▸ Introduction
▸ New Web Client: the Main Players
▸ Web Client Flow: the Basics
▸ Web Client Flow: HTML5
▸ Custom Development
▸ More Details
▸ SDK
© 2010 MediaMind Technologies Inc. | All rights reserved
Introduction
▸ The Web Client code is about 9 years old, and includes redundant, unmodern and hardly maintained code.
▸ The Html5 project allows us to write a modern & modular web client from scratch, with a gradual shift of other existing ads.
▸ In the process, we'll also use modern development tools, like VS2010 JS Intellisense, html documentation, better logging etc.
© 2010 MediaMind Technologies Inc. | All rights reserved© 2010 MediaMind Technologies Inc. | All rights reserved
New Web Client: The Main Players
© 2010 MediaMind Technologies Inc. | All rights reserved
Web Client Flow – Main Players
▸ Adaptor - environment services provider• Singleton• DOM manipulation (e.g. addIframe)• DOM events subscription (e.g. 'unload')• Plug-ins & Capabilities queries (e.g. getFlashVersion())
• The adaptor can be extended to support non-browser environments (e.g ORMMAAdaptor) that will:
•Override specific methods (e.g. openPage())•Provide additional API (e.g. getGeoLocation())
© 2010 MediaMind Technologies Inc. | All rights reserved
Web Client Flow – Main Players
Adaptor ORMMA
© 2010 MediaMind Technologies Inc. | All rights reserved
Web Client Flow – Main Players
▸ EventManager – notify me when…• Singleton• Allows Subscription to Environment Events (e.g. 'pageload')
and Logical Events (e.g. 'expand') by providing a callback• Environment events subscription is done via the Adaptor• When an Event is triggered, it's dispatched to all the
subscribers.• Both Events and Subscriptions can have a ‘timing’, so some
events support subscription to ‘before’ they actually happen.• Some Events support Event handling abortion by the 'before'
subscribers• Used both by our scripts and custom scripts
© 2010 MediaMind Technologies Inc. | All rights reserved
Web Client Flow – Main Players
Adaptor
Event Manager
ORMMA
Subscribing to Environment Events
© 2010 MediaMind Technologies Inc. | All rights reserved
Web Client Flow – Main Players
▸ InteractionManager – interaction handler• Singleton• Handles counter interactions (BS reporting, 3rd party tracking,
open landing page)• Handles timer interactions (e.g. stop/start)• Responsible for handling and reporting of interactions when
the page unloads (thus using the EventManager)• Reports interactions via the Adaptor
© 2010 MediaMind Technologies Inc. | All rights reserved
Web Client Flow – Main Players
Adaptor
Event Manager Interaction Manager
ORMMA
Subscribing to Environment Events
Interaction Reporting
© 2010 MediaMind Technologies Inc. | All rights reserved
Web Client Flow – Main Players
▸ Ad – represents an ad on the page• Contains the ad's configuration from MM (e.g. click url, assets
etc.)• Holds the ad's current state (e.g. isInitialized)• Uses EventManager to subscribe to events (e.g. 'pageload')• Uses InteractionManager to handle interactions• Uses the Adaptor for environment services (e.g. determine
whether html5 is supported)• Holds CreativeContainer objects to create and communicate
with each of the ad creatives. Details to follow…
© 2010 MediaMind Technologies Inc. | All rights reserved
Creative
Web Client Flow – Main Players
Adaptor
Event Manager Interaction Manager
Creative Container
Ad
adConfig
State
Interaction Managers
ORMMA
Subscribing/DispatchingEvents
Interaction HandlingEnvironment Services
Subscribing to Environment Events
Interaction Reporting
© 2010 MediaMind Technologies Inc. | All rights reserved
Web Client Flow – Main Players
▸ CreativeContainer – contains an ad's creative• Adds the creative to the page (e.g. iframe for html5 banner,
flash object for flash banner)• Provides an interface for sending messages to the creative• Handles messages from the creative and dispatches events
accordingly via the the EventManager• This is the only different module between an html-based and
flash-based banner
© 2010 MediaMind Technologies Inc. | All rights reserved
Web Client Flow – Main Players
Adaptor
Event Manager Interaction Manager
Ad
adConfig
State
Interaction Managers
ORMMA
Subscribing/DispatchingEvents
Interaction HandlingEnvironment Services
CreativeCreative Container
Subscribing to Environment Events
Interaction Reporting
© 2010 MediaMind Technologies Inc. | All rights reserved
Web Client Flow – Main Players
▸ Initializer – who wants to play?• Determines the classes to initialize, i.e. which Adaptor, which
Ad class• Allows custom scripts to customize/override the classes to be
instanced• Instances the singletons if necessary (Adaptor,
InteractionManager, EventManager)• Instances the Ad object which starts the flow
© 2010 MediaMind Technologies Inc. | All rights reserved© 2010 MediaMind Technologies Inc. | All rights reserved
Web Client Flow: The Basics
© 2010 MediaMind Technologies Inc. | All rights reserved
Web Client Flow – The Basics
▸ Script tag on the page BS request BS response:
Environment variables General selection params (e.g. delivery group id) Selected ad configuration 3rd party impression tracking Loading the client script
▸ `
© 2010 MediaMind Technologies Inc. | All rights reserved
Web Client Flow – The Basics
▸ The client script will use the Initializer to instance the singletons and the Ad object
▸ When the ad initializes: Ad compatibility is checked using the Adaptor (e.g. supportsHtml5)
and if necessary a default image is shown Relevant interactions (common and format-specific) are registered
using the InteractionManager Subscribes to the relevant events using the EventManager Special interaction managers (e.g. DwellTimeManager) are
instanced and subscribe themselves to events a CreativeContainer is created for showing & communicating with
the ad's creative(s)
▸ `
© 2010 MediaMind Technologies Inc. | All rights reserved© 2010 MediaMind Technologies Inc. | All rights reserved
Web Client Flow: HTML5
© 2010 MediaMind Technologies Inc. | All rights reserved
Web Client Flow – HTML5▸ For an HTML5 ad, the creative is a page (html) which contains many
resources and scripts.
▸ To avoid security issues, the creative will be served in an iframe from a different domain, created by the CreativeContainer.
▸ `
Iframe – ds.serving-sys.com/creative.html
Publisher page – www.publisher.com/home.html
Ad
Creative Container
© 2010 MediaMind Technologies Inc. | All rights reserved
Web Client Flow – HTML5▸ Just like a flash creative, we will only require the creative to include a
'proxy' – EB.js
▸ The communication between the Ad and Creative (and vice versa) will be done via the CreativeContainer and the EB using html5's window messaging mechanism
▸ `
Iframe – ds.serving-sys.com/creative.html
Publisher page – www.publisher.com/home.html
Ad
Creative Container EB
© 2010 MediaMind Technologies Inc. | All rights reserved
HTML5 - Example Use Cases
Scenario #1: User clicks on the ad▸ Creative calls EB.Clickthrough()
▸ EB sends a 'Clickthrough' message to the CreativeContainer in the outer window
▸ Ad’s CreativeContainer converts the message to an Event and calls EventManager.dispatchEvent(‘Clickthrough’, Event)
▸ Ad (which subscibed to 'Clickthrough' event) handles the event and calls InteractionManager.handleInteraction()
▸ InteractionManager uses the Adaptor to report to 3rd parties, handle other interactions and open the landing page.
© 2010 MediaMind Technologies Inc. | All rights reserved
HTML5 - Example Use Cases
Scenario #2: Creative Expansion▸ Creative calls EB.ExpandPanel('panel')
▸ EB sends a 'Expand' message to the CreativeContainer in the outer window
▸ Ad’s CreativeContainer converts the message to an Event and callsEventManager.dispatchEvent(‘Expand’, Event)
▸ Ad (which subscibed to 'Expand' event) handles the event and:• Calls InteractionManager.handleInteraction('panel') to report the expansion
• Calls CreativeContainer.Expand() to expand the creative using the Adaptor
© 2010 MediaMind Technologies Inc. | All rights reserved
Flash Creative flow
Fscommand / external interface
Creative Container
Event
Client
• Flash call handleMessage function in the creative container
• In the creative container there is a map between commands and events
• The creative container dispatch the right event and the listener will handle (Ad,interaction manager)
© 2010 MediaMind Technologies Inc. | All rights reserved© 2010 MediaMind Technologies Inc. | All rights reserved
Custom Development
© 2010 MediaMind Technologies Inc. | All rights reserved
Web Client Flow – Custom Development
▸ Each custom (preloaded) script will include a uniquely named hooking function (e.g. 'myAdHook') which will get the adConfig object as parameter.This function is in charge of ‘initializing’ the custom script.
▸ The script will also add the function to a list of 'custom hooks' for the ad, which will be called upon initialization of the flow (by the 'Initializer').
© 2010 MediaMind Technologies Inc. | All rights reserved
Web Client Flow – Custom Development
Here’s an example of a custom script with a custom Ad object:
© 2010 MediaMind Technologies Inc. | All rights reserved
Web Client Flow – Custom Development
Notes:▸ The function will be able to subscribe to other logical
events via the EventManager. Current available events:
© 2010 MediaMind Technologies Inc. | All rights reserved
Web Client Flow – Custom Development
▸ Inheriting existing classes by custom classes will be done by handing the event of their creation (instantiation):
The custom script will include the definition of the custom class to be used for instancing one of our objects:
Object Original Class Event to HandleEBG.ads[uniqueId] EBG.Ads.RichBannerHtml5
EBG.Ads.SEBannerHtml5EBG.Ads.StdBanner…
CREATE_AD
EBG.adaptor EBG.Adaptors.StdWebAdaptorEBG.Adaptors.WebAdaptor
CREATE_ADAPTOR
EBG.interactionManager
EBG.Interactions.StdInteractionManagerEBG.Interactions.InteractionManager
CREATE_INT_MGR
© 2010 MediaMind Technologies Inc. | All rights reserved
Web Client Flow – Custom Development
▸ To allow easy overriding of functions, we have infra functions to call super class constructor/functions:
© 2010 MediaMind Technologies Inc. | All rights reserved
Web Client Flow – Custom Development
• The inheritance and making our scripts instance the custom class will be done by subscribing to the event of before the creation.
• The event handler will declare the inheritance and override the class to be instanced in event.eventData.currentClass
• In our code, the ‘Initializer’ will make sure to instance the class set in event.eventData.currentClass (which may have been overridden)
• Example (inheriting the Ad object):
© 2010 MediaMind Technologies Inc. | All rights reserved
Web Client Flow – Custom Development
Notes:▸ Since the Ad is not instanced yet, subscribing to events with ad
object methods as handlers will be done by subscribing to an event which is triggered after the Ad creation.
▸ To prevent cross-ad mixture, the custom hooks list will be emptied after it's used. Obviously, overriding singletons will affect all ads on the page.
▸ In addition, each event usually has a ‘dispatcher’. When subscribing to an event, you can specify a filter over the dispatcher, e.g. when you want to handle the event only when it comes from a specific ad:
subscription.dispatcherFilters = { "_adConfig.adid": _adConfig.adid };
© 2010 MediaMind Technologies Inc. | All rights reserved
Web Client Flow – Custom Development
Notes:▸ Subscribing to an event is by default with timing
EBG.Events.EventTiming.ONTIME, and can also be EBG.Events.EventTiming.BEFORE
▸ Subscribing to ‘BEFORE’ the event can abort the event itself, by returning ‘true’ by the event handler.In addition, in case of a few subscribers, such an event handler can abort the handling of the following ones.
▸ For example, preventing a panel expansion can be done by subscribing to the ‘EXPAND’ event with timing ‘BEFORE’ and returning ‘true’ – note that obviously our code should support this for the specific event (in this case upon expansion).
© 2010 MediaMind Technologies Inc. | All rights reserved© 2010 MediaMind Technologies Inc. | All rights reserved
More Details
© 2010 MediaMind Technologies Inc. | All rights reserved
General Helpers
▸ Positioning – isVisible, isOverlapping, calculateVisibleArea and more.
▸ Adaptor – resoultion, getDocument, GetWindow, getPositionbyID/byElement and more.
▸ Animation for panels.
▸
© 2010 MediaMind Technologies Inc. | All rights reserved
Current Status
▸ HTML5 – Banner and SEBanner.
▸ StdBanner(EX this version).
▸ Polite banner.
▸ Expandable banner.
▸ Future: SEBanner, Pushdown & OOB.
© 2010 MediaMind Technologies Inc. | All rights reserved
Inheritance model | Ads
Ad
RichAd
HTML5Banner
HTML5SEBaneer
RichBanner
SEBanner
ExpBanner
StdBanner
StdBannerEX
© 2010 MediaMind Technologies Inc. | All rights reserved
Inheritance model | Creative container
CreativeContainer
IframeCC
SEIframeCC
FlashCC
RichFlashCC
RichFlashPanelCC
© 2010 MediaMind Technologies Inc. | All rights reserved
Thank you!