Sizmek Formats. HTML5 Hockeystick. Build Guide

Transcription

1 Sizmek Formats HTML5 Hockeystick Build Guide

2 Contents Overview... 2 Supported Platforms... 4 Demos/Downloads... 4 Known Issues... 4 Important notes... 5 Implementing the HTML5 Hockeystick... 5 Customizing the HTML5 Hockeystick... 6 Common Customizations... 6 Setting Up a HTML5 Hockeystick in the Sizmek Platform... 7 Custom Variables... 8 Custom Variable Definitions... 9 Setting up Tag level variables Change Log... 11

3 Overview The HTML 5 Hockeystick format creates an ad experience which frames the site content seamlessly using 2 panels (728x90 leaderboard and a 160x600 gutter) with an optional 888x600 expanded panel. Screenshot when first loaded (Hockeystick expand) Screenshot when expanded (Hockeystick expand)

4 The HTML5 Hockeystick format consists of 2 HTML5 workspaces. 1) HTML5 Hockeystick This workspace consists of 2 panels with each panel containing a unique click through url. a. 728x90 blank default banner b. 728x90 panel leaderboard c. 160x600 panel gutter 2) HTML5 Hockeystick Expand This workspace consists of 3 panels with each panel containing a unique click through url. a. 728x90 blank default banner b. 728x90 panel leaderboard c. 160x600 panel gutter d. 888x600 panel expanded The leaderboard and gutter panels will display on the page as if they are connected together in the shape of a hockey stick. Each panel s surface area is clickable and will open to a unique landing page URL. In the event that the Hockeystick Expand template is being used, the gutter panel contains an expand button. When clicked the expand panel will open and will cover the leaderboard and gutter panels. Inter Panel communication is built into the HTML5 Hockeystick making it easier to send messages between the panel assets. This is demonstrated in the demo links as a ball that animates between the leaderboard and gutter panels. This format is compatible with desktop and mobile tablet devices and extra customizations of the ad experience is possible to meet further client and publisher specifications. Please refer to the section on custom variables This format also makes use of Tag level custom variables making it simpler for publishers to customize the ad for different pages where it may be served. Customization of the adchoice log is also possible, when enabled via custom vars the adchoice logo can either be aligned to the leaderboard or gutter panel and its position can be controlled either by using the platform positioning options or can be overridden using custom vars. See the custom variable definitions section. This format also supports an alternate fallback experience when the browser does not support HTML5 in which case 2 fallback images are served 728x90 image additional asset for the leaderboard fallback experience 160x600 image additional asset for the gutter fallback experience

5 Screenshot when alternative fallback experience is served in non-html5 supported browsers (Hockeystick expand) Supported Platforms Platform Windows Mac Tablet Android Tablets Supported Browser Version Internet Explorer 9+, Firefox, Chrome, Safari Firefox, Chrome, Safari ios 6.0 and Later ipad with ios 6 and up Android Tablet with Android 4.0 and up Surface Tablet 8.0+ Note: Supported in Mobile browsers only and not in Apps Demos/Downloads To download a template, view a demo of the HTML5 Hockeystick 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 SHOWCASE. For more information, contact your Creative Development Specialist. Known Issues On Android devices, if you pinch/zoom, the panels may incorrectly align themselves in portrait mode due to incorrect reporting from Android browsers

6 Important notes This format is only compatible with New Client Delivery Previews and QA should be done on the Sizmek MDX platform The leaderboard and gutter panels will auto-expand on-load even if it is not enabled on the platform The banner asset acts as a placeholder. This asset should always remain blank and will not be visible on the page. Asset dimensions should remain unchanged. If there is a need to change the asset dimensions please consult with your account manager beforehand. If adchoices is enabled and the adchoices logo is set to display on the gutter panel, the adchoices logo will not display in the event that the gutter panel is hidden on tablet devices. Implementing the HTML5 Hockeystick Before you Begin Make sure you have the HTML5 Hockeystick workspace that is applicable for your campaign. Download the workspace from the Sizmek Showcase and extract it, preserving the directory structure. Template Included Files Folder Filename Description / index.html config.js Default Banner HTML file (empty) Adkit Config file. fallbackimages leaderboard_defaultimage.gif gutter_defaultimage.gif Fallback images to be used as additional assets for non HTML5 experience Scripts script.js Default banner script file images 728x90.gif logo.png 728x90 fallback Image Sizmek Logo image panels/leaderboard Index.html Leaderboard panel HTML file Layout of creative assets panels/ leaderboard /images logo.png Sizmek Logo image panels/ leaderboard /scripts script.js Leaderboard Panel JavaScript file. Script that controls panel behavior. panels/ leaderboard /styles style.css Leaderboard panel CSS style sheet Creative asset styles and CSS animation settings panels/gutter Index.html Gutter panel HTML file Layout of creative assets panels/ gutter /images logo.png Sizmek Logo image panels/ gutter /scripts script.js Gutter Panel JavaScript file. Script that controls panel behavior. panels/ gutter /styles style.css Gutter panel CSS style sheet Creative asset styles and CSS animation settings Optional Gutter panel panels/expand Index.html Expand panel HTML file Layout of creative assets panels/ expand /images logo.png Sizmek Logo image panels/ expand /scripts script.js Expand Panel JavaScript file. Script that controls panel behavior. panels/ expand /styles style.css Expand panel CSS style sheet Creative asset styles and CSS animation settings

