Features HTML5JSSyncFeature
Table of Contents Overview... 2 Supported Platforms... 2 Demos/Downloads... 3 Note... 3 For Tags Served in iframes... 3 Features... 3 Use Case... 3 Included Files... 4 Implementing the Block... 6 Configuring the HTML5 JS Sync Block... 6 Important Methods... 6 Setting Up the Block in Sizmek MDX... 9
Overview The HTML5 JS Sync Block allows you to communicate and sync between multiple unique HTML5 ads that are served on the same publisher page. Below are some sample images being used by the default template: Supported Platforms Platform Windows Mac Supported Version Internet Explorer 9+, Firefox, Chrome, Safari Firefox, Chrome, Safari Copyright 2014 Sizmek. All rights reserved. 2
Demos/Downloads To download the Block, view a demo of the Block or get the latest copy of the build guide, please visit the Formats & Blocks tab of the Creative Zone. For more information, contact your Creative Development Specialist. Note The HTML5 JS Sync Block requires the use of a custom script. The script must be added to one of the Ads. http://ds.serving-sys.com/burstingres/customscripts/sizmek_jssync_html5_v2.js For Tags Served in iframes For tags served within iframes, the script must be set as OAD (On Ad Download) and creative should be built in the Single Expandable Format. This solution does not work for ads that do not break or cannot break out of iframes. Features Define and assign values to properties that can be accessed by all units. Call Methods from other units. Different ads in the same campaign can be synced. Use Case Let's say you have two separate ad units on the same page advertising clothing for a new wardrobe. The banner shows tops and the panel shows bottoms. If the user picks a top, you want to recommend a matching bottom, and vice versa. Using the HTML5 JS Sync Block, the other unit can automatically update and highlight a new product. The Block allows this functionality by allowing units to invoke methods in other units as well as setting up event listeners to listen to when a variable in another unit has changed. Copyright 2014 Sizmek. All rights reserved. 3
Included Files Filename Demo/images/desktop_728x90_top.jpg Demo/index_html5.html js/sizmek_jssync_html5_v2.js Description Demo Background Image HTML5 JS Sync Block Demo HTML file including two separate ad tags HTML5 JS Sync Block Custom Script sync_ad_1/css/styles.css HTML5 JS Sync Block Stylesheet for Ad 1 sync_ad_1/images/back.jpg HTML5 JS Sync Block Background image for Ad 1 sync_ad_1/index.html HTML5 JS Sync Block HTML file for Ad 1 js/sync_1.js HTML5 JS Sync Block Javascript file for Ad 1 sync_ad_2/css/styles.css HTML5 JS Sync Block Stylesheet for Ad 2 sync_ad_2/images/back.jpg HTML5 JS Sync Block Background image for Ad 2 sync_ad_2/index.html HTML5 JS Sync Block HTML file for Ad 2 js/sync_2.js HTML5 JS Sync Block Javascript file for Ad 2 sync_ad_2/css/styles.css HTML5 JS Sync Block Stylesheet for Ad 2 sync_ad_2/images/back.jpg HTML5 JS Sync Block Background image for Ad 2 Copyright 2014 Sizmek. All rights reserved. 4
Copyright 2014 Sizmek. All rights reserved. 5
Implementing the Block Before you Begin Make sure you have the following resources available: Note: HTML5 JS Sync Block template This Block requires the use of a custom script. The script must be placed on one of the ads you wish to sync in order for this block to work. http://ds.serving-sys.com/burstingres/customscripts/sizmek_jssync_html5_v2.js Configuring the HTML5 JS Sync Block The HTML5 JS Sync Block demo connects two (2) unique ads, displayed a connection status and allows you to control css and text of Ad # 2 ad, from Ad # 1. The HTML5 JS Sync Block utilizes three (3) separate javascript files: Custom Script: Identifies sync ads, establishes the connection and handles all messages to and from Ads. Ad 1 Script File: Receives connection notice from custom script, sends display updates to Ad 2. Ad 2 Script File: Receives connection notice from custom script, receives display updates from Ad 1. Important Methods loadeb Listens and waits for the EB Ad Object. When event is fired, loadeb moves forward with script by calling the init method. The loadeb method is found in each Ad script. It ensures that the ad Object is available before moving forward ensuring items, such as the Ad Id, are available to the script. // Handle body onload function loadeb() { // Listen for EB object, if ready, proceed with script if (EB.isInitialized()) { init(); } else { EB.addEventListener(EBG.EventName.EB_INITIALIZED, init); }; } Copyright 2014 Sizmek. All rights reserved. 6
EB._sendMessage - Within the init method in each ad script, you must call EB._sendMessage. This method communicates with the custom script letting it know that the ad has loaded. It passes two (2) parameters. One property and one object. The object contains three (3) properties. type: dy_sync_block_loaded This let s the custom script know that it is a loaded status message data: Object Contains additional properties about the Ad. o ebadid: the Ad Id which is obtained from the EB Ad Object o totalsyncedads: the number of Ads that need to be synced o syncedadid: the Id number of the current Ad. // Send loaded message to Sync Script EB._sendMessage( si_sync_block_loaded, { ebadid: adid, totalsyncedads: 2, syncedadid: 2 }); EB._sendMessage is also used to call methods in the other sync Ads. When trying to call a remote method: type: dg_sync_block_action data: o o targetid: the syncadid of the Ad you re trying to target methodname: the name of the method you re trying to call. // Send loaded message to Sync Script EB._sendMessage('dg_sync_block_action', { targetid: 2, methodname: 'colorchange_2' }); handlemessages - Method within each Ad script that handles any incoming messages from the custom script. Contains one parameter, an object, consisting of two (2) properties, type and data. type: String. Used to identify different types of messages. For the existing demo, two (2) types exist: o si_sync_block_status called when Ad is loaded. Copyright 2014 Sizmek. All rights reserved. 7
o si_sync_block_action called when an incoming message wants to call a method. When an Action message is received, the handlemessage method uses the obj.data.methodname property to call the appropriate method. // Handle Messages from Listener function handlemessage(_obj) { // Listen for Connection Status if (_obj.type === 'dg_sync_block_status') { // Display Connection Status statustext(); // Listen for Sync Action } else if (_obj.type === 'dg_sync_block_action') { // Call Method that is passed through Sync Action Message window[_obj.data.methodname](_obj); } } statustext Called when custom script has established a connection with all ads within sync ad and displays. // Handle Connection Status Display function statustext() { // Update Connection Status Display dg_sync_block.c_div.innerhtml = 'Ad 1: Connected'; } Copyright 2014 Sizmek. All rights reserved. 8
Setting Up the Block in Sizmek MDX 1. Upload separate HTML5 Workspace Folders for each Sync Ad. 2. From the main menu, select Shortcuts > Create New Ad > Create a New Ad. 3. In the Ad Name field, enter the unique name of your ad. 4. From the Ad Format drop- down list, select HTML5 Polite Banner. a. If Tags are served within an iframe, creative must be built as a Single Expandable. 5. Choose HTML5 Workspace Folder you uploaded to platform. 6. Choose Default Image. 7. Navigate to Setup Advanced Features. Expand the Custom JS panel and add the following custom script http://ds.serving- sys.com/burstingres/customscripts/ sizmek_jssync_html5_v2.js a. If Tags are served within an iframe, the custom script must be set to OAD (On Ad Download) by navigating to Ad URLs Third Party Tracking and adding the script to Event On Ad Download (Javascript). 8. Save 9. Repeat steps 1-6 for each additional Sync Ad. Note The custom script only needs to be placed Copyright 2014 Sizmek. All rights reserved. 9