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 Supported Version
Sizmek
Copyright © 2014 Sizmek. All rights reserved. 3
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.
Included Files
Filename Description
Demo/images/desktop_728x90_top.jpg Demo Background Image
Demo/index_html5.html HTML5 JS Sync Block Demo HTML file including two separate ad tags
js/sizmek_jssync_html5_v2.js 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
Sizmek
Implementing the Block
Before you Begin
Make sure you have the following resources available: • HTML5 JS Sync Block template
Note:
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() {
Sizmek
Copyright © 2014 Sizmek. All rights reserved. 7
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 targetId: the syncAdId of the Ad you’re trying to target o 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.
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
Sizmek
Copyright © 2014 Sizmek. All rights reserved. 9
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.
