New Web Client - Training

1. New Web Client - Training Itay KinnrotJune 2012 Architecture & Concepts

2. Agenda • Introduction • New Web Client: the Main Players • Web Client Flow: the Basics • Web Client Flow: HTML5 • Custom Development • More Details • SDK

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

4. New Web Client: The Main Players

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

6. Web Client Flow – Main Players Adaptor ORMMA

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

8. Web Client Flow – Main Players Event Manager Subscribing to Environment Events Adaptor ORMMA

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

10. Web Client Flow – Main Players Event Manager InteractionManager Interaction Reporting Subscribing to Environment Events Adaptor ORMMA

11. 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 Adaptorfor 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…

12. Web Client Flow – Main Players Ad adConfig Creative Container Creative State Interaction Managers Subscribing/Dispatching Events Interaction Handling Environment Services Event Manager Interaction Manager Interaction Reporting Subscribing to Environment Events Adaptor ORMMA

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

14. Web Client Flow – Main Players Ad adConfig Creative Container Creative State Interaction Managers Subscribing/Dispatching Events Interaction Handling Environment Services Event Manager Interaction Manager Interaction Reporting Subscribing to Environment Events Adaptor ORMMA

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

16. Web Client Flow: The Basics

17. 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 • `

18. 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 • aCreativeContainer is created for showing & communicating with the ad's creative(s) • `

19. Web Client Flow: HTML5

20. 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. • ` Publisher page – www.publisher.com/home.html Ad Iframe – ds.serving-sys.com/creative.html Creative Container

21. 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 windowmessagingmechanism • ` Publisher page – www.publisher.com/home.html Ad Iframe – ds.serving-sys.com/creative.html Creative Container EB

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

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

24. Flash Creative flow • 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) Fscommand / external interface Event Creative Container Client

25. Custom Development

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

27. Web Client Flow – Custom Development • Here’s an example of a custom script with a custom Ad object:

28. Web Client Flow – Custom Development Notes: • The function will be able to subscribe to other logical events via the EventManager. Current available events:

29. 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:

30. Web Client Flow – Custom Development • To allow easy overriding of functions, we have infra functions to call super class constructor/functions:

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

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

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

34. More Details

35. General Helpers • Positioning – isVisible, isOverlapping, calculateVisibleArea and more. • Adaptor – resoultion, getDocument, GetWindow, getPositionbyID/byElementand more. • Animation for panels.

36. Current Status • HTML5 – Banner and SEBanner. • StdBanner(EX this version). • Polite banner. • Expandable banner. • Future: SEBanner, Pushdown & OOB.

37. Inheritance model | Ads

38. Inheritance model | Creative container

39. Thank you!