Sizmek Features. Wallpaper. Build Guide

Transcription

1 Features Wallpaper Build Guide

2 Table Of Contents Overview... 3 Known Limitations... 4 Using the Wallpaper Tool... 4 Before you Begin... 4 Creating Background Transforms... 5 Creating Flash Gutters... 7 Generating Your Script... 8 Platform Custom JS... 8 Wallpaper API References Change Log

3 Overview The Wallpaper feature lets you enhance your ad's environment and compliment your campaign by skinning the background of the publisher s page. You can let users toggle between different sets of wallpaper skins to customize the web page. For example, you can show a background when the ad loads, then show a different one when users perform certain actions in the main ad. You can also deliver static or animated interactive wallpapers to create an immersive branding experience. The Wallpaper format uses an online Flash-based tool called the Wallpaper tool. It shows you all the different options available for Wallpapers, and generates a script for you to place in your ad. The Wallpaper tool has a user-friendly interface and provides tooltips to help you easily find your way when creating Wallpapers. The following illustration shows the Wallpaper Tool: The tool shows you all the different options available for Wallpaper, and it generates a script for you to place in your ad. When you place your cursor over an option, tooltips also appear to guide you through creating Wallpapers with the tool. 3

4 Known Limitations Wallpaper is not supported for Standard Banner ads. Previews from the Sizmek platform may not display correctly. If the ad is served into an unfriendly iframe, then the image backgrounds will not be applied unless the ad is broken out of the iframe. When served from an unfriendly iframe, your ad may not display as expected due to query string character count limitations. Different browsers have different limitations. For example, Internet Explorer limits strings to 2,448 characters, while Safari can handle over 65,000 characters. When adding the Wallpaper feature custom JS to an ad in the Sizmek platform, if there is already a custom script, how you add the Wallpaper feature URL is different based on whether the ad uses new client delivery. For old client you should append the wallpaper feature URL onto the end of the existing script URL. For new client you should prepend the wallpaper feature URL, so that the existing script(s) are after the wallpaper script. Dual (or more) monitor machines can have mixed results for the minimum resolution tests. On Chrome and Firefox, they will detect which of the two monitors your browser is on, and use the correct values. On IE and Safari, they will only ever use the primary monitor. When you choose Target Type of id or class, you should normally leave the Attachment field set to scroll, because setting it to fixed will result in unexpected behavior. Set it only to fixed if you know it s correct in your case (normally it won t be). If you choose px or % where available, if you forget to enter a number, then this unexpected state will result in a similar unexpected result when you try it on a test page. We don t know what you meant by choosing <undefined> pixels/percent. Some complex sites, like MSN pages, will typically not be easy to apply wallpaper to. This is due to various page elements that overlap others. For example, if you apply wallpaper to the body, you might not be able to click it because an overlapping transparent element is on top of it (zindex wise). The solution is to apply the wallpaper to multiple element targets. Using the Wallpaper Tool Before you Begin Make sure you have the following resources available: An ad in the Sizmek platform (Standard Banner ads are not supported). If using static backgrounds, your static background assets uploaded as additional assets for your ad in the Sizmek platform. The following asset types are supported: GIFs, JPGs, and PNGs. If using Flash gutters, your SWFs assigned to panels of your ad in the Sizmek platform. 4

5 Creating Background Transforms A background transform applies a static image (GIF, JPG, or PNG) to an HTML element on the publisher s page and lets you configure various style properties. To customize a background transform: 1. Click the + button to add a new background. 2. If you want the background to be visible when the page loads, select Visible. If the wallpaper is user-initiated, leave this option cleared. 3. Enter a Name for the background. This is a unique identifier JavaScript that references the background when making it visible. It has no direct connection to anything entered in the platform, it s for scripting purposes. Example: mmshowwpbackground('bgimage01'); For more information, see Wallpaper API. 4. Assign the Asset by entering the index value assigned to the asset in the MediaMind platform, or by entering the URL to the image. If you are not using an image for this background, leave this field blank. Note: Accepted image formats are GIF, JPG, and PNG. 5. Select the Target Type, which determines the type of HTML element the background will be applied to: a. body: The body tag of the page. b. id: A custom id of an element in the page. If you use this option, you must define Target Value. c. class: The custom class name of an element in the page. If you use this option, you must define Target Value. Note: The background is only applied to the first element on the page with this class name. If there are multiple elements with the same class name, the background will only be applied to the first element. To prevent conflicts with other elements on the page, choose a unique class name. 5

