HOW TO Build an HTML5 Pushdown Banner

Transcription

1 (/hc/en-us) Help Center Platform MDX 2.0 Contact Support (/hc/en-us/requests/new) SIZMEKSUPPORT Sizmek Help Center (/hc/en-us)» Ad Formats and Placement Types (/hc/en-us/categories/ creative-building-ads-ad-formats-and-placement-types)» HTML5 Creative Features and Formats (/hc/en-us/sections/ html5-creative-features-and-formats) HOW TO Build an HTML5 Pushdown Banner Enter a question, keyword or top Last + FOLLOW (/HC/EN-US/ARTICLES/ HOWTO-GLOSSARY-BUILD-AN-HTML5-PUSHDOWN-BANNER/SUBSCRIPTION) Update: May 26, :12 Table of Contents Introduction Introduction Overview HTML5 Pushdown Banne Overview Important: This is the build guide for the Pushdown that is based on the HTML5 Single Expandable and has only a single banner (no panels). For your ads, you must use the HTML5 Pushdown Banner format on the platform and NOT the HTML5 Pushdown. The HTML5 Pushdown Banner is an expandable banner that pushes site content down as the ad expands. The banner state and expanded state share the same asset and there are no additional panels. It is based on the HTML5 Single Expandable Base format. The ad loads in the collapsed state and can be expanded by clicking the Expand button. Since publisher content is pushed down, the user will still be able to view the entire site after expansion. 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 set up to track video interactions. Dimensions HTML5 Full Screen Pushd Dimensions Supported Platforms Format Properties Demos/Download Implementing HTML5 Pushdown Banner using Workspaces Some publishers allow pushdown banners to expand automatically for 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. Many publishers also require the pushdown to collapse automatically 7 10 seconds after it auto-expands. The pushdown template includes a script that you can customize to enable this functionality. You can choose how often the banner should auto-expand, and how long it should stay open before it auto-collapses. You can also choose to cancel the auto-collapse if the user engages with the expanded panel. This capability is explained in further detail in the section on Auto Expand Frequency Capping. While the HTML5 Pushdown Banner can be customized to any size, templates with common sizes have been provided. Templates that expand to full screen use the entire space available in the browser while centering expanded content. See below for complete list of templates available: HTML5 Pushdown Banner Dimensions BANNER SIZE EXPANDED SIZE VIDEO 970x66 970x418 No 970x66 970x418 Yes HTML5 Full Screen Pushdown Dimensions BANNER SIZE VIDEO 320x50 No 320x50 Yes The following illustrations show the collapsed and expanded states of the 970x66 to 970x418 pushdown with video.

2 The following illustrations show the collapsed and expanded states of the 320x50 to full-screen pushdown with video. Supported Platforms PLATFORM SUPPORTED VERSION Windows Internet Explorer 10+, Firefox, Chrome, Safari, Edge Mac Safari, Firefox, Chrome Tablets and Phones ipad and iphone with ios 8 and up Android Tablet and Phone with Android 4.1 and up Surface Tablet and Phone 8.0 and up Format Properties Listed below are common properties available to the format. FEATURE Polite Loading SUPPORTED Safeframe Support MRAID (in APP Support)

3 1 AdKit-ready Programmatic (One-Tag Solution) Secure Serving Sizmek Advertising Suite Support Ad Builder Templates Available Demos/Download To download a template, view a demo of the HTML5 Pushdown Banner templates or get the latest copy of the build guide, please visit the Ad Formats tab of the Sizmek Showcase (http: /showcase.sizmek.com/formats/). For more information, contact your Creative Services Engineer. Implementing HTML5 Pushdown Banner using Workspaces Before you Begin Make sure you have the HTML5 Pushdown Banner 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. Included Template Files All the assets file are same between both the templates, the only difference is the banner dimensions. HTML The following HTML5 template files are included. FILE NAME index.html The ad file, with the ad configuration and initialization code. CSS The following CSS template files are included. FILE NAME styles/style.css The style sheet for the ad and its elements. Scripts The following JavaScript template files are included. FILE NAME pushdown_banner.js Minified code required for the format. Images The following image template files included in the images folder. FILE NAME images/backup.jpg Backup image for ad. images/logo.png Logo image asset file. images/poster.png Poster image for the video. (video template only). Videos The following video template files are included in the videos folder.

