Sizmek Formats. HTML5 Pushdown. Build Guide

Transcription

1 Formats HTML5 Pushdown Build Guide

2 Table of Contents Introduction...3 Overview... 3 Ad Builder Templates... 3 Workspace Templates... 4 Supported Platforms... 5 Demos/Downloads... 5 Known Issues... 5 Implementing an HTML5 Pushdown using Workspaces...6 Pushdown Assets... 6 Workspaces Available... 6 Included Template Files... 6 HTML... 6 Images... 7 Videos... 7 Customizing HTML5 Pushdown... 8 To customize the Banner... 8 To customize the default Panel... 8 Variables... 8 Functions... 8 Setting Up HTML5 Pushdown in Sizmek MDX... 9 Implementing an HTML5 Pushdown using Ad Builder Setting up new ad in Ad Builder Customizing the HTML5 Pushdown in Ad Builder Removing the video... 11

3 Changing the close button Restrictions & Important Notes Setting HTML5 Pushdown on Platform Custom Variables Reported Custom Interactions Change Log... 16

4 Introduction Overview The HTML5 Pushdown format provide advertisers with opportunity to own a unique above-the-fold execution. Pushdown is a type of expanding Ad that pushes down the content of a webpage when the creative expands, moving the site out of the way to display Ad. This way creative is not displayed above the page content and not overlaid and doesn t interfere with page content the user will access. The HTML5 Pushdown is one the premier new formats that has both Workspace and Ad Builder templates. Workspace templates give you greater flexibility to adapt the code and program additional customizations while Ad Builder templates provide ease of use. The templates available within these alternate environments may be slightly different, so make sure you use the one based on your needs. The different templates are described below, but check back frequently since new templates are expected to be added. Ad Builder Templates There are two templates of HTML5 Pushdown format that are currently available on Ad Builder 320x50 with Video, 970x50 with Video. 320x50 starts with 320x50 and expands to 320x415. Same goes with 970x50 template. The ad loads in the collapsed state. The ad can be expanded by clicking the Expand button. From the expanded state, the user may either click the UserAction button, the ClickThrough button, or close the ad and return to the collapsed state. Clicking the UserAction button sends a custom interaction and is tracked in reports. Some pushdown templates contain a video player, which is setup to track video interactions. Some publishers allow pushdown banners to expand automatically a certain number of times in a given time period. For example, some publishers allow the pushdown to auto-expand once per day per unique user, while others may only allow one auto-expansion per campaign per unique user. Auto Expansion can be configured through platform frequency capping settings. While the HMTL5 Pushdown can be customized to any size, templates with common sizes are already provided. The following illustrations show the 320x50 with Video template. It includes includes a video, close button, user action button, and a clickthrough button: Copyright 2015 Sizmek. All rights reserved. 3

5 Collapsed State Expanded State Workspace Templates There are six templates currently available as Workspaces video, non-video and full-screen templates. Fullscreen template provide a unique experience by expand Ad to full screen by pushing page content downside and covering viewport area. This full-screen templates are also responsive and resizing browser will resize Ad. Copyright 2015 Sizmek. All rights reserved. 4

6 Supported Platforms Platform Windows Mac iphone ipad Android Phone Android Tablet Supported Version Internet Explorer 10+, Firefox, Chrome, Microsoft Edge. Safari, Firefox, Chrome ios 7.0 and later ios 7.0 and later Android 4.1 and later Android 4.1 and later Note: *All templates are not supported in MRAID Apps at this time. Demos/Downloads To download a template, view a demo of the HTML5 Pushdown templates or get the latest copy of the build guide, please visit the Formats tab of the Showcase or check the advanced section from Template Gallery from Ad Builder. For more information, contact your Creative Development Specialist. Known Issues Ad Builder Templates Known Issues: o IE10, IE11 and Microsoft EDGE, Expanding animation not playing smoothly. o Video not playing after entering in full screen mode when user click full screen option from video controls. o Panel not aligning correctly on rotating device during expand animation. o Left border missing in IE10 and IE11. o Missing borders on ios o Button text highlighted/selected on double clicking any buttons. o Page content is not pushed down if Ad is set to Auto Expand. Copyright 2015 Sizmek. All rights reserved. 5