6 6. If you chose id or class for the Target Type, then define the custom id or class name under Target Value. Note: Only letters, numbers, underscores "_" and hyphens "-" are allowed. 7. Choose a background Color to be applied to the target defined in Target Type and Target Value. You can select from the color picker or enter a hexadecimal RGB value. You would normally not choose a background color if you also had an image asset, unless that asset had some transparency, because the image would cover the background color. If you want a transparent background, select the white box with a red diagonal line as illustrated: 8. Customize the Horizontal Alignment style property. a. left: Aligns the background to left boundary of the browser. b. center: Aligns the background to center of the browser. c. right: Aligns the background to right boundary of the browser. d. px: Aligns the background to an absolute position in pixels from the left boundary of the browser. e. %: Aligns the background to percentage of the browser height from the left boundary of the browser. 9. Customize the Vertical Alignment style property. a. top: Aligns the background to top boundary of the browser. b. middle: Aligns the background to middle of the browser. c. bottom: Aligns the background to bottom boundary of the browser. d. px: Aligns the background to an absolute position in pixels from the top boundary of the browser. e. %: Aligns the background to a percentage of the browser width from the top boundary of the browser. 10. Customize the Repeat style property. a. no-repeat: The background image does not repeat. b. repeat: The background image is tiled and repeats horizontally and vertically. c. repeat-x: The background image pattern repeats horizontally. d. repeat-y: The background image patter repeats vertically. 11. Customize the Attachment style property. a. scroll: The background scrolls with the page. b. fixed: The background stays fixed to the browser and is always visible. 12. If you want the image to be clickable, select Clickable. The clickable area is applied to the target element, but not to any of its children. By default, the image will be clickable with the default click URL. If you want to have specific interaction name clickthroughs (that were entered into the platform), then you can enter the name in the Interaction Name input box. 6

7 13. If you only want to show the background when the user's screen resolution is larger than a specific width, select the width from Minimum Resolution. Note, this really is screen resolution. It s not the browser size, which of course can vary. 14. Repeat all steps for each additional background. If you want to delete a background, click the x button as follows: Creating Flash Gutters A Flash Gutter is a Flash movie asset on the sides of page content on a publisher s page. They can be interactive, and you can show them by executing JavaScript from other Flash assets in the ad. Note: The gutter panels are dynamically positioned based on your settings in this tool, so the position type, X, and Y values defined in the MediaMind Platform panel settings are ignored. To customize Flash Gutters: 1. Specify the Page Alignment. This is the alignment of the publisher page content, and not your intended alignment for the gutters. This value is used to dynamically position the gutter panel(s). a. center: Select this for sites that are center-aligned, with gutters on both sides of the content. b. left: Select for sites that are left-aligned, with only a gutter on the right side of the content. 2. Specify the panel names of the Left and Right Gutter Panels added in the MediaMind platform. If you chose left for the Page Alignment, then Left Gutter panel will not be usable. Note: The panel names are case sensitive. 3. If you only want to show the background when the user's screen resolution is larger than a specific width, select the width from Minimum Resolution. Again, this is not the browser width. 4. Specify the Page Width in pixels of the publisher page content. This value is used to dynamically position the gutter panel(s). In cases where an end user that changes their browser s font size can cause the page content width to be affected, it s possible in this page width box to actually 7

