Sizmek Formats

HTML5 Responsive Videowall Expandable Build Guide

Sizmek

Table Of Contents Overview ..................................................................................................................................... 4 Demos/Downloads ..................................................................................................................... 7 Known Issues ............................................................................................................................. 7 Supported Platforms .................................................................................................................. 7 Implementing a HTML5 Responsive Videowall Expandable Format ...................................... 8 Included Template Files ............................................................................................................. 8 Banner Assets ..................................................................................................................................... 8 HTML ................................................................................................................................................. 8 Images............................................................................................................................................... 8 Scripts ............................................................................................................................................... 9 CSS.................................................................................................................................................... 9 Panel Assets ........................................................................................................................................ 9 HTML ................................................................................................................................................. 9 Images............................................................................................................................................... 9 Scripts ............................................................................................................................................. 11 CSS.................................................................................................................................................. 11 Videos ............................................................................................................................................. 11 HTML5 Swipe Gallery ..................................................................................................................... 12

Customizing the HTML5 Responsive Videowall Expandable ............................................... 12 Customizing Banner Assets ............................................................................................................. 12 index.html ....................................................................................................................................... 12 scripts/bannerScript.js................................................................................................................... 13 scripts/EBLoader.js........................................................................................................................ 14

Copyright © 2014 Sizmek. All rights reserved.

2

Sizmek

scripts/utils.js ................................................................................................................................. 14 styles/reset.css .............................................................................................................................. 14 Customizing Panel Assets ................................................................................................................ 14 panels/index.html ........................................................................................................................... 14 Panels/styles/style.css................................................................................................................... 17 Panels/script/gallery_config.js ...................................................................................................... 18 Panels/script/gallery_script.js ....................................................................................................... 19 Panels/script/script.js .................................................................................................................... 20

Setting UP HTML5 Responsive Videowall Expandable ......................................................... 21 Format in Sizmek MDX ............................................................................................................. 21 Reported Custom Interactions ................................................................................................ 22 Custom Variables Definitions .................................................................................................. 23 Change Log ............................................................................................................................... 23

Copyright © 2014 Sizmek. All rights reserved.

3

Sizmek

Overview The HTML5 Responsive Videowall Expandable is a format that expands to reveal a full screen, responsive environment for hosting image and video galleries as well as brand messaging. It is a one tag solution designed to fit within any screen or any device across desktop, tablet and mobile browsers. The format will resize itself based on available space and provide the best experience even as the browser resizes or as a user rotates their mobile device from portrait to landscape mode. There are currently two templates available as part of the HTML5 Responsive Videowall Expandable format. One template is exclusive to Viacom and uses their proprietary UI and the other template is more generic and can be used by all other sites.

300 x 250 Banner

Additional message displayed on rollover

This format displays 300 x 250 Banner on page. Rolling on banner displays addition message that encourage user to click on banner for full experience. Click on banner expands 970 x 546 Panel. When expanding, panel expands with animation and once expanded, panel contains a light box effect in background.

Copyright © 2014 Sizmek. All rights reserved.

4

Sizmek

Landscape View

Portrait View

Copyright © 2014 Sizmek. All rights reserved.

5

Sizmek