7 Customizing the HTML5 Hockeystick All of the HTML5 Hockeystick functionality is programmed in the template files. At a minimum, the only changes you will need to make are to the loaded image or video assets and their respective styles. Note: 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, design, and functionality of a template, open the HTML, CSS, and JS files in a text editor. Common Customizations 1) Inter-panel communication: Communicating between the panel assets is done by using event listeners and dispatchers. To receive messages a listener event is added to the panel that needs to receive the message. addcustomscripteventlistener("animategutter",animateball,false); addcustomscripteventlistener("eventname", callback, interad); param {string} eventname param {Function} callback - Reference to a callback function. param {Boolean} interad if communication is allowed across ads To send messages, a call to the event dispatcher function is called from the panel sending the message dispatchcustomscriptevent("animategutter",{}); dispatchcustomscriptevent: function(eventname, eventdata) param {string} eventname param {object} eventdata - object that hold the event data. 2) Setting the gutter panel to fixed position: set the custom var mdgutterfixed to true / yes 3) Setting the expand panel to fixed position: set the custom var mdexpandfixed to true / yes 4) Change the location of the adchoice icon : set the custom var mdadchoicepanel to the target panel name 5) Change the position of the adchoice icon: set the custom var mdadchoiceposition (TL,TR,BL,BR,Platform) For more details and further customizations, see the section on custom variable definitions EB Video Module Templates that contain video load a video module. This module allows the video player to track video interactions and metrics. The code that loads this module looks like the code below. <script type="text/javascript">ebmodulestoload = ['Video'];</script> If needed the video module Video needs to be added the EBModulesToLoad array.

8 Testing the HTML5 Hockeystick In order to test the HTML5 Hockeystick and see the panels display correctly, the HTML5 Hockeystick needs to be setup in the Sizmek platform. Setting Up a HTML5 Hockeystick in the Sizmek Platform To set up a HTML5 Hockeystick in the Sizmek platform: 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 platform, under Creative Assets, create a new Workspace by uploading the ZIP file. 3. Under the Ads section, create a new ad. 4. Fill out the form. Set Ad Format to HTML5 Hockeystick. Note: On the Sizmek Platform, your user account will need access to the HTML5 Hockeystick 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. Select the Workspace folder and default image. 6. Add a panel to the Panels List. Name it leaderboard and choose the index.html file in the panels/leaderboard folder as the Creative Asset. The Dimensions will be automatically set to 728 X 90. Set Auto Retract When to Never. 7. Add a panel to the Panels List. Name it gutter and choose the index.html file in the panels/gutter folder as the Creative Asset. The Dimensions will be automatically set to 160 X 600. Set Auto Retract When to Never. 8. If creating an ad using the optional expand panel add a panel to the Panels List. Name it expanded and choose the index.html file in the panels/expand folder as the Creative Asset. The Dimensions will be automatically set to 888 X 600. Set Auto Retract When to Never unless it is required by your publisher. 9. Under the Advanced Features section, customize the Variables to your needs, and those of your publishers. 10. Create a new placement for the ad. 11. Fill out the form. Set the Placement type to In Banner and the Banner size to 728x90 unless the ad size is different. 12. After you ve saved your placement, you can then generate preview tags to test on your web site. Custom Script Notice: Since the HTML5 Hockeystick 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:

9 Custom Variables Custom Variables for the format can be configured using either the Sizmek Workshop or the Sizmek MDX Platform once your ad is created. Tag level variables are also supported Configuring in the Platform 1) In the Sizmek MDX platform, go to the Setup tab. 2) Select the Advanced Features section, and expand the Variables area. 3) Click the New button to enter the appropriate values or double click an existing variable to edit it. 4) When are done click the Save button. Screenshot of custom variables tab in the sizmek mdx platform

