PRODUCT
Follow

Overview

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

Essentially this is a trimmed-down, simpler version of the Immersive Takeover format. 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.

The gutters are made responsive, to adhere to the different screen sizes, while the header panel height can be setup so that it resizes to the different breakpoints based on the size of the viewport.

An additional layer of logic handles the presence or absence of the responsive 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.

SimpleSkin_minidemo.gif

 

Simple Skin is released as a single, headerless template, but with the capability to easily add the header panel if needed.
Apart from the optional header panel, there are 2 gutters (panels) in the workspace:

  • LeftGutter 
  • RightGutter
  • Header (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.jpg

SimpleSkin with header panel

 

 

SimpleSkin_-_without_Header.jpg

Simple Skin Template without header panel

 

Demos/Downloads

The following table provides links to the template and demo for the Simple Skin format.

Template

SimpleSkin_1.4.0_1x1.zip

Demo

Preview 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

yes

Scroll Detection

yes

Domain Configuration via Domain Config Tool (f/k/a Programmatic)

yes

Ad Builder Templates Available

yes

Local Preview

yes

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

Developing Creative using Simple Skin Format

Workspaces

Template

Workspace

Video

Default Image Dimensions

Simple Skin

SimpleSkin_1.4.0

No

1x1

 

Core scripts and stylesheets

Main two files you will use in any simple skin scenario are:

File Name

Description

scripts/immersiveTakeover_script.js

Immersive Takeover Core script, used to define logic for loading and initialization of the ad, as well as liquid support logic definition.

styles/immersiveTakeover_style.css

Immersive Takeover base stylesheets

Note: These files will provide you with an Immersive Takeover experience.
It's highly recommended "not to duplicate the files in your workspace, and then use a relative path to load them".

Template Assets

HTML

Banner and gutter's markup:

File Name

Description

index.html

Banner source markup, rendered as 1x1 on the page.

panels/left_gutter/index.html

Left gutter(panel) markup.

panels/right_gutter/index.html

Right gutter(panel) markup.

panels/header/index.html

Header (panel) markup.

 

Styles

Banner and gutter's style sheets :

File Name

Description

styles/reset.css

Default browser style override.

styles/style.css

Banner style sheet.

panels/left_gutter/styles/style.css

Left gutter(panel) style sheet.

panels/right_gutter/styles/style.css

Right gutter(panel) style sheet.

panels/header/styles/style.css

Header(panel) style sheet.

 

Scripts

Banner and gutter's scripts :

File Name

Description

scripts/script.js

Immersive Takeover Core script, used to load, initialize the ad and activate liquid support.

panels/left_gutter/scripts/script.js

Core script used for left gutter panel loading and initialization.

panels/right_gutter/scripts/script.js

Core script used for right gutter panel loading and initialization.

panels/header/scripts/script.js

Core script used for header panel loading and initialization.

 

Images

The following image template files are included in the images folder.

File Name

Description

images/1x1.jpg

1x1 backup image for the banner.

images/background_default.png

Image asset to inject on the page background.

AdditionalAssets/gutterLeft_image.png

Sizmek logo image for left gutter.

AdditionalAssets/gutterRight_image.png

Sizmek logo image for right gutter.

AdditionalAssets/header.png

Sizmek logo image and a text for header.

 

Customizing Simple Skin

All of the core creative functionalities are contained in:
scripts/immersiveTakeover_script.js 

You can code all your JS customizations in another script file, and then reference it in your HTML. Mandatory parts of the main banner HTML file are: "Reference to adkit JS library", "Immersive Takeover script reference", and the "Immersive Takeover style sheet reference".

Adding core scripts to your creative if developed with an authoring tool 

To get the full Simple Skin experience in your project you will need these essential files in your main folder of the workspace under scripts and style nested folders:

  • scripts/immersiveTakeover_script.js
  • styles/immersiveTakeover_style.js

To update the layout, design the creative, and assign the functionality of a template, open the HTML, CSS, and JS files in a text editor or text edition section of the authoring tool used.

Make sure that the 4 lines below are always present in your Banner and Panels HTML:

<link rel="stylesheet" href="styles/immersiveTakeover_style.css"/>
<script>EBModulesToLoad = ['EBCMD','EBAPI'];</script>
<script type="text/javascript" src="http://ds.serving-sys.com/BurstingScript/adKit/adkit.js"></script>
<script type="text/javascript" src="scripts/immersiveTakeover_script.js"></script>

Note: You should load only the EBmodules you will use in each HTML file, you can delete or add the 'Video' variable in your banner or panels HTML files, depending on whether you are using videos or not: 
EBModulesToLoad= [ 'Video','EBCMD','EBAPI']

it´s recommended to reference the files from each panel using the parent relative path, example of referencing the files from parent, then nested directory from within a nested panel folder:

<link rel="stylesheet" href="../../styles/immersiveTakeover_style.css"/>

Example of declaring modules, adkit api, and immersiveTakeover parent folder script below:

<script>EBModulesToLoad = ['Video','EBCMD','EBAPI'];</script>
<script type="text/javascript" src="http://ds.serving-sys.com/BurstingScript/adKit/adkit.js"></script>
<script type="text/javascript" src="../../scripts/immersiveTakeover_script.js"></script>
 
Load and initialize the Simple Skin

Before initializing the Simple Skin you need to identify the "panel" property value, depending on this, the banner or panel will load with different capabilities and behavior.

Example:

var config = {
panel: "header"
};
var immersiveTakeover = new immersiveTakeover(config);

"panel": define the type of the element for the immersiveTakeover,

Optional values for this property: header, left_gutter, right_gutter, background or standard

Adding the header panel

The header section of the index.html loads the core style sheets, the adkit API script, and the creative javascript file. The header is responsive and adapts to any screen size.

All of the elements are placed in relative positions and all of the CSS property values are set in percentage units, so that the elements appear correctly in all screen sizes.

If header panel is added to the ImageSkin variation of Simple Skin, it will be transparent and won't contain any creative elements.

If you are not using our templates, you need to include the essential files and you only need to add the following (config object & new instance of immersiveTakeover) to your code to initialize the format:

var config = {
panel: "header"
};
var immersiveTakeover = new immersiveTakeover(config);

Custom script will wait for all panels to load, then it will dispatch the 'afterShowPanelContent' event to all panels signaling them to show their creative elements. Within the header script, once this event is received, certain creative elements will fade in. If you identify the panel like "header" you will receive some options callbacks from the customscript.

Functions from the header:

  • When you want to expand the header, you must invoke this function:
immersiveTakeover.expand(); 
  • When you want to collapse the header, you must invoke this other function:
immersiveTakeover.collapse();

 Callbacks for the header (optional to use):

  • Header has the behavior to expand and collapse, you can control each state.
    • When the Expand animation is starting:
function afterExpandAnimStart(args) {
/*Implement code logic to fire on Expand animation start*/
}
    • When the Expand animation is completed:
function afterExpandAnimComplete(args) {
/*Implement code logic to fire on Expand animation Complete*/
}
    • When the Collapse animation is starting:
function afterCollapseAnimStart(args) {
/*Implement code logic to fire on Collapse animation start*/
}
    • When the Collapse animation is completed:
function afterCollapseAnimComplete(args) {
/*Implement code logic to fire on Collapse animation Complete*/
}

 

Updating Gutters

To customize the gutters, open index.html from panels/left_gutter, style.css from panels/left_gutter or panels/right_gutter, and script.js from panels/left_gutter or panels/right_gutter using an HTML-authoring environment. Gutters within the VideoSkin and ImageSkin templates do not contain any creative elements(transparent).

If you are not using our templates, you should include the core files and add the following lines to initialize the format:

var config = {
panel: "left_gutter"
};
var immersiveTakeover = new immersiveTakeover(config);

or

var config = {
panel: "right_gutter"
};
var immersiveTakeover = new immersiveTakeover(config);
  
All panels

All of the panels / gutters are using same event callbacks.

Callbacks:

  • afterShowPanelContent: When the panel is shown
function afterShowPanelContent(args) {
/*Implement code logic to fire when the panel is shown*/
}

 

  • onPanelLoaded: When the panel is loaded
function onPanelLoaded(args) {
/*Implement code logic to fire when the some panel is loaded*/
if (args.panelName.toLowerCase() == 'leftgutter') {
/*do something*/
}
else if (args.panelName.toLowerCase() == 'rightgutter') {
/*do something*/
}
}
 
  • onPanelUnload: When the panel is unloaded.
function onPanelUnload(args) {
/*Implement code logic to fire when the some panel is unloaded*/
if (args.panelName.toLowerCase() == 'leftgutter') {
/*do something*/
}
else if (args.panelName.toLowerCase() == 'rightgutter') {
/*do something*/
}
}

 

  • adWasClicked: When the click-through is fired all the panels will call this function and you can code the following action within the callback.
    E.g. after click-through the video can be paused:
function adWasClicked(args){
   videoRef.pause();
   console.log("Ad was clicked");
}
 
  • onPageScroll: If you want to use "onPageScroll" feature, you only need to add this function to your code. The function will receive an event when the user scrolls up/down the percent of the scrollX and scrollY
function onPageScroll(args) { 
args.scrollXPercent;
args.scrollYPercent;
}

  

Adding a video

if you want to add a video to your project, you can use the following functions to initialize it's tracking. You will get callbacks for each event, when the video is ended, when the volume is changed, video played or paused, essentially on any state change.

  • To initialize the video
immersiveTakeover.initVideo();

Automatically the script will look for the element with the ID "video" in the HTML DOM.

<video id="video" poster="videos/video1.jpg" controls>
<source src="videos/video1.mp4" type="video/mp4">
<source src="videos/video1.webm" type="video/webm">
Your browser does not support the <code>video</code> element.
</video>

You can use the standard events to control the video to play, pause, load, mute, etc...

videoRef.play();
videoRef.load();
videoRef.muted = true;
  • To resize the video while preserving it's aspect ratio (you will need a Div container for your video element)
immersiveTakeover.resizeVideo(containerVideoRef);

The video-container div should have the following or similar style:

#video-container{
background-color: black;
position: absolute;
width: 100%;
height: 92%;
}