4 FILE NAME videos/video.mp4 Demo videos in mp4 format. (video template only) videos/video.webm The webm video for Firefox Customizing the HTML5 Pushdown Banner All of the HTML5 Pushdown Banner functionality is programmed in the template files. At minimum, the only changes you will need to make are to the loaded image and video assets and their respective styles. When updating or replacing images or videos, make sure to also update references to their filenames and dimensions found in index.html and style.css as necessary. To update the layout and design of a template, open the index.html and style.css files in a text editor.the index.html also contains JavaScript that can be modified to change or extend functionality. Variables VARIABLE NAME addiv, bannerdiv, expansiondiv 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. Functions FUNCTION NAME initeb Ensures EB is initialized before starting the ad. startad Starts the ad. expand Expands the ad. collapse Collapses the ad. handleexpandbuttonclick Handles the expand button click. handleclosebuttonclick Handles the close button click. handleclickthroughbuttonclick Handles the click-through button click. handleuseractionbuttonclick Handles the user-action button click. The functions expand and collapse should not be renamed or replaced as they are sometimes called from the publisher. The full-screen templates also include the following functions: FUNCTION NAME gotofullscreensize Expand the ad to full-screen width and height. gotocollapsedsize Collapse the ad to its original size. restrictscrolling Prevent the user from scrolling away from the ad. unrestrictscrolling Allow the user to scroll freely. scrolltocontainertopleft Scroll to the top left corner of the ad. setmessageterminal Handles communication with the full-screen custom script.

5 If you would like to change the duration of the expansion and collapse animation, change the collapseduration and expandduration variables. This time is measured in milliseconds, so a 1 second animation use a value of If you would not like the expansion to animate, set the variables to 0. Auto Expand Frequency Capping Many publishers and networks allow pushdowns to expand automatically once in a given time period. For example, you may be allowed to auto-expand once per day, or once per campaign. If you want this functionality, include the following script in the head of your HTML: script type="text/javascript" src=" ds.servingsys.com/burstingres/customscripts/html5_auto_expand_frequency_capping_adkit.js"></script> You can then set your auto-collapse settings using JavaScript. The settings below set the ad to auto-expand once per campaign, then auto-collapse after 7000 milliseconds, or 7 seconds. var autoexpandsettings = { isenabled: true, frequency: EB.autoExpandFrequencyCapping.Frequencies.CAMPAIGN, expansionsperperiod: 1, timeuntilautocollapse: 7000 }; EB.autoExpandFrequencyCapping.initialize(autoExpandSettings); You will see that there are four properties you can set for auto-expansion. PROPERTY TYPE isenabled Boolean Determines whether auto-expansion is enabled. frequency String Determines the time period for auto-expansion (per day, per campaign, etc.). expansionsperperiod Number (integer >= 0) Determines how many times the ad auto-expands in a given time period (once per period, twice per period, etc.). timeuntilautocollapse Number (integer >= 0) The amount of time, in milliseconds, the ad can stay open before it autocollapses. Many publishers require the ad to auto-collapse after 7-10 seconds. Note: You can omit this property to prevent the ad from autocollapsing. You can then pass these settings in an object into the EB.autoExpandFrequencyCapping.initialize function. At that time, the EB.autoExpandFrequencyCapping object will determine if the ad should auto-expand. If the ad does auto-expand, the expansion will not be tracked as a user expansion. It is important to determine a period, or frequency, for auto-expansion. Some publishers allow you to auto-expand on a daily basis, while others allow you to auto-expand on a campaign basis. There are multiple constants you can use to set the frequency property. The constants are contained in the EB.autoExpandFrequencyCapping.Frequencies object. For example, the constant for day is EB.autoExpandFrequencyCapping.Frequencies.DAY and the constant for campaign is EB.autoExpandFrequencyCapping.Frequencies.CAMPAIGN. The table below displays all of the options for frequencies that are available. CONSTANT LITERAL NEVER "never" Never auto-expand. SESSION "session" Auto-expand per session (per browser window or tab). DAY "day" Auto-expand per day. WEEK "week" Auto-expand per week.