Expanded panel adapts to the screen size, if screen size is less than 970 x 546 then this format detects the viewport width and height and resize the panel depending on viewport. This format supports two views, Portrait view and Landscape view. Portrait view is displayed when viewport width is less than viewport height. Landscape view is displayed when viewport width is greater than viewport height. This format resize on resizing the browser. Creative elements shifts and align to utilize available space displayed in portrait or landscape view. Panel always resize by maintain its 16:9 aspect ratio in landscape mode and 9:16 aspect ratio in portrait mode. This format contains a close button on top right corner which allow user to close the expanded panel. A compact close button will be displayed when Ad goes to portrait mode. AD icon is always displayed indicating user that this is Ad experience and not the web content. Expanded panel contains two tabs. Clicking on Video tab displays video gallery and clicking on Photo Gallery tab displays image gallery. Right section of panel contains creative image, clickthrough button and social share icon. Video will auto play when Ad expands in desktop browsers. On mobile device a play button is displayed over the video area which allow user to play video. There are additional video thumbnails displayed below video section. Clicking on video thumbnail will play respective video in video section. Due to limitation there are no clickthrough supported for video section. Video will be resized by maintain its aspect ratio. Black space will be displayed above and below or in some cases on both side of video when Ad is video in portrait or landscape mode. Image gallery displays image in continues fashion. Next and previous arrows are displayed over the image for navigating to next and previous images. Image gallery also supports swipe navigation, swiping to right will display previous image and swiping to left display next image. Image in image gallery will be resized by maintains it aspect ratio so that image looks correct in all device and can utilize maximum available space. Image gallery supports clickthrough. Clicking on image will launch click through in separate window. Format supports frequency capping through platform settings. Since this format is build based on HTML5 Expandable Banner, Banner and Panel are separate elements. Panel frequency capping can be set from Ad setting and capping can be set based on number of time Ad need to displays based on per Session / Day / Week / Campaign. You can also disable frequency capping so that Ad never auto expand or you can also set frequency capping so that Ad always auto expands. Timer is displayed on top section on Ad auto expand. Ad will auto collapse If user doesn’t interact with Ad. Timer goes away if user interacts with Ad. Close button is displayed after 10 seconds. Close button delay can be handled through platform custom variable “mdDelayCloseButton”. This format supports COPPA and NonCOPPA settings. When Ad set to COPPA mode, Light box opacity is set to 80% and panel will contain white border. In additional to border, header elements like timer, Close button and Ad icon font will be displayed bold and white color. When Ad set to NonCOPPA mode, Light box opacity is set to 50% and panel will contain gray border. Header elements font will be set to normal lighter font.

Copyright © 2014 Sizmek. All rights reserved.

6

Sizmek

All format functionality is already programmed into the template files, so to create this ad format, all you have to do is add creative content to Panels and Banner.

Demos/Downloads To download a template, view a demo of the HTML5 Responsive Videowall Expandable templates or get the latest copy of the build guide, please visit the Sizmek Template Portal in Quickbase. In the future, it may be added to the “Ad Formats tab of the Sizmek Showcase”. For more information, contact your Creative Development Specialist.

Known Issues    

iPhone 6 Plus, Image gallery photo navigation will not work when top and bottom bars displayed at same time. Appear in iOS version less than 8.3. iPhone 6 and 6 Plus, Thumbnails not clickable when Ad viewed in landscape mode. Appear in iOS version less than 8.3. Platform preview doesn’t work in Internet Explorer. Workaround to check platform preview in IE is to generate preview link and set user agent to EDGE in developer tool IE. In IE10, Timer doesn’t stop on click of fullscreen button.

Note: There are no other Known issues when doing Platform Previews.

Supported Platforms Platform

Supported Version

iPad

iOS 6.0 and later

Android Tablets

Android 4 and later

Internet Explorer

9.0 and later

Firefox

Recent versions

Chrome

Recent versions

Safari

7.0 and later

Copyright © 2014 Sizmek. All rights reserved.

7

Sizmek

Implementing a HTML5 Responsive Videowall Expandable Format Before you Begin Make sure you have the following resources available:  

The HTML5 Responsive Videowall Expandable format workspace that is applicable for your campaign. Download the workspace from Creative Zone and extract it, preserving the directory structure.

Included Template Files Banner Assets

HTML The following HTML template files are included: File Name

Description

index.html

The banner file that is 300 x 250 displayed on page.

Images The following image template files are included: File Name

Description

images/banner.jpg

Backup image for fallback experience on not supported browsers and also same image is used as banner background.

images/banner.jpg

Banner creative asset, Contains Sizmek logo and plain white background.

images/300x250_hovr.png

Banner rollover creative asset, will be displayed when user do rollover on banner.