To use this function optionally you can change the default setup to get an optimized behaviour with your video. You can change this values and use the best resolution for your video to hold the aspect ratio.

var config = {
panel: "header",
videoWidth:1100,
videoHeight:416
};

The Video Callback functions:

  • When the video is Played:
function afterVideoPlay(args) { 
/*Implement code logic to fire when the video Play*/
}
  • When the video is Ended:
function afterVideoEnd(args) { 
/*Implement code logic to fire when the video End*/
}
  • When the video is Paused:
function afterVideoPause(args) { 
/*Implement code logic to fire when the video Pause*/
}
  • When the volume of the video is changed:
function afterVolumeChange(args) { 
/*Implement code logic to fire when the volume Change*/
}
 
Synchronize Panels:

You can synchronize all the panels in the case you want to use an animation starts at the same time or you want to start some animation after some determinate action in some panel. You only need to invoke the function "syncAllPanels" when you need it and you can send a string parameter.

Example: from the header panel using the callback function "afterShowPanelContent" you can send "start" to initialize at the same time the animation for all panels)

function afterShowPanelContent(args) {
immersiveTakeover.syncAllPanels("start");
}

After calling this funcion all the panels you have in the workspace will execute the function "syncAll", which you can use to start some animation.

function syncAll(args) { 
switch (args.state) {
case "start":
/*Starting the animation*/
break;
case "end":
/*more options*/
break;
}
}