6 CAMPAIGN "campaign" Auto-expand per campaign. UNLIMITED "unlimited" Auto-expand every time. You can set up callback functions to trigger when the ad auto-expands or auto-collapses. For example, you will probably want to call a function to switch to the expanded panel graphics before the ad auto-expands, and switch to collapsed banner graphics after the ad auto-collapses. Note: You must set up these event listeners before you initialize the EB.autoExpandFrequencyCapping object. Once the object is initialized it will determine whether the ad should auto-expand immediately. The code below creates a subscription to the auto-expand event. var beforeexpandsubscription = new EB.autoExpandFrequencyCapping.EventSubscription({ eventname: EB.autoExpandFrequencyCapping.Events.AUTO_EXPAND, callback: switchtoexpandedgraphics, callbackbinding: this, timing: EB.autoExpandFrequencyCapping.EventTiming.BEFORE} ); EB.autoExpandFrequencyCapping.subscribeToEvent(beforeExpandSubscription); First it creates a new EB.autoExpandFrequencyCapping.EventSubscription object. It passes an object containing a number of different properties into the constructor function. var beforeexpandsubscription = new EB.autoExpandFrequencyCapping.EventSubscription({ eventname: EB.autoExpandFrequencyCapping.Events.AUTO_EXPAND, callback: switchtoexpandedgraphics, callbackbinding: this, timing: EB.autoExpandFrequencyCapping.EventTiming.BEFORE} ); The first property is the eventname, which sets the subscription to occur when the ad auto-expands. eventname: EB.autoExpandFrequencyCapping.Events.AUTO_EXPAND The event names are constants in the EB.autoExpandFrequencyCapping.Events object, defined in the table below. CONSTANT LITERAL AUTO_EXPAND "autoexpand" The auto-expansion event. AUTO_COLLAPSE "autocollapse" The auto-collapse event. The second property is the callback function, which will be called when the event is fired. This can be any function you define. For example, you may want to pass in a function you created to switch to the expanded panel graphics. callback: switchtoexpandedgraphics, The callback function you define should not call EB.expand or EB.collapse. Those functions are automatically called by the EB.autoExpandFrequencyCapping object. Therefore, including these calls in your callbacks is redundant and will result in inaccurate reporting. The third property is the callbackbinding, which basically defines the scope that contains your callback function. In most cases, you will just want to use this as the callbackbinding. this represents your current scope. callbackbinding: this, The last property is the timing property, which determines whether your callback function will be called before or after the event. For example, you may want to switch to your expanded graphics before the panel expands, or switch to your collapsed graphics after the panel collapses. timing: EB.autoExpandFrequencyCapping.EventTiming.BEFORE} The table below shows the timing constants, which are in the EB.autoExpandFrequencyCapping.EventTiming object. CONSTANT LITERAL

7 BEFORE "before" Call the callback function before the event occurs. AFTER "after" Call the callback function after the event occurs. Finally, you need to subscribe to the event by passing the object containing all of your settings into the EB.autoExpandFrequencyCapping.subscribeToEvent function EB.autoExpandFrequencyCapping.subscribeToEvent(beforeExpandSubscription); The table below succinctly defines the properties you should pass into the EventSubcription object. PROPERTY TYPE eventname String The event you would like to subscribe to (expand or collapse). callback Function The function you would like to call when the event occurs callbackbinding Object The scope of the callback function (usually just this ). timing String Determines whether the callback function will be called just before the event or just after the event. On some occasions, you may want to prevent the ad from auto-collapsing. For example, if a user engages with content in the expanded panel, you may want to prevent the ad from auto-collapsing. You may also want to prevent the ad from auto-collapsing if the user clicks collapse and then expands again before the auto-collapse time limit has been reached. You can use the following function to cancel auto-collapse: EB.autoExpandFrequencyCapping.cancelAutoCollapse() Make sure that your publisher(s) allow(s) you to cancel auto-collapse before using this method in your ad. Please remember the following points: You must set up auto-expand and auto-collapse event listeners before you initialize your frequency capping settings. The frequency capping settings apply to each browser individually. For example, if the ad is set to auto-expand once per day, it will auto-expand once per day in each browser. If you frequency cap by session, frequency capping is not even shared between separate windows and tabs. Do not call EB.expand or EB.collapse in the callback functions for the AUTO_EXPAND or AUTO_COLLAPSE events. These functions are already called in the script. You can omit the timeuntilautocollapse variable from your frequency capping settings if you would like the ad to remain open after it auto-expands. EB Command Module Some ad networks require the ability to externally expand and collapse Sizmek ads. The EB Command Module facilitates this requirement by sending events that call the expand() and collapse() functions in the creative container to update its content appropriately. <script type="text/javascript">ebmodulestoload = ['EBCMD'];</script> This module already exists in the HTML5 Pushdown Banner template. To use other modules, such as video, add them to the EBModulesToLoad array. If you do not need this functionality, you can remove the EB Command Module by deleting EBCMD from the EBModulesToLoad array. Setting Expanded Panel Dimension EB.initExpansionParams(x, y, width, height); must be used with define values in-order for HTML5 Pushdown Banner which is base on HTML5 Single Expandable banner format to expand with its correct Panel Dimension. You may also notice that there is a EB.initPanelDimensions(x, y, width, height); in the template, this is for the HTML5 Expandable Banner base format. You can disregard this if using the HTML5 Pushdown Banner Format Understanding Full-screen Functionality

