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.

Supported Platforms

Note: Supported in Mobile browsers only and not in Apps.

Features and environment limitations:

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.

1. Go to Ad Settings on MDX2.0 platform.
2. 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.
3. Set Default Panel Frequency to unlimited or the desired settings.
4. Save the ad.
5. Create a new placement for the ad.
6. Fill out the form. Set the Placement type to In Banner and the Banner size to 1x1.
7. 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.

1. Go to Ad Settings in the Sizmek Advertising Suite.
2. For the Advanced Panel Settings, please make sure Overwrite Creative Settings: Always auto-expand under Auto-Expand is selected.
3. Set Panel Frequency to Unlimited.
4. Make sure Show Single Panel at a Time under Multiple Panels is uncheck.
5. Save the ad.
6. Create a new placement for the ad.
7. Fill out the form. Set the Placement type to In Banner and the Banner size to 1x1.
8. 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)

{"automaticDetection": true}

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

•  The custom Variable "mdPageBackground"

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.

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.

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:

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

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