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.

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 Architecture & Concepts Itay Kinnrot June 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 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 ▸ 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 ▸ InteractionManager – interaction handler Singleton Handles counter interactions (BS reporting, 3 rd 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 ▸ 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 ManagerInteraction Manager Creative Container Ad adConfig State Interaction Managers ORMMA Subscribing/Dispatching Events Interaction Handling Environment 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 ManagerInteraction Manager Ad adConfig State Interaction Managers ORMMA Subscribing/Dispatching Events Interaction Handling Environment Services Creative Creative 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 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  3 rd 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 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 3 rd 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 calls EventManager.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 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 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: ObjectOriginal ClassEvent to Handle EBG.ads[uniqueId]EBG.Ads.RichBannerHtml5 EBG.Ads.SEBannerHtml5 EBG.Ads.StdBanner … CREATE_AD EBG.adaptorEBG.Adaptors.StdWebAdaptor EBG.Adaptors.WebAdaptor CREATE_ADAPTOR EBG.interactionMa nager EBG.Interactions.StdInteractionMana ger EBG.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 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.

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.

Similar presentations

Presentation on theme: "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."— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

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.

Similar presentations

Presentation on theme: "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."— Presentation transcript:

Similar presentations

About project

Feedback