Copyright © 2014 Sizmek. All rights reserved.

8

Sizmek

Scripts The following script template files are included: File Name

Description

scripts/bannerScript.js

The core script for banner. Contains logic for displaying banner and triggering panel expansion.

scripts/EBLoader.js

The script file for loading additional script file based on which environment Ad is loaded. If ad loads in secure environment then this script will detect secure environment and load additional script files with secure http request.

scripts/utils.js

Utility script contains client detection logic and other few function to fix redraw issue appears in various mobile devices.

CSS The following HTML template files are included: File Name

Description

styles/reset.css

A style sheet that overrides browser default styles.

Panel Assets All the panel assets are place in panels folder.

HTML The following HTML template files are included: File Name

Description

panels/panel.html

The panel file that expands and display panel on page. Contains all the panel creative assets.

Images The following image files are included for panel creative and placed in panels folder:

Copyright © 2014 Sizmek. All rights reserved.

9

Sizmek

File Name

Description

images/click_CTA.png

Click through image button asset displayed below creative image.

images/click_to_close_AD.png

Landscape Close button background asset that is displayed at the top section of panel when Ad is displayed in landscape view.

images/close.png

Portrait Close button background asset that is displayed at the top section of panel when Ad is displayed in portrait view.

images/gallerytab.png

Creative assets for in-active state(not selected) of Photo Gallery tab.

images/timer_bgnd.png

Background image asset for Timer displayed in top section of panel when Ad auto-expands.

images/gallerytab_clicked.png

Creative assets for active state(selected) of Photo Gallery tab.

images/videotab.png

Creative assets for in-active state(not selected) of Video Gallery tab.

images/videotab_clicked.png

Creative assets for active state(selected) of Video Gallery tab.

images/see_and_be_seen.jpg

Creative asset of image creative displayed at the right section of gallery.

images/facebook.png images/twitter.png images/youtube.png images/image1.png …….. images/Image6.png images/thumb1.png images/thumb2.png images/thumb3.png

Click through assets for social share icons.

images/ thumb_shadow.png

Inactive state of video thumbnail when a video thumbnail is not selected.

images/video_play.png

Video play button asset. Displayed when user do a clickthrough when video section is displayed. On click through, video will be paused and play button will be displayed over the video, when user return this will help user to play video. On mobile device video play button is displayed

Image assets for image gallery.

Creative asset of Video thumbnails displayed in video section below video player.

Copyright © 2014 Sizmek. All rights reserved.

10

Sizmek

over video for playing video.

Scripts The following script template files are used for panel section and included in panels folder: File Name

Description

scripts/gallery_config.js

Configuration file for Image and Video Gallery Hold all the details related to asset that going to appear in Video and Image gallery.

scripts/gallery_script.js

Script file to initialize Video and Image gallery. This script file contains all the logic related to video and image gallery.

scripts/script.js

Core script file for panel section. Holds logic for expand, collapsing and resizing panel based on viewport dimensions.

scripts/classList.js

Script file for Cross-browser full element.classList implementation.

CSS The following CSS style template files are included: File Name

Description

styles/style.css

A style sheet for panel section.

Videos The following video files included as template files for video section: File Name

Description

videos/video1.jpg videos/video2.jpg videos/video3.jpg videos/video1.mp4 videos/video2.mp4 videos/video3.mp4 videos/video1.webm videos/video2.webm videos/video3.webm

Poster image file for respective video load in video section.

Videos in mp4 formats that load in video section that support mp4 extension playback. Videos in webm formats that load in video section that support webm extension playback.

Copyright © 2014 Sizmek. All rights reserved.

11

Sizmek

HTML5 Swipe Gallery This format uses HTML5 Swipe Gallery for image gallery section and all the HTML5 Swipe Gallery assets are place in image_gallery folder.

File Name

Description

image_gallery/image_gallery.css

Style sheet for image gallery. Styles all the element appearing in image gallery section.

image_gallery/image_gallery.js

