Overview
Ad Builder Simple Skin format is, as the name suggests, a lean, simple to build skin format that allows you to set your creative as the background of the page, and do the same for gutters / header if you want to.
This format is fully liquid - meaning that it's built for programmatic executions. For more information on Liquid formats in general, and how to preview the different certified settings, for each of the potential domains of the programmatic channel, please see Programmatic ready Liquid Custom Formats.
It also supports asymmetric executions, where only one of the gutters is present along with header optionally, as well as the actual skin - background of the site, with it's presence in the build optional as well.
One of the main features is the capability to add an image background on the publisher's page, this is useful for basic wallpaper executions where the gutters are present as clickable overlays. This allows rapid development, and focus on design and utility, where creative content can be modified with code as well as codelessly via use of platform's custom variables and additional assets.
An additional layer of logic handles the presence or absence of the gutters, making them hidden if there is no room to display them on the publishers page. This allows for a graceful degradation behavior when the ad is ran on a mobile device or smaller displays, in particular, the gutters are not supported for mobile devices, hence will not show when the ad is viewed in that environment.
Ad Builder Simple Skin is released as a single, apart from the optional header panel, there are 2 gutters (panels) in the template:
- LeftGutter
- RightGutter
- MainHeader (optional)
The gutters contain an image of Sizmek logo, and the entire visible surface of the creative is clickable. This template makes use of the mdPageBackground custom variable which is enabled by default, and will inject an image to the background of the page spanning from end to end, behind the content and gutters.
SimpleSkin with header panel
Simple Skin Template without header panel
Demo
The following table provides a link to the demo for the Skin format.
Demo |
Supported Platforms
Platform |
Supported Version |
Windows |
Internet Explorer 10+, Microsoft Edge, Firefox, Chrome |
Mac |
Safari, Firefox, Chrome |
iPhone |
iOS 9.0 and later |
iPad |
iOS 9.0 and later |
Android Phone |
Android 6.0 and later |
Android Tablet |
Android 6.0 and later |
Note: Supported in Mobile browsers only and not in Apps.
Features and environment limitations:
Feature / Environment |
Supported |
||
Responsive |
no |
||
Scroll Detection |
yes |
||
Domain Configuration via Domain Config Tool (f/k/a Programmatic) |
yes |
||
Ad Builder Templates Available |
yes |
||
Local Preview |
no |
||
Uses AdKit (able to include DCO and Additional Assets) |
yes |
||
Polite Loading |
yes |
||
Safeframe Support |
no |
||
MRAID (in-app Support) |
no |
||
Secure Serving |
yes |
||
Sizmek Advertising Suite Support |
yes |
Implementing a Simple Skin
Setting Up a New Ad in Ad Builder
The Simple Skin format is available on Ad Builder. To access the Simple Skin format template on Ad Builder, please click on "Template Gallery" button from the Ad Builder welcome screen
Click on Format tab, You should be able to find Simple Skin format from the template list.
To create a new ad, simply select a template and then click on Create. The new ad will start with a Master_Banner and default (panel) content showing left section of Ad Builder tool. Master_Banner, is a 1x1. You can edit the banner by changing, removing, or adding components based on your requirements.
Gutters Panel contains Sizmek logo and the click through button is transparent over all the Ad
MainHeader Panel contain Sizmek logo, click through button and text with the name of the template
After you have completed editing your ad, you can click on Save to commit the ad to Sizmek MDX platform and preview your ad.
Customizing Simple Skin
You may remove or replace any existing element in the template with your own creative assets. However, there is some thing you need to be aware of, you can´t modify the name of the panels. If you change the name of some panel the panel will be as a normal panel.
Extra information:
- Ad Dimensions: The template is 1x1 with 3 panels in total. Two panels as gutters with 120x600 and the mainHeader is 970x250. You can change the size of the banner and the panels. And you can remove some panel if you need it.
- Gutters: (they are non responsive) the gutters by default are fixed, you can change the behavior with a custom variable. Gutters will be hidden automatically if they don't have enough space between the content and the limits of the browser (height and width)
- Collapse Panel: You can add a close button for any panel and include the collapse event using the adbuilder actions.
- Close SimpleSkin and remove the background image: You have a special option to close all the panels of the Simple Skin and remove the background image if you include all the panels that you have automatically the background will be removed, in this case (gutterLeft, gutterRight and mainHeader).
Common Customizations
Change the background image
Automatically an image will be injected in the background of the page. You can change the image and the configuration using the custom variable "mdPageBackground". You will find all the information about this custom variable below.
To change it, please go to the Advanced tab in Ad Settings on Sizmek MDX and change the custom variable mdPageBackground.
Setting up Simple Skin in the Sizmek Platforms
Setting up Simple Skin in the Sizmek MDX2.0 Platform
Once you have saved the ad to the platform, you can now use the settings from the Platform to setup your ad.
- Go to Ad Settings on MDX2.0 platform.
- For the Panel Settings, please make sure Show Single Panel at a Time is uncheck and Auto Expand Default Panel when Ad is Loaded is not selected.
- Set Default Panel Frequency to unlimited or the desired settings.
- Save the ad.
- Create a new placement for the ad.
- Fill out the form. Set the Placement type to In Banner and the Banner size to 1x1.
- After you’ve saved your placement, you can then generate preview tags to test on your web site.
Setting up Simple Skin on Sizmek Advertising Suite
Once you have saved the ad to the platform, you can now use the settings from the platform to setup your ad.
- Go to Ad Settings in the Sizmek Advertising Suite.
- For the Advanced Panel Settings, please make sure Overwrite Creative Settings: Always auto-expand under Auto-Expand is selected.
- Set Panel Frequency to Unlimited.
- Make sure Show Single Panel at a Time under Multiple Panels is uncheck.
- Save the ad.
- Create a new placement for the ad.
- Fill out the form. Set the Placement type to In Banner and the Banner size to 1x1.
- After you have saved your placement, you can then generate preview tags to test on your web site.
Note: Custom Script Notice Since the Simple Skin 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_AdBuilderSimpleSkin.js
Custom Variables
L, R, C (for Left, Right, and Center, respectively)
Custom Variable Name |
Type |
Description |
Default Value |
|
String |
Gutters div positioning style. fixed or scroll |
fixed |
|
String |
You will be able to inject a background image only once when the Ad is loaded in the publisher's page. You can select the element and the behavior to inject. |
enabled:true, img:background_default.jpg, color:#000000, size:cover,position:top center, repeat:no-repeat, attach:fixed, fade:fade-in, fade_time:3000, inject:body, injectType:div, clickable:false |
|
Number |
Panel reposition interval. 0 for turn off the interval. Panels reposition in every "n" milliseconds. |
0 |
|
Number |
Page content width |
970 |
|
String |
The default z-index of the eye div. |
undefined |
|
Number |
To define the top position of the Gutters. First JavaScript will try to get value from the current page and apply that value to set the top position of the gutters, but if JavaScript failed to get any value from the page it will take value from this custom variable. |
0 |
|
Integer |
Number of pixels of padding between the width of the content and the start of the gutter panels. |
0 |
|
String |
Div reference to detect content of page. A valid CSS selector should be present in this variable to successfully detect the content location and width. When this var is set to anything other than undefined, mdContentWidth, mdContentAlignment, and mdContentXPosOffset are ignored and are instead calculated by using the width and location of this element. This is used for purposes of positioning the gutter elements There is a new and experimental method to get automatically the widest element from any page. You can enable with this:
Note: You will find more details about this feature below. |
undefined |
|
String |
Header panel injection type First: Insert as a first child a div. Last: Insert as a last child of a div. After: Insert after a div. Before: Insert before a div. |
After |
|
String |
Div reference to inject header panel. A valid CSS selector should be present in this variable to successfully push header panel. If undefined, will inject header at tag location |
undefined |
|
Boolean |
Whether or not to load the programmatic settings. |
false |
|
String |
Location from which to load the programmatic settings files. |
//services.serving-sys.com/programmatic/DomainList/ |
|
Boolean |
In mobile and tablet devices when the orientation is changed automatically the scrollbar will be moved to the position of the header. In the case that there is no header will be moved to the top of the page. |
true |
|
String |
Relative path to the backup image, if a custom image is desired. This allows a fallback experience to display an image that is not a 1x1 even though the tag is a 1x1 tag. Template workspace includes a file that could be used here as an example, if this custom var were set to "images/970x250_Default.jpg" When set to undefined, the normal 1x1 fallback occurs. |
undefined |
|
String |
Alignment of the content on the page. This var is only used if mdContentPlacementSelector is undefined. This is used for purposes of positioning the gutter elements |
C |
|
Number |
This var is ONLY for the mdBackupImage experience. If you set this var to true, then the min-width and min-height of the parent elements of the ebDiv tag will be set to the dimensions of the backup image, so that the backup image will not be cropped/clipped |
0 |
Inject a background image on the publisher's page
It´s possible change the body or a specific element in the DOM of the page to inject your background image. You can use a simple background or you can setup a advance setup using breakpoints to select when you want load a specific background. For example you will be able to have a background for mobile devices in portrait mode or for low/higth resolution.
- How to add a new background image
In Ad Builder you can open the Asset Library and upload the image that you want to use.
1. Open the Asset Library
2. Select your asset: You can choose an image from the platform or from your computer, after select it, it will be shown in the list of the assets.
3. The last setp you need to do it´s change the name of the image in the custom variable "mdPageBackground". Please go to the Advanced tab in Ad Settings on the platform and change the custom variable mdPageBackground. By default uses: "img:background_default.jpg" you can modify it with the name of your asset uploaded.
Example: img:myNewBackground.jpg
If you use this method you will be able to inject a background image only once when the Ad is loaded. It´s not necesary extra code in the workspace and you can setup different option to show the image in the publisher's page.
Default value: |
Note: You have to be careful to use this option at the same time with the mediaqueries option. Because maybe you can overwrite the custom variable result when the Ad is loaded in the page and you will not get the result.
Variables |
Description |
Values |
|
You can enable or disable this feature. If it´s TRUE the background will be injected in the publisher's site |
Default: true Options: true/false |
|
You can put the path of an image which has been uploaded to the platform. |
Default: background_default.jpg
|
|
You can select a Hex color or you can write a color name like "red", "green", etc.. it will be the background color of the page. |
Default: #000000 Options: Hex. numbers, Red, Blue, transparent, etc.. |
|
The background's size will be different in the page depending on the option selected. |
Default: cover Options: cover ,contain, auto, percentage, etc..
|
position |
The background will be positioned horizontaly or vertically depending of the option selected
|
Default: top center Options: top, center, left, right, bottom, x% y%, xpos, ypos. |
repeat |
The background will be repeated or not. If you want use the repeat option you should be use a small image for a good result. |
Default: no repeat Options: repeat, repeat-x, repeat-y, no-repeat |
attach |
The background will be injected in the plublisher page with different behaviour when you scroll up/down |
Default: fixed Options: fixed, scroll, loca, inherit, initial |
fade |
The background will have a tween and you can select between these three options to change the tween animation style. With the value 'none' the background will be shown suddenly without any animation. |
Default: fade-in Options: fade-in, fade-out, fade-in-out, none |
fade_time |
It´s the duration of the tween animation when the background is injected in the site. |
Default: 3000 Options: number in miliseconds |
inject |
It´s the element in the DOM that it will be applied all the setup. You can select a class(.myClass) or id (#myDiv) or a tag name (header) |
Default: body Options: any element in the DOM of the page. |
injectType |
There are 2 ways to inject the background in the publisher´s page.
Note: This option will not have a fade-in/out (tween) when the image is shown
|
Default: Div Options: style or div |
clickable |
if it´s TRUE the background will be clickable on the page with two dynamic, which will be created using 2 divs (without panels for gutters) |
Default: false Options: true/false |
Automatic detection of the widest element (Experimental feature)
This new feature will search on the content of any page the widest element to setup automatically the custom variables mdContentPlacementSelector and mdContentWidth. it´s designed to use the Immersive Takeover format in networks with the same tag in rotation.
If you want to enable the automatic detection only will need to change the value of the custom variable mdContentPlacementSelector
The basic method is use:
{"automaticDetection": true}
If you want to customize the searching of the element you have some parameters to change:
Variables |
Description |
Values |
|
It´s the type of the element you want to search on the page |
Default: "div" Options: div, header, span, button, etc.. |
|
You can control the maximum and minimum of the width of the pixels for the element you are searching |
Default: "300,1800" Options: Numbers - minimum/maximum |
|
All the elements names that you want to skip in the searching process of the widest element |
Default: "header,footer,dfp,google,input,search,hide,nav,fb,module,column" Options: String |
priority |
The ID or Class names that you want to prioritize in the searching process of the widest element. In the case of a "priority" element is found it will be checked if this element isn't in the "avoid" elements. Example: "#container hide" will be avoided because contain the word "hide" to avoid |
Default: "#container,#wrapper,.container,.wrapper,.main,#main" Options: String |
Example:
{"automaticDetection":true,
"search":"div","horizontalTreshold":"300,1800",
"avoid":"header,footer,dfp,google,input,search,hide,nav,fb,module,column",
"priority":"#container,#wrapper,.container,.wrapper,.main,#main"}
Custom Interactions
The following custom interactions are reported by the ad and can be reviewed in Sizmek reporting (besides standard ad interactions).
Interaction Name |
Description |
click_left_gutter |
Clickthrough fired once the users click on clickthrough button appearing in the left gutter. |
click_right_gutter |
Clickthrough fired once the user clicks on clickthrough button appearing in the right gutter. |
click_header |
Clickthrough fired once the user clicks on clickthrough button appearing in the header. |
Change Log
Release: May 10, 2018 (v1.0.0)
- Initial release
Known Issues
- A known bug in iPad and iPhone is not possible to use "fixed" property on the background when you use mdPageBackground variable or mediaQueries option or changePageBackground function, instead of "fixed" will be changed to "scroll" only on iPad and iPhone devices
- Clickthrough urls are missing when you edit the Ad in the platform setting
- Special characters are removed after updating some custom variables from adBuilder tool. You can edit the value of some custom variable if you edit the Ad from the platform
Copyright 2017 Sizmek. All rights reserved. |
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. |
Comments