7 Implementing an HTML5 Pushdown using Workspaces Pushdown Assets Before you Begin Make sure you have the following resources available: The HTML5 Pushdown format workspace that is applicable for your campaign. Download the workspace from the Formats tab of the Showcase and extract it, preserving the directory structure. Workspaces Available Workspace Video Banner Dimension CFG_RELEASED_ HTML5Pushdown_1_0_0_320x50to320x415 CFG_RELEASED_ HTML5Pushdown_1_0_0_320x50to320x415_video CFG_RELEASED_ HTML5Pushdown_1_0_0_320x50toFullScreen CFG_RELEASED_ HTML5Pushdown_1_0_0_970x55to970x415 CFG_RELEASED_ HTML5Pushdown_1_0_0_970x55to970x415_video CFG_RELEASED_ HTML5Pushdown_1_0_0_970x55toFullScreen Default Panel Dimension No 320x50 320x415 Yes 320x50 320x415 No 320x50 Full-Screen No 970x55 970x415 Yes 970x55 970x415 No 970x55 Full-Screen Included Template Files HTML The following HTML template files are included: File Name index.html Description The banner file. Copyright 2015 Sizmek. All rights reserved. 6

8 scripts/scripts.js styles/reset.css styles/style.css panels/expand/index.html panels/expand/styles/style.css panels/expand/scripts/script.js The script for the banner. The style sheet resets the banner and panel so they can have a clean style to start with. The style sheet for the banner. The default panel file. The style sheet for the default panel. The script for the default panel. Images The following image template files are included in the images folder: File Name images/backup_320x50.jpg Images/logo_small.png panels/expand/images/ logo.png panels/expand/images/ poster.png Description Backup image. Logo image asset file. Logo image. Poster image for the video. (video template only) Videos The following video template files are included in the videos folder for the video template File Name panels/expand/videos/video.mp4 Description Demo videos in mp4 format. (video template only) Copyright 2015 Sizmek. All rights reserved. 7

9 Customizing HTML5 Pushdown To customize the Banner Based on the template selected, HTML5 Pushdown format starts with 320x50 or 970x55 banner. To customize banner dimension open index.html. Set initparam to required dimension and update creatives inside index.html to match new dimension. To customize the default Panel To customize the default Panel, first open panels/expand/index.html in an HTML-authoring environment so you can edit/alter all the html elements within <body> tag in the index.html to create your own creative content. Second, you may also want to make changes to the panels/default/styles/style.css based on your content design. Finally, open panels/default/scripts/script.js in JavaScript editing tool and add your own script for default Panel here. Below are the variable and function explanations for the template. Variables Variable Name closebutton, useractionbutton, clickthroughbutton, video, videocontainer Description Global variable(s) that will be used for define the HTML objects later. You may add/edit/remove the variable(s) if modify the HTML objects. adid, rnd, uid, ad These variables use to store values that are necessary when running the ad. Please do NOT make any change to these variables. Functions Function Name checkifadkitready initializecreative Description Check to see if the AdKit is initialized and then proceed to initialize creative. Initialize creative. You may add your own script here if Copyright 2015 Sizmek. All rights reserved. 8

10 you wish to execute a script when the creative is initialized. initializeglobalvariables initializeclosebutton addeventlisteners handleclosebuttonclick handleuseractionbuttonclick handleclickthroughbuttonclick pausevideo trackvideointeractions This is where we initialize the global variables for HTML objects. This is where we initialize close button, we based on the serving environment and custom variable to decide if we should display the close button here. This is where we add all the event listeners for the ad. Call this function to close the panel. This function also pause the video when there is a video. This function is an example for how we call and track the user action. Call this function for the default click-through. This function also pause the video when there is a video. This function pause the video. (video template only) This function initialize video tracking. Setting Up HTML5 Pushdown in Sizmek MDX 1. Archive the workspace into a new ZIP file, preserving the directory structure. You can do this with WinZip, 7Zip, or another archiving program. 2. In the Sizmek MDX, under Creative Assets, create a new Workspace by uploading the ZIP file. 3. Under the Ads section, create a new ad. 4. Set Ad Format to HTML5 Pushdown and fill out the form. 5. Please make sure to select latest HTML5 Pushdown format and not the old HTML5 Pushdown Banner. Note: On the Sizmek Platform, your user account will need access to the HTML5 Pushdown 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. 6. Under Panels List, add default panel using following settings Panel Name: default Copyright 2015 Sizmek. All rights reserved. 9

11 Creative Asset: please select panels/expand/index.html from the root of workspace. Dimension: 320x50 / 970x66 Auto Expand on Mouseover: unchecked Delay Expansion: unchecked Auto Retract When: Never 7. For the Panel Settings, please make sure both Show Single Panel at a Time and Auto Expand Default Panel when Ad is Loaded are checked. 8. Set Default Panel Frequency to unlimited or the desired settings. 9. Add the Url for the default click-through. 10. Save the ad. 11. Create a new placement for the ad. Fill out the form. Set the Placement type to In Banner and the Banner size to 320x50 or 970x66 based on template selected. After you ve saved your placement, you can then generate preview tags to test on your web site. Custom Script Notice: Since the HTML5 Pushdown 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: Copyright 2015 Sizmek. All rights reserved. 10