Script file holds core logic of image gallery and contains swipe logic for devices.

image_gallery/MMDomUtils.js

Script file for essential DOM utility functions.

image_gallery_ui_images

Holds image assets for image gallery section.

Customizing the HTML5 Responsive Videowall Expandable All the functionalities are programmed in the script file. At minimum, the only changes you will need to make are to change Banner and Panel creative images. This format is developed based on HTML5 Expandable Banner and both the banner and panel assets are placed in separate html files. Frequency capping is handled through platform panel settings and can be customized through ad control panel. To update the layout, design and functionality of a template, open the HTML, CSS, and JS files in a text editor.

Customizing Banner Assets To update the layout, design of banner, open index.html file.

index.html If you want to add additional creative elements other than static images then you need to update index file. The index file holds: 

Banner creative assets.

Copyright © 2014 Sizmek. All rights reserved.

12

Sizmek

 

Rollover banner image. Contains a script that is used to initialize the Ad and handles panel Expansion logic.

A background image is displayed in banner and on user rollover additional image is displayed that encourage user to click on banner. On mobile device, instead of rollover image a expand button will be visible. Please update index.html if any additional creative elements that needs to be added. There is no restriction and you can resize banner based on your requirement.

scripts/bannerScript.js All the panel expansion logic and banner rollover logic is written in bannerScript.js. Script file initialize the banner and display it on page and also add rollover, rollout and click listeners. Clicking on banner fires EB.expand commands to expand panel. Script file also provide two event listeners that fires when panel is expanded and collapsed. You can update the stat of banner based on if panel is expanded or not. In script file check for onMessageReceived function. function onMessageReceived(event) { var messageData = JSON.parse(event.data); if (messageData.adId && messageData.adId === getAdID()) { if (messageData.type && messageData.type === "panelExpanded") { //panel expanded; }else if (messageData.type && messageData.type === "panelCollapsed") { //panel collapsed; } } }

The script file expands only default panel and panel name can be read by accessing mdDefaultPanel custom variable. You don’t have to mention any panel name when expanding the panel and this is handled in the script. Panel is expanded by calling following function: EB.expand({ panelName: mdDefaultPanel, actionType: EBG.ActionType.USER });

Note: mdDefaultPanel is created by custom script file and will contain default panel name. There are also additional functions that track custom format versioning. Those function are essential and please don’t remove those functions from bannerScript.js file.

Copyright © 2014 Sizmek. All rights reserved.

13

Sizmek

scripts/EBLoader.js Script file contains logic to load additional platform script files based on secure or insecure environment. Following function is called to load actual EBLoader: loadServingSysScript(‘EBLoader.js’);

scripts/utils.js Utility js file for contains all the utility functions that may be helpful when developing a creative. For example you can use following code snippet to check if Ad is loaded in iPad If(Utils.isMobile.iPad()){ //iPad detected }

styles/reset.css CSS resets to make sure your ad looks as consistent as possible in different browsers.

Customizing Panel Assets To update the layout, design of panel, open index.html file located in panels folder.

panels/index.html If you want to add or remove creative elements then you need to update index file. This file holds:      

Panel creative assets. Panel Lighbox appearing in background. Timer and close button appearing on top section of panel. Creative image, clickthrough button and social share icons. Gallery tabs and empty gallery divs in which video or image gallery gets loaded. Loads all the essential script files for intialsizing video and image gallery and also contains a core script file that is used to initialize the panel, handles panel Expansion logic, handles panel resize logic, handles clickthrough event and initialize video and image gallery.

Copyright © 2014 Sizmek. All rights reserved.

14

Sizmek

Header section of index.html loads essential CSS styles, EBloader scripts file, additional script files required by HTML5 Swipe Gallery, Image gallery configuration script file, Gallery script file and at the end it loads the core panel script file. Panel contains few essential elements. 1) Light box: Light box appear in background of panel creative element and stretched to full viewport width and height. Lightbox will be visible before panel expansion animation start till panel collapse animation is complete. 2) Timer: Timer will be visible on panel auto expansion. Timer is placed before close button in header section of panel and timer will start as soon as panel expand animation is complete and panel is visible.

Timer is default set to 30 seconds and panel will auto collapse once timer reach to 00:00. Timer will be cancelled if user interacts with the Ad before timer is up. With related to timer, Close button will not be visible when Ad expands and appear after 10 seconds delay. This functionality will disallow user from leaving or closing the Ad. Close button delay can be changed by updating mdDelayCloseButton custom variable. 3) Close Button: This format is responsive and adapts to screen size. On Mobile device there is not enough space to show every element and for same reason when format goes to Portrait view, A compact close button is displayed to utilize maximum available space.

Copyright © 2014 Sizmek. All rights reserved.

15

Sizmek

Default button displayed in Landscape view

4) Ad Icon: Ad icon is displayed on the side of Close button. This will indicate user that it’s a Ad experience but not actual web content. 5) COPPA and NonCOPPA: This format supports both COPPA and NonCOPPA. Ad can be set to COPPA by updating custom variable mdCoppa to true. When Ad is set to COPPA, Lightbox background opacity is set to 80% and white border will appear around timer, close button and panel creative are. Also, Font style of timer and close button set to bolder font style. When Ad is set to NonCOPPA, Lightbox background opacity is set to 50% and gray will appear around timer, close button and panel creative are. Also, Font style of timer and close button set to normal non bolder font style. 6) Gallery section: Gallery section contains Video and Image gallery. There are two tabs at the top of gallery. Clicking on Video will take user to Video gallery. Clicking on PHOT Gallery will take user to Image gallery. By default video gallery is displayed. Gallery section utilizes 40% of the available width in landscape mode and 100% width in portrait mode. a. Video Gallery: Video gallery is default visible on panel expansion. Video thumbnails will be visible under video section and allow user to view different videos. Video will auto play in desktop browser and on mobile device overlay play button will appear to play video. Video player is stretch to 100% width and height of video gallery. Resizing browser will resize video gallery and video will resize by maintain its aspect ratio. Due to browser limitation video section doesn’t contain any click through on video. Video gallery doesn’t support any swipe functionality and it contains a video player to play all the videos. b. Image Gallery: HTML5 Swipe Gallery block has been implemented in image gallery section. Image gallery contains next and previous button on top of image. This gallery support touch and swipe. Clicking on next or previous button will take user to next or previous image. Image gallery is continues and reaching to end image will take user to first image. Images in image gallery are resized by maintain their aspect ratio. Clicking on image will launch click through. 7) Additional creative elements: There are additional creative elements displayed on panel section. a. Creative Image: Displayed in right section of panel when Ad is viewed in landscape mode and occupy 35% of available panel width. Creative image shift to the top of the Ad when