args.state: it will have the string message if you need to send several message maybe you can use a switch.

if you want to synchronize only with a specific gutter you can use this other method.

immersiveTakeover.syncGutterLeft();

or

immersiveTakeover.syncGutterRight();

 

After invoke it from any panel the left/right panel will execute this function:

function syncGutterLeft() { 
/*Implement code logic to fire when the synchronize is invoked */
}

or

function syncGutterRight() { 
/*Implement code logic to fire when the synchronize is invoked */
}

  

Other utilities you can use:
  • closePanel: You can close the panel from which is called this function and you can select if the interaction is done by user or automatically. Default: by user
    • By User
    immersiveTakeover.closePanel();
    /*Or*/
    immersiveTakeover.closePanel(false);
    • Auto
    immersiveTakeover.closePanel(true);

 

  • closeAllPanels: If you need to close all panels at the same time you can use this function from any panel.
immersiveTakeover.closeAllPanels();

 

  • fontResize: it´s an utility to resize some font in the project. the function will recieve  the reference of the element and the minimun of the size of the font and the function will modify the fontSize depending of the resolution of the device.  
var clickthroughExpandBtn = document.getElementById("clickthrough-expand");
immersiveTakeover.fontResize(clickthroughExpandBtn, 4);

 

  • getInfo: with this function you will get all the information about the environment of the device, like if the Ad is in local, or if the device is a mobile, IOS or if the browser doesnt supported the autoplay feature. So you can change the behaviour according to the device