10 Custom Variable Definitions Name:Type Default Value Description Accepted Values mdgutterpanelname:string gutter Name of the gutter panel Any String mdadchoicepanel leaderboard Name of adchoice panel to add the adchoice logo to when Leaderboard or Gutter panel name enabled mdadchoiceposition Platform Alignment of adchoice logo TL,TR,BL,BR,Platform mdleaderboardpanelname: String leaderboard Name of the leaderboard panel Any String mdexpandedpanelname: String expanded Name of the expanded panel Any String mdeyedivrefelement: String undefined Name of Div to append eyediv to Any String mdleaderboardanchor: String undefined The DIV ID to position the Shim div and leaderboard to mdshiminjectiontype: String L Inject the shim div using 4 set positions. First, Last, After Before mdleaderboardalign: String R Alignment of leaderboard panel Left, Center, Right mdforceleaderboardspacing: Boolean yes Force a space below the leaderboard panel Any String First letter or Full name (F) First (L) Last (A) After (B) Before L C R yes / no mdxoffset:number 0 x offset of ad positioning Any Integer < 0 > mdyoffset: Number 0 y offset of ad positioning Any Integer < 0 > mdgutterxoffset: Number 0 x offset of only gutter panel Any Integer < 0 > mdgutteryoffset: Number 0 y offset of only gutter panel Any Integer < 0 > mdexpandfixed: Boolean no Set gutter panel to fixed position yes / no mdgutterfixed: Boolean no Set gutter panel to fixed position yes / no mdexpandedxoffset: Number 0 x offset of only expanded panel Any Integer < 0 > mdexpandedyoffset: Number 0 Y offset of only expanded panel Any Integer < 0 > mdeyedivzindex: String undefined zindex of eyediv String > 0 < mdcollapseonscroll :Boolean no collapse expand panel on page scroll mdforcemobilecollapseonscroll: Boolean yes force collapse of expand panel on mobile / tablet on page scroll mdforcemobilehidegutter: Boolean no hides gutter when it does not fill the viewport width on mobile mdautorepositioninterval: Number 0 Auto repositioning Interval (number in milliseconds) yes / no yes / no yes / no Number > 0 Note: If using tag level variables, use (TRUE /FALSE) instead of YES/NO for Boolean type variables.

11 Setting up Tag level variables The below snippet of code needs to be inserted above the generated ad Tag. N.B when using tag level variables, the variables will overwrite custom vars setup on the Sizmek MDX platform <script id="mmhockeystickparameters"> // --BEGIN-- Modify below values to override custom variable values of the ad (function(){ mdhockeystickvars = { mdadchoicepanel:"leaderboard",// name of panel to align the adchoice icon to mdadchoiceposition:"platform",//position of adchoice logo,tl,tr,bl,br,platform mdgutterpanelname:"gutter", //name of gutter panel mdleaderboardpanelname:"leaderboard",// name of leaderboard panel mdexpandedpanelname:"expanded",// name of expanded panel mdleaderboardanchor:"undefined",// the DIV ID to align the leaderboard into mdeyedivrefelement:"undefined", // eyediv Element repositinging mdshiminjectiontype:"l",// Inject shim div using 4 options (B/F/L/A) mdleaderboardalign:"r",// alignment of leaderboard swf mdforceleaderboardspacing:true, // force leaderboard spacing mdxoffset:0, // x offset of ad positioning mdyoffset:0, // y offset of ad positioning mdgutterxoffset:0, // x offset of only gutter positioning mdgutteryoffset:0, // y offset of only gutter positioning mdgutterfixed :false, // Gutter Panel Fixed positioning mdexpandfixed :false, // Expand Panel Fixed positioning mdexpandedxoffset:0, // x offset of only expanded positioning mdexpandedyoffset:0, // y offset of only expanded positioning mdcollapseonscroll:false, // collaspe expand panel on page scroll; mdforcemobilecollapseonscroll:true, // force collapse of expand panel on scroll mdforcemobilehidegutter:false,//hides gutter when it does not fill the viewport mdeyedivzindex: undefined, // eyediv zindex mdautorepositioninterval:0 // autoreposition Interval }; // --END-- Modify above values to adjust behavior of the ad // DO NOT MODIFY BELOW THIS LINE window.gfebinlinebanner = ''; for (var prop in mdhockeystickvars) { if (mdhockeystickvars.hasownproperty(prop)) { window.gfebinlinebanner += '$$' + prop + '=' + HockeystickVars[prop]; } } })(); // DO NOT MODIFY ABOVE THIS LINE </script>

12 Reported Custom Interactions Name Description leaderboard Leaderboard panel clickthrough URL gutter Gutter panel clickthrough URL expanded Expanded panel clickthrough URL Change Log First Release 22/10/2015

13 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 2015 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.