Copyright © 2014 Sizmek. All rights reserved.

16

Sizmek

Ad shift from landscape to portrait view. In portrait view this image occupy 40% of the available height. b. Click through button: Displayed below the creative image and clicking on the button launch click through in separate window. In portrait mode this button shift and appear below creative image and above image gallery. Both creative image and click through button occupy 50% of panel height when viewed in portrait mode. c. Social share Icons: Social share icons are displayed in bottom right section of panel. Contains Facebook, Twitter and YouTube icons. Clicking on any of the icons will take user to the respective social share platform. Social share icon shift to the bottom section when Ad is viewed in portrait mode. Updating index.html Body section contains a container div and inside container panel div is placed. Panel div contains a lightbox div that will be expanded to full viewport and contains semi transparent black background. On top of lightbox, panel-container will appear that contains all essential panel creative elements. Panelcontainer div width and height is set through CSS style sheet and you can update this based on your requirement. Timer and close button are placed inside timer-and-close div and all the social share icons and image gallery are placed inside panel-creative. gallery div holds video and image gallery tabs and gallerycontainer for loading video and image gallery. All the social share icons are placed inside social-share div. Panel dimensions are 970 x 546. All the elements inside panel-container are placed by percentage. panel-container is set to calculated width and height. When browser resize, script checks the viewport width and height. If viewport width is less than height then a portrait view is displayed. If viewport width is greater than height then landscape view is displayed. Script resize panel-container container to achieve this. To maintain the aspect ratio of panel, script saves original width and height of panel-container of container and accordingly display portrait and landscape view. panel-container height take account of panel-creative div height with additional to timer-and-close div height. panel-container height is set to 585px, Panel height 546px + timer and close div height. When browser resize, all the elements shift from portrait to landscape and vise versa. Same elements are used for both the views by updating elements styles. Please check script section for details related to updating elements based on view. If additional creative elements need to be added, please add those elements inside panel-creative div.

