New Web Client - Training
description
Transcript of New Web Client - Training
![Page 1: New Web Client - Training](https://reader035.fdocuments.us/reader035/viewer/2022062310/568165cb550346895dd8d61d/html5/thumbnails/1.jpg)
© 2010 MediaMind Technologies Inc. | All rights reserved
Architecture & Concepts
Itay KinnrotJune 2012
New Web Client - Training
![Page 2: New Web Client - Training](https://reader035.fdocuments.us/reader035/viewer/2022062310/568165cb550346895dd8d61d/html5/thumbnails/2.jpg)
© 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
![Page 3: New Web Client - Training](https://reader035.fdocuments.us/reader035/viewer/2022062310/568165cb550346895dd8d61d/html5/thumbnails/3.jpg)
© 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.
![Page 4: New Web Client - Training](https://reader035.fdocuments.us/reader035/viewer/2022062310/568165cb550346895dd8d61d/html5/thumbnails/4.jpg)
© 2010 MediaMind Technologies Inc. | All rights reserved© 2010 MediaMind Technologies Inc. | All rights reserved
New Web Client: The Main Players
![Page 5: New Web Client - Training](https://reader035.fdocuments.us/reader035/viewer/2022062310/568165cb550346895dd8d61d/html5/thumbnails/5.jpg)
© 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())
![Page 6: New Web Client - Training](https://reader035.fdocuments.us/reader035/viewer/2022062310/568165cb550346895dd8d61d/html5/thumbnails/6.jpg)
© 2010 MediaMind Technologies Inc. | All rights reserved
Web Client Flow – Main Players
Adaptor ORMMA
![Page 7: New Web Client - Training](https://reader035.fdocuments.us/reader035/viewer/2022062310/568165cb550346895dd8d61d/html5/thumbnails/7.jpg)
© 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
![Page 8: New Web Client - Training](https://reader035.fdocuments.us/reader035/viewer/2022062310/568165cb550346895dd8d61d/html5/thumbnails/8.jpg)
© 2010 MediaMind Technologies Inc. | All rights reserved
Web Client Flow – Main Players
Adaptor
Event Manager
ORMMA
Subscribing to Environment Events
![Page 9: New Web Client - Training](https://reader035.fdocuments.us/reader035/viewer/2022062310/568165cb550346895dd8d61d/html5/thumbnails/9.jpg)
© 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
![Page 10: New Web Client - Training](https://reader035.fdocuments.us/reader035/viewer/2022062310/568165cb550346895dd8d61d/html5/thumbnails/10.jpg)
© 2010 MediaMind Technologies Inc. | All rights reserved
Web Client Flow – Main Players
Adaptor
Event Manager Interaction Manager
ORMMA
Subscribing to Environment Events
Interaction Reporting
![Page 11: New Web Client - Training](https://reader035.fdocuments.us/reader035/viewer/2022062310/568165cb550346895dd8d61d/html5/thumbnails/11.jpg)
© 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…
![Page 12: New Web Client - Training](https://reader035.fdocuments.us/reader035/viewer/2022062310/568165cb550346895dd8d61d/html5/thumbnails/12.jpg)
© 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
![Page 13: New Web Client - Training](https://reader035.fdocuments.us/reader035/viewer/2022062310/568165cb550346895dd8d61d/html5/thumbnails/13.jpg)
© 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
![Page 14: New Web Client - Training](https://reader035.fdocuments.us/reader035/viewer/2022062310/568165cb550346895dd8d61d/html5/thumbnails/14.jpg)
© 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
![Page 15: New Web Client - Training](https://reader035.fdocuments.us/reader035/viewer/2022062310/568165cb550346895dd8d61d/html5/thumbnails/15.jpg)
© 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
![Page 16: New Web Client - Training](https://reader035.fdocuments.us/reader035/viewer/2022062310/568165cb550346895dd8d61d/html5/thumbnails/16.jpg)
© 2010 MediaMind Technologies Inc. | All rights reserved© 2010 MediaMind Technologies Inc. | All rights reserved
Web Client Flow: The Basics
![Page 17: New Web Client - Training](https://reader035.fdocuments.us/reader035/viewer/2022062310/568165cb550346895dd8d61d/html5/thumbnails/17.jpg)
© 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
▸ `
![Page 18: New Web Client - Training](https://reader035.fdocuments.us/reader035/viewer/2022062310/568165cb550346895dd8d61d/html5/thumbnails/18.jpg)
© 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)
▸ `
![Page 19: New Web Client - Training](https://reader035.fdocuments.us/reader035/viewer/2022062310/568165cb550346895dd8d61d/html5/thumbnails/19.jpg)
© 2010 MediaMind Technologies Inc. | All rights reserved© 2010 MediaMind Technologies Inc. | All rights reserved
Web Client Flow: HTML5
![Page 20: New Web Client - Training](https://reader035.fdocuments.us/reader035/viewer/2022062310/568165cb550346895dd8d61d/html5/thumbnails/20.jpg)
© 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
![Page 21: New Web Client - Training](https://reader035.fdocuments.us/reader035/viewer/2022062310/568165cb550346895dd8d61d/html5/thumbnails/21.jpg)
© 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
![Page 22: New Web Client - Training](https://reader035.fdocuments.us/reader035/viewer/2022062310/568165cb550346895dd8d61d/html5/thumbnails/22.jpg)
© 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.
![Page 23: New Web Client - Training](https://reader035.fdocuments.us/reader035/viewer/2022062310/568165cb550346895dd8d61d/html5/thumbnails/23.jpg)
© 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
![Page 24: New Web Client - Training](https://reader035.fdocuments.us/reader035/viewer/2022062310/568165cb550346895dd8d61d/html5/thumbnails/24.jpg)
© 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)
![Page 25: New Web Client - Training](https://reader035.fdocuments.us/reader035/viewer/2022062310/568165cb550346895dd8d61d/html5/thumbnails/25.jpg)
© 2010 MediaMind Technologies Inc. | All rights reserved© 2010 MediaMind Technologies Inc. | All rights reserved
Custom Development
![Page 26: New Web Client - Training](https://reader035.fdocuments.us/reader035/viewer/2022062310/568165cb550346895dd8d61d/html5/thumbnails/26.jpg)
© 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').
![Page 27: New Web Client - Training](https://reader035.fdocuments.us/reader035/viewer/2022062310/568165cb550346895dd8d61d/html5/thumbnails/27.jpg)
© 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:
![Page 28: New Web Client - Training](https://reader035.fdocuments.us/reader035/viewer/2022062310/568165cb550346895dd8d61d/html5/thumbnails/28.jpg)
© 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:
![Page 29: New Web Client - Training](https://reader035.fdocuments.us/reader035/viewer/2022062310/568165cb550346895dd8d61d/html5/thumbnails/29.jpg)
© 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
![Page 30: New Web Client - Training](https://reader035.fdocuments.us/reader035/viewer/2022062310/568165cb550346895dd8d61d/html5/thumbnails/30.jpg)
© 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:
![Page 31: New Web Client - Training](https://reader035.fdocuments.us/reader035/viewer/2022062310/568165cb550346895dd8d61d/html5/thumbnails/31.jpg)
© 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):
![Page 32: New Web Client - Training](https://reader035.fdocuments.us/reader035/viewer/2022062310/568165cb550346895dd8d61d/html5/thumbnails/32.jpg)
© 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 };
![Page 33: New Web Client - Training](https://reader035.fdocuments.us/reader035/viewer/2022062310/568165cb550346895dd8d61d/html5/thumbnails/33.jpg)
© 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).
![Page 34: New Web Client - Training](https://reader035.fdocuments.us/reader035/viewer/2022062310/568165cb550346895dd8d61d/html5/thumbnails/34.jpg)
© 2010 MediaMind Technologies Inc. | All rights reserved© 2010 MediaMind Technologies Inc. | All rights reserved
More Details
![Page 35: New Web Client - Training](https://reader035.fdocuments.us/reader035/viewer/2022062310/568165cb550346895dd8d61d/html5/thumbnails/35.jpg)
© 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.
▸
![Page 36: New Web Client - Training](https://reader035.fdocuments.us/reader035/viewer/2022062310/568165cb550346895dd8d61d/html5/thumbnails/36.jpg)
© 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.
![Page 37: New Web Client - Training](https://reader035.fdocuments.us/reader035/viewer/2022062310/568165cb550346895dd8d61d/html5/thumbnails/37.jpg)
© 2010 MediaMind Technologies Inc. | All rights reserved
Inheritance model | Ads
Ad
RichAd
HTML5Banner
HTML5SEBaneer
RichBanner
SEBanner
ExpBanner
StdBanner
StdBannerEX
![Page 38: New Web Client - Training](https://reader035.fdocuments.us/reader035/viewer/2022062310/568165cb550346895dd8d61d/html5/thumbnails/38.jpg)
© 2010 MediaMind Technologies Inc. | All rights reserved
Inheritance model | Creative container
CreativeContainer
IframeCC
SEIframeCC
FlashCC
RichFlashCC
RichFlashPanelCC
![Page 39: New Web Client - Training](https://reader035.fdocuments.us/reader035/viewer/2022062310/568165cb550346895dd8d61d/html5/thumbnails/39.jpg)
© 2010 MediaMind Technologies Inc. | All rights reserved
Thank you!