New Web Client - Training

© 2010 MediaMind Technologies Inc. | All rights reserved

Architecture & Concepts

Itay KinnrotJune 2012

New Web Client - Training


Agenda

▸ Introduction

▸ New Web Client: the Main Players

▸ Web Client Flow: the Basics

▸ Web Client Flow: HTML5

▸ Custom Development

▸ More Details

▸ SDK


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


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())



Adaptor ORMMA



▸ 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



Adaptor

Event Manager

ORMMA

Subscribing to Environment Events



▸ 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



Adaptor

Event Manager Interaction Manager

ORMMA


Interaction Reporting



▸ 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…


Creative


Adaptor


Creative Container

Ad

adConfig

State

Interaction Managers

ORMMA

Subscribing/DispatchingEvents

Interaction HandlingEnvironment Services





▸ 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



Adaptor


Ad

adConfig

State

Interaction Managers

ORMMA

Subscribing/DispatchingEvents

Interaction HandlingEnvironment Services

CreativeCreative Container





▸ 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


Web Client Flow: The Basics


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

▸ `


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)

▸ `


Web Client Flow: HTML5


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


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


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.


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


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)


Custom Development


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').



Here’s an example of a custom script with a custom Ad object:



Notes:▸ The function will be able to subscribe to other logical

events via the EventManager. Current available events:



▸ 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



▸ To allow easy overriding of functions, we have infra functions to call super class constructor/functions:



• 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):



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 };



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).


More Details


General Helpers

▸ Positioning – isVisible, isOverlapping, calculateVisibleArea and more.

▸ Adaptor – resoultion, getDocument, GetWindow, getPositionbyID/byElement and more.

▸ Animation for panels.

▸


Current Status

▸ HTML5 – Banner and SEBanner.

▸ StdBanner(EX this version).

▸ Polite banner.

▸ Expandable banner.

▸ Future: SEBanner, Pushdown & OOB.


Inheritance model | Ads

Ad

RichAd

HTML5Banner

HTML5SEBaneer

RichBanner

SEBanner

ExpBanner

StdBanner

StdBannerEX


Inheritance model | Creative container

CreativeContainer

IframeCC

SEIframeCC

FlashCC

RichFlashCC

RichFlashPanelCC


Thank you!

Documents

New Web Client - Training