Panels/styles/style.css style.css styles every element appearing in panel and also holds style for element when it shift between portrait or landscape view. When Ad goes from landscape to portrait view, Script detect and update require elements class with the new view class. For Example : When Ad is in landscape mode, Script file will add ‘logo-container-landscape’ class to logo-container element. On shifting to portrait, Script file will

Copyright © 2014 Sizmek. All rights reserved.

17

Sizmek

replace ‘logo-container-landscape’ class with ‘logo-container-portrait’ class. Two different classed are used for each view to place element correctly. Panel expansion and collapse animation is handled through CSS keyframe animation and this style sheet contains all the class required for achieving expand and collapse animation. All the keyframe animations are placed at the end section of style sheet.

Panels/script/gallery_config.js Gallery_config.js holds all the configuration variable to Video and Image Gallery. Gallery Tab Configuration: galleryTabs holds reference to gallery tab and its gallery container div. This variable helps to link tab to its gallery container and whenever user clicks a tab its respective gallery is displayed by referring containerToShow variable from tab object. If you want to add additional tab then please make sure to include tab divs inside gallery-tabs in index.html. Note: This variable just holds the reference to tab and gallery div and doesn’t create it. Image Gallery Configuration: This format uses HTML5 Swipe Gallery block for image gallery section, the image gallery configuration variable is similar and if you have implemented HTML5 Swipe Gallery block then understanding this variable will not be difficult. imageGalleryConfig holds following variable:    



container: Reference to container div in which image gallery will be created. width: Width of image gallery, in this formats width is ignored and container height is used. height: Height of image gallery, in this formats height is ignored and container height is used. images: A array that holds all the image details. Each object in this array holds image url, width, height and other details that require to load image in image gallery.  souce: Image source url.  width: Actual Image width, Please mention actual image width because original image width will be used by gallery to scale image by maintaining aspect ratio.  height: Actual Image height, Please mention actual image height because original image height will be used by gallery to scale image by maintaining aspect ratio.  caption: Image caption to display for image, Keep it blanks if not required.  widgets: Widget to display over the image. Current added width is added to cover entire image and clicking on this widget will trigger click clickthrough. actionRegister: dummy function holds all the user and click through interaction that will be dynamically firing by image gallery. This function is never called and will help to register all those tracking.

Copyright © 2014 Sizmek. All rights reserved.

18

Sizmek



options: Additional configuration option for image gallery  wraparound:Set it tor true to make image gallery continues.  showImageIndicator: Show or hide image indicator.  showImageCaption: Show or Hide image caption.  eventNamePrefix: Trigger all tracking by prefixing name mentioned in this event.

Video Gallery Configuration: Video gallery will be generated based on details set in videoGalleryConfig variable. This variable holds video source url, poster image and other details. videoGalleryConfig holds following variable:   



container: Container reference in which video gallery will be generated. videoThumbContainer: Video thumbnail container reference in which video thumbnails will be generated. videos: Array that holds all the video details. Each object in this array hold video source url, poster image url, width, height and other details. Video object details explained below  poster: Reference to poster image url for video.  width: Actual video width.  height: Actual video height.  videoSource: Array holds video source with different extension.  thumbNormal: Image source url of video thumbnail that will be appearing below video. actionRegister: Dummy function holds all the user and click through interaction that will be dynamically firing by video gallery. This function is never called and will help to register all those tracking.