8 Reported Custom Interactions The full-screen banner templates use a function called EB._sendMessage to tell the ad to expand to full-screen. This function communicates with a custom script that resizes the ad container to the full size of the screen. This function call is shown below. EB._sendMessage('resizecontainer', {width:'full',height:'full', x:'pageleft', y:0, pushdown:true}); In the templates this function is called within the gotofullscreensize function. The function below is called to collapse the ad back to its original size. You can change the width and height properties as needed. EB._sendMessage('resizecontainer', {width:320, height:50, x:0, y:0, pushdown:true}); There is a custom script that must be applied to the ad in order for these function calls to work properly. Directions on applying this script are documented in the Setting Up an HTML5 Pushdown Banner in the platform section. You will also notice a function called setmessageterminal in the full-screen templates. This function listens for resize events and responds accordingly. For example, if the user rotates their device, it will scroll to the top of the ad after it resizes. On Android it ensures the ad resizes properly. Testing Your HTML5 Pushdown Banner To test your ad locally, open index.html in a web browser and walk through the ad experience. You can use a web-debugging tool to view the source code and any data being sent or received by the ad. Setting up HTML5 Pushdown Banner in the Sizmek Platforms Sizmek MDX2.0 Setup 1. Archive the HTML5 Pushdown Banner workspaces into ZIP files, preserving the directory structure. You can do this with WinZip, 7Zip, or another archiving program. 2. In the Sizmek MDX2.0, 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 Pushdown Banner and fill out the form. Note: On the Sizmek MDX2.0 platform, your user account will need access to the HTML5 Pushdown Banner 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 5. Save the Ad. 6. Under the Advanced Features section, customize the Variables to your needs. 7. Create a new placement (https: /platform.mediamind.com/onlinehelp/mediamind/external/#2006.asp) for the Ad. 8. Fill out the form. Set the Placement type to In Banner and the Banner size to the collapsed size of your ad. Make sure This is an IM banner is cleared. 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 Banner 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: PL_HTML5Pushdown_banner.js Note: The full URL of the script will vary depending weather the ad is served securely or insecurely. Sizmek Sizmek Advertising Suite Setup Archive the workspace into a new ZIP file, preserving the directory structure. You can do this with 1. WinZip, 7Zip, or another archiving program. 2. Click the Creative menu item > Asset Library, Upload your Workspace the chosen folder. 3. Click the Creative menu item > Ads and click the New Ad button and select New Master Ad. 4. Fill out the form. Set Ad Format to HTML5 Pushdown Banner. 5. Under Main Assets, select the Workspace folder and default image. 6. Save the ad. 7. Under the Advanced Features section, customize the variables to your needs. 8. Create a new placement (https: /platform.mediamind.com/onlinehelp/mediamind/external/#2006.asp) for the Ad. 9. Fill out the form. Set the Placement type to In Banner and the Banner size to the collapsed size of your ad. Make sure This is an IM banner is cleared. 10. 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 Banner 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: PL_HTML5Pushdown_banner.js Note: The full URL of the script will vary depending weather the ad is served securely or insecurely.

9 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(); Change Log V3 Released November 20, 2012 When creating a pushdown placement, you must now use the custom script mobile_pushdown_v3 instead of the previous v2 version Adds support for breaking out of iframes so that pushdown ads can now be placed in publisher iframes. Utilizes native browser CSS3 transitions to animate the pushdown of page content (where supported). Fixed issue where Android zoomed inconsistently when rotating back and forth between portrait and landscape mode. Fixed issue where Nov 2012 MDX2.0 platform update changed placement div display to inline instead of block (introduced positioning and close button problems). V4 Released May 2, 2013 You must now use the script html5_pushdown_v1 instead of mobile_pushdown_v3. Added support for auto-expansion and frequency capping. Full-screen expansion now expands to the full width of the screen or window before pushing down. Added desktop templates. Added custom video controls and non-video templates. V5 Released August 23, 2013 You must now use the script html5_pushdown_v2 instead of html5_pushdown_v1. Fixed a bug that makes the panel Flash open before starting the expansion animation in some browsers. Rebranded the templates to be more consistent with other templates V6 Released May 15, 2014 Rebranded ad for Sizmek Removed custom controls on video player Created HTML5 Pushdown Banner ad format on Sizmek MDX2.0 Platform Prepared custom script for R&D changes to client mechanism V Released March 17, 2017 Added support for polite loading Supports Adkit Supports secure serving Known Issues In ios 7.1 Mobile Safari, using the Full Screen Template expanded in landscape mode, actions that unhide the browser user interface may disable buttons in the ad for a brief period. Was this article helpful? 0 out of 0 found this helpful

10 Have more questions? Submit a request (/hc/en-us/requests/new) (/hc/en-us/) Privacy Policy (http: / Terms of Use (http: /