Wallpaper Sizmek Features Build Guide
←
→
Page content transcription
If your browser does not render page correctly, please read the page content below
Sizmek Features
Wallpaper
Build Guide
Sizmek
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 ........................................................................................................................... 10
References ................................................................................................................................ 11
Change Log ............................................................................................................................... 11
Copyright © 2014 Sizmek. All rights reserved.
2
Sizmek
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.
Copyright © 2014 Sizmek. All rights reserved.
3
Sizmek
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 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 (z-
index 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.
Copyright © 2014 Sizmek. All rights reserved.
4Sizmek
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.
Copyright © 2014 Sizmek. All rights reserved.
5Sizmek
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.
Copyright © 2014 Sizmek. All rights reserved.
6Sizmek
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
Copyright © 2014 Sizmek. All rights reserved.
7Sizmek
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.
Copyright © 2014 Sizmek. All rights reserved.
8Sizmek
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:
http://ds.serving-
sys.com/BurstingRes/CustomScripts/PL_CustomScript.js?adid=[%tp_adid%];http://ds.serving-
sys.com/BurstingRes/CustomScripts/PL_WallpaperFeature_OldClient.js?adid=[%tp_adid%]&bg
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>s=a:none,b:9
72,c:0,d:center,e:false,f:LeftGutter,g:RightGutter,h:false,i:false;http://qatech.viewpoint.com/mdm
d/customjs/PL_Sidekick_NewClient.js
Here’s a new client example with the existing script in green and the new script in purple:
Copyright © 2014 Sizmek. All rights reserved.
9Sizmek
http://ds.serving-
sys.com/BurstingRes/CustomScripts/PL_WallpaperFeature_NewClient.js?adid=[%tp_adid%]&b
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>s=a:none,b:
972,c:0,d:center,e:false,f:LeftGutter,g:RightGutter,h:false,i:false;http://qatech.viewpoint.com/md
md/customjs/PL_Sidekick_NewClient.js;http://ds.serving-
sys.com/BurstingRes/CustomScripts/PL_CustomScript.js?adid=[%tp_adid%]
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.
Copyright © 2014 Sizmek. All rights reserved.
10Sizmek
References
We highly recommend reviewing the possible background image settings on W3Schools. For more
information on CSS background properties, see http://www.w3.org/wiki/CSS/Properties#Background.
Change Log
Release: May 29, 2014 (v1.4)
Wallpaper Tool UI Rebranded.
Build Guide rebranded
Wallpaper Tool UI shifted to demo.mediamind.com
Copyright © 2014 Sizmek. All rights reserved.
11Notice
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.You can also read