var infoDevice = immersiveTakeover.getInfo();

var isLocal = infoDevice.isLocal; /*if the asset is loaded in local (true/false)*/

var isMobile = infoDevice.isMobile; /*if the device is mobile (true/false)*/

var isIOS = infoDevice.isIOS; /*if the device is IOS(true/false)*/

var isUnsupportedBrowserAutoPlay = infoDevice.isUnsupportedBrowserAutoPlay;
/*if the device is not compatible with autoplay feature of the video (true/false)*/

 

  • loadAdditionalAsset: to inject an image from additional asset using the ID in some element in the Ad. You will need the element where will be loaded and the relative Path for local testing

Example:

var background = document.getElementById("background");
immersiveTakeover.loadAdditionalAsset(background,2,"../../AdditionalAssets/gutterLeft_image.png");

 

  • setPanelZIndex: this function is only if you need to change the Z-index in some panel manually. It will affect only the panel which is used and it´s necessary to indicate the number of the Z-index you want to use.

Example:

immersiveTakeover.setPanelZIndex(20);

 

  • seteyeDivZIndex: this function is only if you need to change the Z-index of the EyeDiv manually. It will affect all the panels which are inside of the eyeDiv and it´s mandatory to indicate the number of the Z-index you want to use.

Example:

immersiveTakeover.seteyeDivZIndex(5);

  

Customizing a Simple Skin

All of the Simple Skin functionality is programmed in the template files. At minimum, the only changes you will need to make are to the loaded image and its style.

Note: When updating or replacing images or videos, make sure to also update references to their file names and dimensions found in index.html and style.css as necessary.

To update the layout, design, and functionality of a template, open the HTML, CSS, and JS files in a text editor.

 

Common Customizations

Configuring Gutters

To align gutters correctly around the page content, mdContentPlacementSelector to valid CSS selector that will give the page width. To align gutters correctly from top, headerSelector to valid CSS selector to read header height if any.

Gutters can be set to display in fixed location or scroll with page, set mdPosition to either 'fixed' or 'scroll'. Gutters are responsive and adapts to any screen size and they can also set to static width. Setting mdLeftGutterMinWidth/mdLeftGutterMaxWidth or mdRightGutterMinWidth/mdRightGutterMaxWidth to the same value will make gutters gutters with fixed width.