Panels/script/gallery_script.js This script file is responsible for initializing Video and Image gallery. Script files initialize image gallery and resize Image gallery on page resize. Also, initialize video gallery, generate video thumbnails and add video event to handle video section. Function Name

Description

initImageGallery

Function to initialize image gallery

initSwipeNavigator

The function to initialize swipe navigation.

resizeImageGallery

The function to resize image gallery.

initVideoGallery

Function to initialize video gallery

initVideoThumbs

Function to generate and initialize video thumbnails.

onThumbSelected

Function triggers when thumbnail is selected.

Copyright © 2014 Sizmek. All rights reserved.

19

Sizmek

setThumbSelected

Function to update thumbnail status.

resetThumbState

Function to reset thumbnails to their normal state.

generateVideoTag

Function to generate video tag. Require video ID to pass when calling this function.

trackVideoInteractions

Initialize video tracking module.

getVideoDiv

Generate video tag and return tag as a string.

togglePlayAndPoster

Toggle video overlay play button and poster image.

initVideoListener

Function to add video play and ended event.

onVideoPlay

Fires on video play.

onVideoEnd

Fires on video end.

removeVideoListener

Remove video listeners.

onPlayClick

Triggers on video play button click.

autoPlayVideo

Function is called for video auto play. This function is called from script.js when panel expand animation is complete.

playVideo

Function to play video.

showVideo

Function show video. On iOS overlay play button wil not work when video and play button visible at same time. This function will hide video when not playing making overlay play button clickable.

hideVideo

Function to hide video.

muteVideo

Function to mute video.

unMuteVideo

Function to unmute video.

pauseVideos

Function to Pause video

onVideoGalleryDisplay

Function is called from script.js to update other gallery state when video gallery is displayed.

onImageGalleryDisplay

Function is called from script.js to update other gallery state when image gallery is displayed.

Panels/script/script.js This file is core script for panel section. It is responsible for initializing panel and display panel when all the assets loaded. This script file trigger panel expansion animation by updating class of panel-creative

Copyright © 2014 Sizmek. All rights reserved.

20

Sizmek

and same when panel collapse. Script file check if panel is auto or user expanded. Timer will be activate and displayed if ad is auto expanded. Auto expansion is detected by check custom variable mdShouldAutoExpand. If true, Ad is auto expanded. Additional to timer, this script also check when the close button needs to be displayed and delay the close button based on delay time set in mdDelayCloseButton custom variable. COPPA or NonCOPPA setting are detected by reading custom variable mdCoppa. If set to true, Script file update lightbox, close container, timer container and panel creative with the COPPA class. For Example, Lightbox element will be updated with lightbox-coppa class. Panel container will be updated with panel-container-COPPA. Same happened with all elements that needs to be updated if Ad is set to COPPA or NonCOPPA. This script file holds logic to resize panel to fit every screen and detect when to show portrait or landscape view. On page resize setOrientation is called that detect portrait or landscape view and based on the detection resizeContainer updated all the elements. All the panel elements that need to be updated base on portrait or landscape view should be added to elemToResizeOnOrientation variable. On page resize script will go through all elements and update their class by attaching portrait or landscape and the end. Class name will be generated with element ID + view. For example, Logo container display in right section of panel when in landscape view and shift to the top in portrait view. This is achieved by updating logo container element with class logo-container-landscape when ad is in landscape view and logo-container-portrait when Ad is in portrait view. You will find all those classes in style.css.

Setting UP HTML5 Responsive Videowall Expandable Format in Sizmek MDX To set up a HTML5 Responsive Videowall Expandable Format in Sizmek MDX: 1. Archive the HTML5 Responsive Videowall Expandable workspaces into ZIP files, preserving the directory structure. You can do this with WinZip, 7Zip, or another archiving program. 2. In the Sizmek MDX, under Creative Assets, create new Workspace by uploading the ZIP file.

3. Under the Ads section, create ad use the workspace you have uploaded. 4. Set Ad Format to HTML5 Responsive Videowall Expandable and fill out the form.

Note: On the Sizmek Platform, your user account will need access to the HTML5 Responsive Videowall Expandable format in the list of available custom formats. If you do not have access to this format, please reach out to Support to gain permissions for this format

Copyright © 2014 Sizmek. All rights reserved.

21

Sizmek

5. Add a panel to the Panels List. Choose the index.html file in the ‘panels/’ folder as the Creative Asset. Set the Dimensions to “0 X 0”, or whatever dimensions are required by your publisher. Set “Auto Retract When” to “Never” and “Position Type” to “Page relative-Pixels”. 6. Make sure “Auto Expand Panel when Ad is Loaded” is updated with the campaign requirement. 7. Save the ad. 8. Under the Advanced Features section, customize the Variables to your needs. 9. Create a new placement for the ad. 10. Fill out the form. Set the Placement type to In Banner and the Banner size to 300x250.

After you’ve saved your placement, you can then generate preview tags to test on your web site.

Custom Script Notice: Since the Time HTML5 Responsive Videowall format is a HTML5 Custom Format, there is no need to attach a custom script since the appropriate one will be pulled in automatically. For reference, the following custom script is being used: http://ds.serving-sys.com/burstingres/CustomScripts/PL_HTML5ResponsiveVideowallExp.js

Reported Custom Interactions The following custom interactions are reported by the ad and can be reviewed in MediaMind reporting (besides standard ad interactions): Interaction Name

Description

Image_Gallery_Navigated_To_0 ….. Image_Gallery_Navigated_To_5

Sent when Image gallery is swiped or navigated to next or previous image. Image ID is suffixed at the end of interaction name.

Image_Gallery_ClickThrough_0 ……. Image_Gallery_ClickThrough_5 Video_Gallery_Navigated_To_0 ….. Video_Gallery_Navigated_To_2 Photo_Tab_Clicked

Click through is launched and tracked on click of Image gallery. Image ID is suffixed at the end of interaction name.

Video_Tab_Clicked

Sent when user click on video tab to view video gallery.

Facebook_ClickThrough

Click through is launched and track when user click on

Sent when video is displayed or user click on video thumbnail to play video. Sent when user click on Photo Gallery tab to view image gallery

Copyright © 2014 Sizmek. All rights reserved.

22

Sizmek

Facebook social share icon. Twitter_ClickThrough

Click through is launched and track when user click on Twitter social share icon.

Youtube_ClickThrough

Click through is launched and track when user click on Youtube social share icon.

Custom Variables Definitions Accepted Values

Name:Type

Default Value

Description

mdDelayCloseButton:Integer

10

Display close button after some delay.

Number >=0

mdCoppa:Boolean

false

Set Ad to COPPA or NonCOPPA

True/False

Change Log April 29, 2015 Initial Release

Copyright © 2014 Sizmek. All rights reserved.

23

Notice The information contained in this document is proprietary and confidential to Sizmek and/or any of its affiliated companies. Disclosure, copying, reproduction, storing or any use of this document or any part thereof without the express prior, written consent of Sizmek or its authorized representatives is strictly prohibited. The information furnished in this document is believed to be accurate and reliable. However no responsibility is assumed by Sizmek for the use of this information. Sizmek reserves the right to make changes to the information included in this document at any time and without notice. Copyright © 2014 Sizmek. All rights reserved.

Flash is either a registered trademark or trademark of Adobe Systems Incorporated in the United States and/or other countries. Trademark Note: Sizmek, the Sizmek logo, Sizmek Rich Media, Sizmek Mobile, Sizmek Video, Sizmek Channel Connect, Sizmek Workshop, etc. are trademarks and/or registered trademarks of Sizmek. All other trademarks are the property of their respective owners.