Sizmek Formats Custom Header Build Guide 1
Table Of Contents Overview... 3 Supported Platforms... 7 Specifications... 8 Known Issues... 8 Ad Interaction Tracking... 8 Ad Clickthrough... 9 Template Included Files... 9 Setting up in Workshop... 9 Customizing the Format... 10 Leave behind (leavebehind.fla)... 10 Panel (panel.fla)... 11 Fallback images... 17 Setting up in Platform... 19 Custom Variables... 19 Configuring in Workshop... 19 Configuring in Platform... 19 Custom Variables Definitions... 19 Change Log... 20 2
Overview The Custom Header is a responsive, large banner format that can display different banner content in five different banner dimensions. The format has been developed and tailored to the New MSN website. 1272x328 panel (flash) For each dimension the Custom Header is able to display a different experience for the user if desired. The template is also able to scale on creative design to the other two sizes for maximum flexibility during production. 1119x328 panel (flash) 3
970x250 panel (flash) 628x162 panel (flash) 4
The Custom Header includes a Show Ad/Hide Ad functionality that is identical to the IAB Billboard. The state of view of the Custom Header is saved via a cookie on the user s machine. The state of the Custom Header is maintained when the browser is resized. Leave behind (flash) The format is built as a 2x2 in-banner unit and requires three different default images that are uploaded as additional assets in the creative. 1272x92 and 1119x81 (image) 970x70 and 824x61 (image) 5
628x45 (image) The format resize the content according to browser width on non-msn pages and columns value on MSN page. Default panel dimension on non-msn page Brow ser Width Content dimension Detail <824 628x162px When browser width less than 824px. It shows 628x162 dimension content. 824-969px 824x212px When browser width greater than equal to 824px and less than 970. It shows 824x212 dimension content. 970-1118px 970x250px When browser width greater than equal to 970px and less than 1119. It shows 970x250 dimension content. 1119-1271 1119x289 When browser width greater than equal to 970px and less than 1119. It shows 970x250 dimension content. >=1272px 1272x328 When browser width greater than equal to 1272px. It shows 1272x 328 dimension content. 6
Default panel dimension on MSN page Column value Content dimension Detail 2 columns 628x162px When page loads/resizes in 2 columns view. It shows 628x162 dimension content. 3 columns 970x250px When page loads/resizes in 3 columns view. It shows 970x250 dimension content. 4 columns 1272x328 When page loads/resizes in 4 columns view. It shows 1272x328 dimension content. Default panel dimension on MSN page in IE browser Column value Content dimension Detail 2 columns 628x162px When page loads/resizes in 2 columns view. It shows 628x162 dimension content. Intermediate view(2.5) 824x212 When page loads/resizes in Intermediate view (2.5 columns view). It shows 824x212 dimension content. 3 columns 970x250px When page loads/resizes in 3 columns view. It shows 970x250 dimension content. Intermediate view(3.5) 1119x212 When page loads/resizes in Intermediate view (2.5 columns view). It shows 824x212 dimension content. 4 columns 1272x328 When page loads/resizes in 4 columns view. It shows 1272x328 dimension content. Note:- Content dimension can be customizable using custom variable setting. Supported Platforms Platform Windows XP/7/8/Surface Supported Browser Version Internet Explorer 8+, Firefox, Chrome, Safari 7
Mac OSX 10.8 & 10.9 Firefox, Chrome, Safari Specifications Format Version 1.1 Supports ActionScript 3.0 Supports Flash Player 10 and above Please preview on the tag level for most accurate results Known Issues For best results please preview this format on the tag level. Local/workshop preview doesn t show correct preview. On Non-MSN pages, hide and show the ad multiple times. Sometime showad and main panel are invisible. It is delivery bug. We can t repro 100%. Old flash fla files are not compatible with 002 version of Javascript, Please make sure use the latest version of flash files. When user upload the ad using workshop, on platform, in Custom script section, sometime there is no JavaScript attached or wrong JavaScript attached. Please make sure, following JavaScript should be there. http://ds.serving-sys.com/burstingres/customscripts/pl_customheader_cfv002.js; http://ds.servingsys.com/burstingres/customscripts/pl_customheader_plugin_msn_cfv002.js Ad Interaction Tracking The Custom Header template provides the following custom interaction tracking by default. The name values of the custom interactions may be modified if desired by the developer. Show Ad button click (Automatic Event) Hide Ad button click (Automatic Event) Ad Viewed in 2-column view (Automatic Event fired when ad is loaded or page view is changed) Ad Viewed in 3-column scale down view (Automatic Event fired when ad is loaded or page view is changed) Ad Viewed in 3-column view (Automatic Event fired when ad is loaded or page view is changed) Ad Viewed in 4-column scale down view (Automatic Event fired when ad is loaded or page view is changed) Ad Viewed in 4-column view (Automatic Event fired when ad is loaded or page view is changed) 8
Ad Clickthrough In the clickthrough over the platform, Please make sure close Ad parts should be unchecked. Template Included Files Filename 1x1.fla panel.fla leavebehind.fla CustomHeader.as 1x1.jpg 628x45.jpg 970x70.jpg 1272x92.jpg Description 1x1 Flash banner, the place holder 1272x328 Flash panel 88x31 Flash leave behind AS3 class for applying custom header logic Backup image served when flash and Javascript is disabled Backup image served when flash is disabled (In 2 columns view) Backup image served when flash is disabled (In 3 columns view) Backup image served when flash is disabled (In 4 columns view) Setting up in Workshop In your file browser, browse to and run the Custom Header MXP/ZXP (Custom_Header.mxp or Custom_Header.zxp), and then follow the prompts in the Adobe Extension Manager to install the extension. You can skip this step if you have already installed the MXP. In the Sizmek Workshop for Flash, select New from template. 9
For AS Version, select ActionScript 3. Expand the Sizmek Templates > Custom Header folder, and select 1x1_Nonideo Click Create. Customizing the Format Leave behind (leavebehind.fla) Do not modify leave behind fla. 10
Panel (panel.fla) 1. Open panel.fla 2. On the content layer there is movieclip called mc_content, double click to open this movieclip 3. In side mc_content, there are 5 layers. action:- has action script code. Hide Ad button: - Hide button graphic (Do not modify the graphic). 628x162:- content for 628x162 size panel. Content graphic can be add/update. 970x250:- content for 970x250 size panel. Content graphic can be add/update. 1272x328:- content for 1272x328 size panel. Content graphic can be add/update. 4. All content moveclips should be align to top-left of the stage. 5. On action layer contents following code var ch:customheader = CustomHeader.getInstance(); var str:string = EBBase.GetVar("mdPanelWidths"); if(str) var panelwidth:array = str.split(","); var settings:object = ; settings["w"+ panelwidth[0]] = content:mc628x162, props:scalex:1, scaley:1, playonce:false; settings["w"+ panelwidth[1]] = content:mc970x250, props:scalex:0.85, scaley:0.85, playonce:false; settings["w"+ panelwidth[2]] = content:mc970x250, props:scalex:1, scaley:1, playonce:false; settings["w"+ panelwidth[3]] = content:mc1272x328, props:scalex:0.88, scaley:0.88, playonce:false; settings["w"+ panelwidth[4]] = content:mc1272x328, props:scalex:1, scaley:1, playonce:false; /* //One movieclip can be used for all columns. Here is the sample code settings["w"+ panelwidth[0]] = content:mc1272x328, props:scalex:0.4937, scaley:0.4935, playonce:false; settings["w"+ panelwidth[1]] = content:mc1272x328, props:scalex:0.648, scaley:0.648, playonce:false; settings["w"+ panelwidth[2]] = content:mc1272x328, props:scalex:0.7625, scaley:0.7624, playonce:false; settings["w"+ panelwidth[3]] = content:mc1272x328, props:scalex:0.88, scaley:0.88, playonce:false; settings["w"+ panelwidth[4]] = content:mc1272x328, props:scalex:1, scaley:1, playonce:false; */ ch.addjseventlistener(customheader.st AGE_RESIZE, resizehandler); ch.init(settings, this); 11
function resizehandler(e:object) switch(e.stagewidth) case 628: EBBase.AutomaticEventCounter("Two_Columns_Viewed"); break; case 824: EBBase.AutomaticEventCounter("Three_Columns(Scale_Down)_Viewed"); break; case 970: EBBase.AutomaticEventCounter("Three_Columns_Viewed"); break; case 1119: EBBase.AutomaticEventCounter("Four_Columns(Scale_Down)_Viewed"); break; case 1272: EBBase.AutomaticEventCounter("Four_Columns_Viewed"); break; 6. Tracking also added on action layer. Please see yellow highlighted code. 7. 8. var ch:customheader = CustomHeader.getInstance(); 9. 10. var str:string = EBBase.GetVar("mdPanelWidths"); 11. if(str) 12. 13. var panelwidth:array = str.split(","); 14. var settings:object = ; 15. settings["w"+ panelwidth[0]] = content:mc628x162, props:scalex:1, scaley:1, playonce:false; 16. settings["w"+ panelwidth[1]] = content:mc970x250, props:scalex:0.85, scaley:0.85, playonce:false; 17. settings["w"+ panelwidth[2]] = content:mc970x250, props:scalex:1, scaley:1, playonce:false; 18. settings["w"+ panelwidth[3]] = content:mc1272x328, props:scalex:0.88, scaley:0.88, playonce:false; 19. settings["w"+ panelwidth[4]] = content:mc1272x328, props:scalex:1, scaley:1, playonce:false; 20. /* 21. //One movieclip can be used for all columns. Here is the sample code 22. settings["w"+ panelwidth[0]] = content:mc1272x328, props:scalex:0.4937, scaley:0.4935, playonce:false; 12
23. settings["w"+ panelwidth[1]] = content:mc1272x328, props:scalex:0.648, scaley:0.648, playonce:false; 24. settings["w"+ panelwidth[2]] = content:mc1272x328, props:scalex:0.7625, scaley:0.7624, playonce:false; 25. settings["w"+ panelwidth[3]] = content:mc1272x328, props:scalex:0.88, scaley:0.88, playonce:false; 26. settings["w"+ panelwidth[4]] = content:mc1272x328, props:scalex:1, scaley:1, playonce:false; 27. */ 28. ch.addjseventlistener(customheader.st AGE_RESIZE, resizehandler); 29. ch.init(settings, this); 30. 31. 32. function resizehandler(e:object) 33. 34. switch(e.stagewidth) 35. 36. case 628: 37. EBBase.AutomaticEventCounter("Two_Columns_Viewed"); 38. break; 39. 40. case 824: 41. EBBase.AutomaticEventCounter("Three_Columns(Scale_Down)_Viewed"); 42. break; 43. 44. case 970: 45. EBBase.AutomaticEventCounter("Three_Columns_Viewed"); 46. break; 47. 48. case 1119: 49. EBBase.AutomaticEventCounter("Four_Columns(Scale_Down)_Viewed"); 50. break; 51. 52. case 1272: 53. EBBase.AutomaticEventCounter("Four_Columns_Viewed"); 54. break; 55. 56. 57. 58. User can modify scale of the content movie clips (mc628x162, mc970x250, mc1272x328). Also one content move clip can be used for all three sizes. Check the highlighted code. Here is the example. 59. 60. var ch:customheader = CustomHeader.getInstance(); 61. 62. var str:string = EBBase.GetVar("mdPanelWidths"); 63. if(str) 64. 13
65. var panelwidth:array = str.split(","); 66. var settings:object = ; 67. settings["w"+ panelwidth[0]] = content:mc628x162, props:scalex:1, scaley:1, playonce:false; 68. settings["w"+ panelwidth[1]] = content:mc970x250, props:scalex:0.85, scaley:0.85, playonce:false; 69. settings["w"+ panelwidth[2]] = content:mc970x250, props:scalex:1, scaley:1, playonce:false; 70. settings["w"+ panelwidth[3]] = content:mc1272x328, props:scalex:0.88, scaley:0.88, playonce:false; 71. settings["w"+ panelwidth[4]] = content:mc1272x328, props:scalex:1, scaley:1, playonce:false; 72. /* 73. //One movieclip can be used for all columns. Here is the sample code 74. settings["w"+ panelwidth[0]] = content:mc1272x328, props:scalex:0.4937, scaley:0.4935, playonce:false; 75. settings["w"+ panelwidth[1]] = content:mc1272x328, props:scalex:0.648, scaley:0.648, playonce:false; 76. settings["w"+ panelwidth[2]] = content:mc1272x328, props:scalex:0.7625, scaley:0.7624, playonce:false; 77. settings["w"+ panelwidth[3]] = content:mc1272x328, props:scalex:0.88, scaley:0.88, playonce:false; 78. settings["w"+ panelwidth[4]] = content:mc1272x328, props:scalex:1, scaley:1, playonce:false; 79. */ 80. ch.addjseventlistener(customheader.st AGE_RESIZE, resizehandler); 81. ch.init(settings, this); 82. 83. 84. function resizehandler(e:object) 85. 86. switch(e.stagewidth) 87. 88. case 628: 89. EBBase.AutomaticEventCounter("Two_Columns_Viewed"); 90. break; 91. 92. case 824: 93. EBBase. AutomaticEventCounter("Three_Columns(Scale_Down)_Viewe d"); 94. break; 95. 96. case 970: 97. EBBase.AutomaticEventCounter("Three_Columns_Viewed"); 98. break; 99. 100. case 1119: 101. EBBase. AutomaticEventCounter("Four_Colum ns(scale_dow n)_viewed" ); 102. break; 14
103. 104. case 1272: 105. EBBase.AutomaticEventCounter("Four_Columns_Viewed"); 106. break; 107. 108. 109. 110. 628x162, 970x250 and 1272x328 layers contain following code. var ch:customheader = CustomHeader.getInstance(); ch.addjseventlistener(customheader.st AGE_RESIZE, resizehandler); function resizehandler(e:object) var str:string = "w" + e.stagewidth; if(ch.settings[str].content == this) if(this.visible == false) this.visible = true; else if(ch.settings[str].props.playonce) //video or animation play code should be here //video or animation play only once when it loads. ch.settings[str].props.playonce = false; this.visible = false; This code handles visibility of the all 3 content when browser resize. User can also handle video or animation start/stop with above code for each content. It starts video on every time when panel resize and show. Video shouldn t auto play with video component settings. It should play with the code. Here is the example. var ch:customheader = CustomHeader.getInstance(); ch.addjseventlistener(customheader.st AGE_RESIZE, resizehandler); function resizehandler(e:object) var str:string = "w" + e.stagewidth; if(ch.settings[str].content == this) if(this.visible == false) 15
Videoplayer.loadAndPay(4); this.visible = true; else if(ch.settings[str].content.playonce) //video or animation play code should be here //video or animation play only once when it loads. ch.settings[str].content.playonce = false; Videoplayer.stop(); this.visible = false; If user wants to play video or animation only on 1 st load. Here is the example. Inside mc_content, on action layer. Change the highlighted code var ch:customheader = CustomHeader.getInstance(); var str:string = EBBase.GetVar("mdPanelWidths"); if(str) var panelwidth:array = str.split(","); var settings:object = ; settings["w"+ panelwidth[0]] = content:mc628x162, props:scalex:1, scaley:1, playonce:false; settings["w"+ panelwidth[1]] = content:mc970x250, props:scalex:0.85, scaley:0.85, playonce:false; settings["w"+ panelwidth[2]] = content:mc970x250, props:scalex:1, scaley:1, playonce:false; settings["w"+ panelwidth[3]] = content:mc1272x328, props:scalex:0.88, scaley:0.88, playonce:false; settings["w"+ panelwidth[4]] = content:mc1272x328, props:scalex:1, scaley:1, playonce:false; /* //One movieclip can be used for all columns. Here is the sample code settings["w"+ panelwidth[0]] = content:mc1272x328, props:scalex:0.4937, scaley:0.4935, playonce:false; settings["w"+ panelwidth[1]] = content:mc1272x328, props:scalex:0.648, scaley:0.648, playonce:false; settings["w"+ panelwidth[2]] = content:mc1272x328, props:scalex:0.7625, scaley:0.7624, playonce:false; settings["w"+ panelwidth[3]] = content:mc1272x328, props:scalex:0.88, 16
scaley:0.88, playonce:false; settings["w"+ panelwidth[4]] = content:mc1272x328, props:scalex:1, scaley:1, playonce:false; */ ch.addjseventlistener(customheader.st AGE_RESIZE, resizehandler); ch.init(settings, this); And inside the content (mc_628x162, mc_970x250 and mc_1272x328) movie clip. var ch:customheader = CustomHeader.getInstance(); ch.addjseventlistener(customheader.st AGE_RESIZE, resizehandler); function resizehandler(e:object) var str:string = "w" + e.stagewidth; if(ch.settings[str].content == this) if(this.visible == false) this.visible = true; else if(ch.settings[str].content.playonce) //video or animation play code should be here //video or animation play only once when it loads. Videoplayer.loadAndPay(4); ch.settings[str].content.playonce = false; Videoplayer.stop(); this.visible = false; 111. Panel fla s flash player must me 10 and above. 112. Don t add any kind of stage mode related code. e.g. stage.scalemode = StageScaleMode. NO_SCALE. Fallback images Update in the MDX workshop 1. Open MDX workshop. 2. Create custom header ad. 3. Go to Setting>>Ad setup 4. Click on Additional Assets 17
5. Update the images according to dimension. If user update the additional id of image, user have to have update the mdfallbackimagesid in the custom var section. Update in the MDX platform 1. Create the ad 2. Go to Additional assets section 3. Update the images according to dimension. If user update the additional id of image, user have to have update the mdfallbackimagesid in the custom var section. 18
Setting up in Platform The custom script should already be attached to the ad when it is uploaded from the MXP/ZXP. You can confirm this by doing the following. 1. In Sizmek MDX/ZXP, go to the Setup tab. 2. Select the Advanced Features section, and expand the Custom JS area. 3. Copy and paste this code to the Trigger JavaScript on Scripts Pre-load text field: New Client Delivery : http://ds.serving-sys.com/burstingres/customscripts/pl_customheader_cfv002.js; http://ds.servingsys.com/burstingres/customscripts/pl_customheader_plugin_msn_cfv002.js 3a. Make sure the Use new client mechanism checkbox is selected. 4. Click Save. Custom Variables Custom Variables for the Custom header can be configured using either the Sizmek Workshop or Sizmek MDX once your ad is created. All custom variables default values setup as MSN specific. It can be change as needed. Configuring in Workshop In the Sizmek Workshop, go to the Settings tab. Next select the Variables menu. Click the Add Variable button to enter the appropriate values or double click an existing variable to edit it. When are done click the Save button. When you upload the ad these values will maintain their state in the platform. Configuring in Platform In Sizmek MDX, go to the Setup tab. Select the Advanced Features section, and expand the Variables area. Click the New button to enter the appropriate values or double click an existing variable to edit it. When done, click the Save button. Custom Variables Definitions 19
Name:Type Default Value Description Accepted Values mdautorepositioninterval :Number 200 The amount of milliseconds to realign the default panel. 1+ If 0 then the interval will not start. mdeyedivzindex:number 3 The default z-index of the eye div. mdfallbackimagesid:string 1,2,2,3,3 The default additional assets id for fallback images. 0 to 10000 To leave the z-index unchanged us the string undefined String, comma separated assets ids. mdcookieexpirytime 24 Default cookie expiry time Any number mdsharecookie false Share cookie between multiple ads and pages. True/false mdscaledownbackupimage s (for MSN only) true Scale Down the fall images in intermediate views. True/false Change Log September 15, 2014 (v 0.1) o First draft September 29, 2014 o Changed the tag to 2x2 dimension. o Updated the build guide. October 10, 2014 o Bug fixes in custom script and flash file. o Fixed MSN article page bug o Fixed Firefox loading issue April 24, 2015 o Updated the flash and custom script for intermediate column solution o Added custom var for shared cookies o Fixed Firefox loading issue May 13, 2015 o Updated the flash and custom script for intermediate column solution o Updated to flash files and custom script to version 2.0.0. o Current flash files are not backward compatible. o Updated the custom script template. o Changed the tag to 1x1 dimension. 20
o Added mdsharecookie, mdscaledownbackupimages, mdcookieexpirytime custom variables o Banner contents in five different banner dimensions, previous was three. 21
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. 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.