The minimum and maximum width for responsive gutters may be set by updating mdLeftGutterMinWidth/mdRightGutterMinWidth and mdLeftGutterMaxWidth/mdRightGutterMaxWidth. Gutters can be set to fill the entire available space by updating mdLeftGutterMaxWidth/mdRightGutterMaxWidth to 0. If there is not enough room to show the gutters in the browser, gutters disappear.

 

Detecting Scroll Position

All the provided templates have a function that handles keeping aware of the current scroll position. When the ad first loads, the current scroll position is received. Upon any scroll, resize, or orientation change, the new scroll position will be updated. You can access the current scroll position, available in values from 0 to 100 (percentage scrolled), via the global object and properties scrollXPercent and scrollYPercent from the creative script.js.  If you want to have code that adjusts positioning when the scrollPositioning is updated, you can put your code in the onPageScroll function in script.js.

Note: Occasionally there is network trouble causing the scroll detection code to fail, so be sure to not rely on scroll position without including backup functionality in case of failure.

Manifest Configuration (config.js file)

We have outlined some information about this file below, but for a more detailed description, please see the article in the Sizmek Help Center by going here.

The Manifest Configuration File (config.js location in the root folder of the workspace) is a metadata file that defines certain default behaviors for the ad when created on the Sizmek Ad Suite.   When you create a new blank ad, and select a workspace containing a manifest file, the information in that manifest file will be applied.  You may certainly make changes to the inputted information once the data is there.  The manifest file only gets applied once, when you assign a workspace.

 

Testing Your Simple Skin

You can test the banner by opening the index.html files in a modern browser. This is not, however, a reliable representation of how the ad might behave on a publisher page. This will depend on the layout of the publisher page and the Custom Variable settings.

 

Setting up a Simple Skin Sizmek Ad Suite

Procedure
  1. Archive the Simple Skin into ZIP files, preserving the directory structure. You can do this with WinZip, 7Zip, or another archiving program.
  2. Click Creative > Assets Library, create a new Workspace by uploading the ZIP file.
  3. Click Creative > Ads, and then click New Ad > New Master Ad.
  4. Set the Ad Format to Simple Skin and fill out the form.
  5. Add backup image 1x1.jpg from images folder. Since banner is set to 1x1 dimension, backup image is also set to 1x1.
  6. Add the following panels to the Panels List.
    • Add left gutter panel, set panel name as 'leftGutter' and select index.html from panels/left_gutter folder. Set position type to 'Page Relative-Pixels' and Auto retract to 'Never'.
    • Add right gutter panel, set panel name as 'rightGutter' and select index.html from panels/right_gutter folder. Set position type to 'Page Relative-Pixels' and Auto retract to 'Never'.
    • Add header panel (optional), set panel name as 'header' and select index.html from panels/headerfolder. Set position type to 'Page Relative-Pixels' and Auto retract to 'Never'.
  7. Uncheck 'Show single panel at a time'
  8. Set the frequency capping as per campaign requirement.
  9. Click in Additional Assets and you can add an image for each panel (ID:1 for the Header, ID:2 for the LeftGutter, ID:3 for the RightGutter)
  10. Save the ad.
  11. Under the Advanced Features section, customize the Variables to your needs.
  12. Remember to set up the custom variable mdPageBackground because by default it´s enabled and by default this custom variable will inject the image "images/background_default.jpg" which is in your workspace.
  13. Create a new placement for the ad.
  14. Fill out the form. Set the Placement type to In Banner and the Banner size to 1x1.
  15. After you've saved your placement, you can then generate preview tags to test on your web site.

 

Custom Script Notice: Since 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_ImmersiveTakeover.js

Note: The above custom script may be served either securely or insecurely based on the option selected in the platform

   

Custom Variables

L, R, C (for Left, Right, and Center, respectively)

Custom Variable Name

Type

Description

Default Value

mdRightGutterName

String

Right Gutter panel name as set on the platform.

rightGutter