8 enter the id of one of the page elements, rather than a fixed number. When you do that, the wallpaper feature script will dynamically adjust the gutters based on the dynamic width of that page element. 5. Customize the Top Offset in pixels of the gutter panel(s). You can also choose to enter an element id rather than a fixed offset number here. The wallpaper feature script will use the top offset value of the chosen element rather than use a fixed number. 6. If you want the gutter to scroll with the page, select Scroll with Page. If you want the background to stay fixed to the browser and to always be visible, leave Scroll with Page cleared. 7. If you choose Prevent Horizontal Scrollbar, then as the browser window size becomes smaller, the wallpaper feature script ensures that the gutters are not responsible for causing scrollbars. This is something that would happen when the browser width is larger than the Page Width, but smaller than the Page Width plus the width of the gutter(s). In this range, if there are scrollbars, it s our fault, so we can actively prevent that happening. If the page is larger than the Page Width plus the gutter(s), then there ll naturally be no scrollbars. If it s smaller than the Page Width, then there will be scrollbars, but it s the fault of the page, and it s right that we should have them. 8. If you want to show gutters on page load select Auto Show Gutters, if not checked it will be shown on user interaction. Gutter expansion tracking is suppressed. Generating Your Script The Wallpaper tool automatically creates the script URL to add to the ad's custom JS in the MediaMind platform. Be sure to select Use New Client Mechanism if your ad is using new client delivery. Note, the only difference between the generated URL when you do/don t have this check box selected, is the word New or Old in the script URL. To generate the URL based on your specified settings in the tool, click Generate URL. To copy the URL to your clipboard, click Copy URL. Platform Custom JS To implement your Wallpaper in your ad, you will need to add the URL to your ad's Custom JS in the Sizmek platform. 8

9 To add your Wallpaper script URL to your ad: 1. Edit your ad in the MediaMind platform. 2. Go to Advanced Features and expand the Custom JS section. 3. Copy the URL from the tool and paste it into the s text box as follows: If there is already a custom script in the textbox, separate the URLs with a semicolon. Do not include any spaces between the URLs. As mentioned in the limitations section of this document, it s important that you add your new wallpaper feature URL before any existing script(s) for new client delivery, and after any existing script(s) for old client delivery. Here s an old client example, with the existing script in green and the new script in purple: s=a:true,b:bg,c:1,d:body,f:000000,g:top,h:left,i:repeat,j:scroll,k:true,l:none,m:7&gts=a:none,b:9 72,c:0,d:center,e:false,f:LeftGutter,g:RightGutter,h:false,i:false; d/customjs/pl_sidekick_newclient.js Here s a new client example with the existing script in green and the new script in purple: 9

10 gs=a:true,b:bg,c:1,d:body,f:000000,g:top,h:left,i:repeat,j:scroll,k:true,l:none,m:7&gts=a:none,b: 972,c:0,d:center,e:false,f:LeftGutter,g:RightGutter,h:false,i:false; md/customjs/pl_sidekick_newclient.js; Wallpaper API You can show your Wallpaper by calling the mmshowwpbackground() JavaScript function. Using Flash's ExternalInterface.call() function, you can design your main ad assets to show a specific background. You can hide that background by calling the corresponding hide function. To show a Wallpaper element through Flash, call ExternalInterface.call("mmShowWpBackground", backgroundname) in your ActionScript, where backgroundname is the Name of a background as defined in the Wallpaper tool. The following code illustrates how to show background bgimage01: ExternalInterface.call("mmShowWpBackground", "bgimage01"); To turn off that background, you would call the corresponding hide function. For example: ExternalInterface.call("mmHideWpBackground", "bgimage01"); To show/hide a Gutter through Flash, simply show/hide the gutter panel(s) using following code. The following code illustrates how to show gutters: ExternalInterface.call("mmShowGutter "); To hide gutters, you would call the corresponding hide function. For example: ExternalInterface.call("mmHideGutter "); Note: you ll need to ensure that Show Single Panel at a time is NOT checked in the platform s Ad Settings. If you left that checked, you d only ever see either the main ad panel, or one of the gutters. Gutter expansion/collapse tracking will not be fired if gutter expansion/collapse fired via js function. In case you need gutter expansion/collapse tracking, expand gutter like any other panels without calling wallpaper js function so that tracking will be fired. 10

11 References We highly recommend reviewing the possible background image settings on W3Schools. For more information on CSS background properties, see Change Log Release: May 29, 2014 (v1.4) Wallpaper Tool UI Rebranded. Build Guide rebranded Wallpaper Tool UI shifted to demo.mediamind.com 11

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