12 Implementing an HTML5 Pushdown using Ad Builder Setting up new ad in Ad Builder HTML5 Pushdown format is available on Ad Builder. To access the Pushdown templates on Ad Builder, please go to Template Gallery from Ad Builder Welcome Screen and then go to advanced tab. You can find the HTML5 Pushdown templates under the following names. Please make sure to select latest HTML5 Pushdown format and not the old HTML5 Pushdown Banner. Template Name Video Banner Dimension Default Panel Dimension HTML5 Pushdown 320x50 Video Yes 320x50 320x415 HTML5 Pushdown 970x66 Video Yes 970x66 970x415 To create a new ad, simply select a template and then click on Create. The new ad will start with a template you selected. You can click icon underneath the Ad Builder logo on the top left corner of the Ad Builder to view default panel or banner. Now you can edit the panel/banner by changing, removing, or adding components based on your requirements. After you done with editing, you can click on Save to save the ad to Sizmek MDX and preview your ad. Customizing the HTML5 Pushdown in Ad Builder You may remove or replace any existing component in the template with your own creative assets. However, there are some things you need to be aware of: Removing the video If you wish to remove the video component, please make sure you go to the Actions & Animations for each button and remove Pause: video-container action from Tap/Click event. Changing the close button Copyright 2015 Sizmek. All rights reserved. 11

13 With Ad Builder, you should be able to style your own close button by using component Properties, but if you are removing the default close button and adding a close button, please make sure you go to the Actions & Animations and add the following action to Tap/Click event. Expandable Collapse, and select a panel target (default or the other name if you have made change to the panel name) If your ad contains video, it is recommended to add the following action prior to the Collapse action so the video can be paused when the panel collapses. Normally we will also make the Collapse action start 200ms after the Pause action. Video Action Pause, and select a video target (video-container or the one you create) Restrictions & Important Notes The HTML5 format supports the following components. Image Button Video Text Hotspot Shape The HTML5 Pushdown format supports one panel by default. It is not suggested that you create multiple panels with the HTML5 Pushdown format. The default panel in the template loads the required JavaScript using onload event. Please do not remove it or edit the JavaScript. Setting HTML5 Pushdown on Platform Once you have saved the ad to the platform, you can now use the settings from the Platform to setup your ad. 1. Go to Ad Settings on platform 2. For the Panel Settings, please make sure Show Single Panel at a Time 3. Save the ad. 4. Create a new placement for the ad. Fill out the form. Set the Placement type to In Banner and the Banner size to base on template selected. After you ve saved your placement, you can then generate preview tags to test on your web site. Copyright 2015 Sizmek. All rights reserved. 12

14 Custom Script Notice: Since the HTML5 Pushdown format is a HTML5 Custom Format and support workspace and Ad Builder template. Custom script logic will be called when Ad is created from workspace and not for Ad created from Ad Builder. Ad Builder contains those pushdown and other feature in build and not required any custom script implementation to correctly push page content down side., So, Custom script logic will not be called but still custom script will be attached to Ad: Copyright 2015 Sizmek. All rights reserved. 13

15 Custom Variables Custom variables mentioned below are strictly for Ad created from workspace and will not have any effect when Ad is created from Ad Builder. Variable Name Type Description Default Value mdautorepositioninterval Integer Auto reposition panel after several time interval. mdeasingtype String Easing setting for panel expansion and collapse 0 >0 ease-in-out Accepted Values None Linear ease-in ease-out ease-in-out mdanimationduration Integer Time taken for panel to run expand and collapse animation mdisfullscreen Boolean If set to True, panel will expand to full screen. This variable is strictly to be used with full screen template. 1 >0 False True / False Copyright 2015 Sizmek. All rights reserved. 14

16 Reported Custom Interactions Currently, there are no custom interactions reported in the template, however, ad developers can always add their own custom interactions by using the following call. EB.userActionCounter(); Copyright 2015 Sizmek. All rights reserved. 15

17 Change Log April 26, 2016 Initial release (v 1.0.0) May 2, 2016 (v 1.0.1) Dropped Non-Video templates from Ad Builder template list. Copyright 2015 Sizmek. All rights reserved. 16

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