mdLeftGutterName

String

Left Gutter panel name as set on the platform.

leftGutter

mdPosition

String

Gutters div positioning style. fixed or scroll

fixed

mdPageBackground

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.

 (more information here)

enabled:true, img:images/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

mdAutoRepositionInterval

Number

Panel reposition interval. 0 for turn off the interval. Panels reposition in every "n" milliseconds.

100

mdContentWidth

Number

Page content width

970

mdEyeDivZIndex

String

The default z-index of the eye div.

undefined

mdGuttersDefaultHeight

Number

Gutters default height.

1000

mdGutterTopPos

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

mdHeaderPanelName

String

Header panel name as set on platform

header

mdHeaderSizeInheritence

String

Header panel behaviour will change based on the option selected.

[breakpoints]:Header panel height will change based on this break points. If viewport falls in any of the range then that respective height will be set to header panel.

browserWidth: Header width will be the same as the browser width, the banner height stays the same as the placement height.
publisherContainerSize: the header size will be the same as the publisher ad container, including upon resize and reorientation.
adaptiveOnAuto: If the publisher container is auto or undefined, then the header will be adaptive, otherwise it will be the same as the publisher container size.

0-781:450,782-1023:250,1024-4000:250

mdMinHeaderWidth

Integer

Minimum header width if custom script fails to read page content width

970

mdHeaderPanelTopOffset

Integer

Top offset to display above the header panel

0

mdHeaderPanelBottomOffset

Integer

Bottom offset to display above the header panel

0

mdShowGutters

Boolean

Show or hide gutters.

true

mdContentOffset

Integer

Number of pixels of padding between the width of the content and the start of the gutter panels.

0

mdContentPlacementSelector

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:

{"automaticDetection": true}

Note: You will find more details about this feature below.

undefined

mdContentXPosOffset

Integer

Value, in pixels, to offset the detected location of the content area. Positive value moves the content location to the right, negative value moves the content location to the left. This allows for asymetrical layouts with padding on the left/right. This var is only used when mdContentPlacementSelector is undefined. This is used for purposes of positioning the gutter elements

0

mdHeaderInjectType

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

mdHeaderOffset

Integer

Vertical offset from header, affects header panel and gutter panels

0

mdHeaderPlacementSelector

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

mdGutterMaxWidth

Integer

Left/Right gutter maximum width. Set to 0 to define if left gutters should cover available page width on left and right side of site content.

500

mdGutterMinWidth

Integer

Left/Right gutter minimum width.

100

mdIsDomainConfigEnabled

Boolean

Whether or not to load the programmatic settings.

false

mdProgSettingsFolderPath

String

Location from which to load the programmatic settings files.

//services.serving-sys.com/programmatic/DomainList/

mdAutoScrollTopOnOrientation

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

 

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.

 

You have 3 methods to inject a background in the publisher page.

1. 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. No extra code is required in the workspace, and you can use different options to show the image in the publisher's page.

 

Default value:
enabled:true, img:images/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

 

Note: Use caution when combining this option with media queries, as one can overwrite the other on ad load, causing unpredictable results.

 

Variables

Description

Values

enabled

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

img

You can put the path of an image that you have in your workspace or you can use a number if you want to select an additional asset

Default: images/background_default.jpg

Options: Numbers / complete path in your workspace

color

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.

(more information here)

Default: #000000

Options: Hex. numbers, Red, Blue, transparent, etc..

size

The background's size will be different in the page depending on the option selected.

(more information here)

Default: cover

Options: cover ,contain, auto, percentage, etc..

 

position

The background will be positioned horizontaly or vertically depending of the option selected

(more information here)

 

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.

(more information here)

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

(more information here)

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.

  1. div: the background will be inject inside of a Div (mdBackground) and this Div will be insert it in the element that you have selected in the "inject" variable

  2. style: the background will be inject it in the Style (CSS) of the element that you have selected in the "inject" variable.

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

 

2. From the WorkSpace: Invoke the changePageBackground function that is included in the workspace ImageSkin

changePageBackground (image, color, size, position, attach, repeat, fade, fade_time, inject, injectType, clickable);

  

Variables

Description

Values

image

You can put the path of an image that you have in your workspace or you can use a number if you want to select an additional asset

Default: images/background_default.jpg

Options: Numbers / complete path in your workspace

color

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

(more information here)

Default: #000000

Options: Hex Number, Red, Blue, transparent,etc..

size

The background's size will be different in the page depending on the option selected.

(more information here)

Default: cover

Options: cover ,contain, auto, percentage, etc..

 

position

The background will be positioned horizontaly or vertically depending of the option selected

(more information here)

 

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.

(more information here)

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

(more information here)

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.

Default: fade-in

Options: fade-in, fade-out, fade-in-out

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.

  1. div: the background will be inject inside of a Div (mdBackground) and this Div will be insert it in the element that you have selected in the "inject" variable

  2. style: the background will be inject it in the Style (CSS) of the element that you have selected in the "inject" variable.

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

Note: To avoid conflicts using different methods. When you use a new method the previous method will be deleted to use the new one.

Example: if you use the variable "injectType" with the value "Div" and after you use the "injectType" with the value "style" the Div with the first background will be removed from the page.

 3. From the WorkSpace: Using the mediaQueries method: the functions are included in the workspace ImageSkin. You can use mediaQueries method to define the breakpoints you want inject in the CSS of the publisher's page to improve the user experience when the ad is loaded in diferent devices with diferent resolution.

You can add all the mediaQueries that you need. You only will need the following structure:

var breakpointsBackgroundsList = [{
mediaQuery: "screen and (min-width: 960px)",
setupBackground: {
img: "images/background_default.jpg",
color: "",
size: "cover",
position: "top center",
attach: "fixed",
repeat: "no-repeat",
fade: "fade-in",
fade_time: 0,
   inject: "body"
}]

Customization

Description

mediaQuery

You can add the media query you want use. The basic media queries control the width or/and height but you can include the 'orientation' or advanced behavior like control the minimum device pixel ratio. You don't need to include '@media' in the string

(more information here)

Examples of MediaQueries:

    • For Mobile in portrait & landscape:

only screen and (min-device-width : 375px) and (max-device-width : 667px)

 

    • - For Mobile in landscape mode only:

only screen and (min-device-width : 690px) and (orientation : landscape))

 

    • For Tablets in portrait mode only:

screen and (min-width:690px) and (max-width:995px) and (orientation: portrait)

 

    • For All devices with a resolution between 0px and 959px:

screen and (min-width: 0px) and (max-width: 959px)

 

Note: these mediaQueries are examples to know how to use it, you can include more mediaQueries for each device you want to show an image properly.

 

setupBackground

You can setup the behavior of your background for each mediaquery you use.

For a good experience you can modify the following values:

image, color, size, position, attach, repeat, fade, fade_time, inject

You will get (more information here) for each one above.

Example:

setupBackground: {
img: "images/background_default.jpg",
color: "#000000",
size: "cover",
position: "top center",
attach: "fixed",
repeat: "no-repeat",
fade: "fade-in",
fade_time: 3000,
inject: "body",
clickable: 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

search

It´s the type of the element you want to search on the page

Default: "div"

Options: div, header, span, button, etc..

horizontalTreshold

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

avoid

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

left_gutter_viewed

(Auto) When left gutter expands for first time

right_gutter_viewed

(Auto) When right gutter expands for first time

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.
clickable_gutters Clickthrough fired once the user clicks on the background image when the "clickable" option is enabled in the custom variable mdPageBackground.

  

Change Log

Release: April 11, 2018 (v1.4.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
  • The Platform's preview is not very precise and you only will see the basic behavior of the format 

 

Copyright 2021 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.

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments