PRODUCT
Follow

Overview

The Immersive Takeover format is a full-width expandable header with left and right gutters that appear around page content and a wallpaper skin that appears behind the page content full page. The header, gutters and background skin are responsive to different screen sizes. The header height can be configured to resize to different viewport breakpoints.

This format has full programmatic support.  For (more information here) on Programmatic formats in general, and how to preview the different certified settings, please see Programmatic Support for Custom Formats

The header panel height can auto-expand on ad load and display the expanded panel. The expanded panel contains a close button, so that you can close the expanded view to return back to the collapsed view.

There are different panels for each view; the header panel will appear where the tag has been placed - ideally within the site's header section on the page. The header panel can push page content down. The left gutter and right gutter will appear on either side of the page content, and a background panel will appear as wallpaper skin spanning the background of the page. All the panels are synchronized and wait for each panel to load before displaying the ad on the page. Once all the panels have completed loading, the panel creative content will be revealed with a fade-in animation.

All of the templates contain responsive gutters, and the gutters will show if there is enough space to display them on the left and right of the page content. The gutters will collapse if there is not enough space to display them. The gutters are not supported for mobile devices and will not show when the ad is viewed on mobile or tablet.

immersiveTakeover_-_video.gif

 

Video Template

The Video template is the basic template for the Immersive Takeover with a video in the header panel. There are 4 panels in the workspace:

  • LeftGutter 
  • RightGutter
  • Background
  • Header

The gutters have a Sizmek logo, a click button and close button. Background panel has an image which will appear as wallpaper skin spanning the background of the page. When the header is collapsed you only will see an image with a play button, the logo and a clickthrough button. After expanding the header will show the video, which will be responsive to the size of the panel and hold the aspect ratio of the video.

 immersiveTakeover_-_video_collapsed.jpg

Video Template when is collapsed

 

immersiveTakeover_-_video_expanded.jpg

Video Template when is expanded 

Demos/Downloads

The following table provides links to the templates and demo for the Immersive Takeover format.

Template

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

These are the key features of the Immersive Takeover format by each template.

 

VideoSkin

ImageSkin

Video

Basic Cross Domain Configuration via one ad (creative-level)

yes

Affect the site with style (requires publisher approval)

yes

Affect the site with script (requires publisher approval)

yes

Inter-panel synchronisation

yes

Responsive

yes

Mobile Experience (gutters are hidden, different header expansion)

yes

Scroll Detection

yes

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

yes

Ad Builder Templates Available

no

Local Preview

yes

Video Background

yes

no

no

Controls Panel

yes

no

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 an Immersive Takeover Format

Workspaces

Template

Workspace

Video

Default Image Dimensions

Video

ImmersiveTakeover_Video_1.5.1

Yes

1x1

VideoSkin

ImmersiveTakeover_VideoSkin_1.5.1

Yes

1x1

ImageSkin

ImmersiveTakeover_ImageSkin_1.5.1

No

1x1

 

Essential files to use in any project

The main 2 files you will need to use in any HTML project are:

File Name

Description

scripts/immersiveTakeover_script.js

Core script to use the Immersive Takeover to load and initialize ad and pass domain configuration object to custom script.

styles/immersiveTakeover_style.css

The basic Stylesheet for the Immersive Takeover format

Note: You can use only these files to get an Immersive Takeover experience. It's recommended to not duplicate the files in your workspace and use a relative path to load them.

 

Included Video Template Files

The different templates contain different assets, please read the below to find out more about Video Template.

HTML

The following HTML template files are included.

File Name

Description

index.html

The banner file that is 1x1 displayed on the page.

panels/headers/index.html

HTML file for header panel.

panels/left_gutter/index.html

HTML file for the left gutter panel.

panels/right_gutter/index.html

HTML file for the right gutter panel.

panels/background/index.html

HTML file for background panel.

 

Styles

The following CSS template files are included

File Name

Description

styles/reset.css

A style sheet that overrides browser default styles.

styles/style.css

Stylesheet for banner creative.

panels/header/styles/style.css

Stylesheet for header panel creative.

panels/left_gutter/styles/style.css

Stylesheet for Left gutter panel creative.

panels/right_gutter/styles/style.css

Stylesheet for Right gutter panel creative.

panels/background/styles/style.css

Stylesheet for Background panel creative.

 

Scripts

The following JavaScript template files are included

File Name

Description

scripts/script.js

Core script for banner to load and initialize ad and pass domain configuration object to custom script.

panels/header/scripts/script.js

Core script for header panel to load and initialize ad.

panels/background/scripts/script.js

Core script for background panel to load and initialize ad.

panels/left_gutter/scripts/script.js

Core script for the left gutter panel to load and initialize ad.

panels/right_gutter/scripts/script.js

Core script for the right gutter panel to load and initialize ad.

 

Images

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

File Name

Description

images/1x1.jpg

1x1 backup image for the banner.

panels/header/images/close.png

The close button image for close button appearing in expanded view.

panels/header/images/panel_logo.png

The logo image for asset file.

panels/header/images/video1.png

The button image for expand the header

panels/background/images/1100_width.png

Background image asset to display in background panel.

panels/left_gutter/images/CTA.jpg

The button image for clickthrough button in left gutter

panels/left_gutter/images/logo_sizmek.png

Image asset for Sizmek logo

panels/left_gutter/images/close.png

The close button image for close button the left gutter.

panels/right_gutter/images/CTA.jpg

The button image for clickthrough button in right gutter

panels/right_gutter/images/logo_sizmek.png

Image asset for Sizmek logo

panels/right_gutter/images/close.png

The close button image for close button the right gutter.

 
Videos

The following video template files are included in the videos folder.

File Name

Description

panels/header/videos/video1.jpg

Image asset for video poster.

panels/header/videos/video1.mp4

Demo video in mp4 format.

Customizing Immersive Takeover Format in any HTML

All creative functionalities are programmed in the scripts/immersiveTakeover_script.js and you can include all your functions in other script file and load it from your HTML file. You only need to include the Adkit, the Immersive Takeover script and the Immersive Takeover style file.

Adding the essential files

To get the full Immersive Takeover experience in your project you will need the essential files in your main folder:

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

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

Make sure you load these files from the HTML file of your Banner and Panels

<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 modules you will use in each HTML, you can delete or add the "video" variable in your banner or panel assets EBModulesToLoad= [ 'Video','EBCMD','EBAPI'] depending on if you have a video or not.

it´s recomended to load the files from each panel using the parent relative path, example loading the files from a Panel:

<link rel="stylesheet" href="../../styles/immersiveTakeover_style.css"/>
<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>
 
How to load and initialize the Immersive Takeover

Before initializing the Immersive Takeover you only need to identify the "asset", depending on this option the banner or panel will load different functions and the behavior could be changed.

Example:

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

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

Options: "header", "left_gutter", "right_gutter", "background", "videoskin", "controls" or "standard" (in the case that you want to add a standard panel)s".

If it´s empty or undefined it will be like a standard panel.

 Video Example:

var config = {
panel: "videoskin",
videoWidth:1100,
videoHeight:416,
videoURL: "videos/video1.mp4",
videoPoster: "videos/video1.jpg"
};
var immersiveTakeover = new immersiveTakeover(config);

"videoWidth" &"videoHeight": In the case you want to use the "resizeVideo" function in a panel with video to get a good aspectRatio, you will need to set up the "videoWidth" and "videoHeight" of your video asset

Options: An integer value.

 

"videoURL": A string containing the source URL of the video desired or an array of strings if multiple codecs for the same video is required.

Options: Single source URL as a string, "videos/video1.mp4" or multiple sources/codecs as an array of strings, ["videos/video1.mp4", "videos/video1.webm", "videos/video1.ogv"]

Note: During video tag dynamic generation the file extension included in the source URL string will be used to generate the related videos source tag's "type" parameter value. EG: <source src="videos/video1.mp4" type="video/mp4">

 

"videoPoster": A string containing the source URL of the video poster image desired.

Options: Source URL as a string, "videos/video1.jpg"

 Example:

var config = {
panel: "controls",
initialPosition:"top-center",
expandedPosition:"top-center",
collapsedPosition:"top-right",
showDelay: 1000
};
var immersiveTakeover = new immersiveTakeover(config);

You can change the position of the controls panel of the three different states, using these options: top-left, top-center, top-right, bottom-left, bottom-center or bottom-right

When the VideoSkin is loaded "initialPosition" it will be shown in the top-center of the page by default.

When the VideoSkin is expanded "expandedPosition" it will be shown in the top-center of the page by default.

And When the VideoSkin is collapsed "collapsedPosition" it will be shown in the top-right of the page by default.

  

Each panel has the option to be shown with a different delay, you can change it using N milliseconds and modify the property "showDelay" in the config variable.

var config = {
panel: "videoskin",
videoWidth:1100,
videoHeight:416,
videoURL: "videos/video1.mp4",
videoPoster: "videos/video1.jpg"
showDelay: 1000
};
var immersiveTakeover = new immersiveTakeover(config);

 

Updating Header Panel

The header section of the index.html loads the essential stylesheets, the adkit API script and the creative javascript file. The header is responsive and adapts to any screen size using our templates. All the elements are placed in relative position and all of the properties are set in percentage so that elements appear correctly in all device sizes.

If frequency capping is set, the header will auto-expand and auto-collapse after few seconds, if the value mentioned within the mdAutoCollapseTimeout custom variable is greater than zero.

The header panel of the VideoSkin and ImageSkin are transparent and don'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 lines at your code to initialize the immersiveTakeover format:

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

The custom script will wait for other panels to load and once all of the panels have been loaded, the custom script will dispatch the following event 'afterShowPanelContent' to all panels notifying those panels to show their creative elements. Within the header script, once this event is received, certain creative elements will fade in. If you identify the asset 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.

If you are not using our templates, you need to include the essential files and you only need to add the following lines at your code to initialize the immersiveTakeover format:

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

or

var config = {
panel: "right_gutter"
};
var immersiveTakeover = new immersiveTakeover(config);
 
Updating Background

To customize the background panel, open the panels/background/index.html, panels/background/style.css and panels/background/script.js using an HTML-authoring environment.

The background panel of the VideoSkin template contains a static image and video.

If you are not using our templates, you need to include the essential files and you only need to add the following lines at your code to initialize the immersiveTakeover format:

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

or if you are using the video background option (videoskin)

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

All the panels have the same Callbaks for different events and you can use it if you need it

Callbacks for all panels (optional to use):

  • 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 clickthrough is fired all the panels will call this function and you can decide if you want to do something. For example: after clicktrought 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 recieve when the user scrolling up/down the percent of the scrollX and scrollY
function onPageScroll(args) { 
args.scrollXPercent;
args.scrollYPercent;
}

  

Adding a video

To add a video to your project you must provide a container div in which the actual video tag and source tag(s) will be injected. The video container div should not contain any child divs. No hardcoded video and/or source tags should be placed in the HTML document. The actual video tag and source tag(s) are dynamically generated from within the template script named immersiveTakeover_script.js. This allows the final tag(s) to be loaded into the DOM in a proper state per the desired functionality and environment. 

You can use these functions to initialize the video and video tracking. Callbacks, if utilized, are dispatched on the following video events; ready, play, pause, end and volume change. See the "Video Callback Functions" section below for further details.

  • To initialize the video
immersiveTakeover.initVideo(videoContainerRef);

The single parameter accepted by the immersiveTakeover.initVideo function is a reference to the element in which the dynamically generated video tag is to be injected. If no parameter is passed the script will automatically search for an element with an ID of "video-container" within the HTML DOM in question in which to inject the video.

<div id="video-container"></div>

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 holding the aspect ratio (you will need a Div container for your video element)
immersiveTakeover.resizeVideo(videoContainerRef);

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

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

When creating the "config" object listed below you may alter the default setup as required and per this document to optimize the settings for your use case. For instance you may change the "videoWidth" & "videoHeight" values per the aspect ratio of your video and to achieve the best resolution possible.

var config = {
panel: "header",
videoWidth:1100,
videoHeight:416,
videoURL: "videos/video1.mp4",
videoPoster: "videos/video1.jpg"
};

The Video Callback functions:

  • When the video is injected into the page and ready for function calls and interaction:
function afterVideoReady(args) { 
/* Implement code logic to fire when the video is ready for function calls and interactions */
}


Note:
It is recommended to capture a reference to the dynamically created video within the afterVideoReady callback function as this is the soonest point at which it will be available. The args parameter will contain a reference to the video which can be read via args.video. Please note the video reference is passed within the args parameter of all video related callbacks. Should one not require a reference to the video element outside of the video related callback functions, or at all, one need not capture said reference.

  • 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 doesn't supported the autoplay feature. So you can change the behavior 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) */

Note: Autoplay of the video will not be available in some unsupported devices/environments, such ad iOS9 and below. In this case the video will automatically default to click to play behavior regardless of the autoplay setting. Currently the only environments listed within the support matrix for this template, as seen in the "Supported Platforms" section of this document, which do not support autoplay video are iOS9 and Samsung browser version 6.

 

  • 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,"../../images/gutterLeft_background.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);

 

Configuring Layout Per Domain

Note: While the usage of domainConfig.js IS still allowed but it´s disabled by default, if you want to enable it you only need to delete the comments line in the index.html of the banner and create the domainConfig.js with your set up, usage of Programmatic Custom Variables is the preferred method going forward.

The domainConfig.js contains domain-related customization details, that allow you change both ad layout, and with publisher approval even the site layout per domain.  While this method has been deprecated in favor of using the Programmatic Settings, support does still exist in the format for domainConfig.js

How to enable this feature: You only need to load the domainConfig.js from "index.html" file in the banner

<script type="text/javascript" src="scripts/domainConfig.js"></script>

The following customizations are allowed using the domainConfig.js script, found within the scripts>domainConfig.js.  All customizations are also supported as (and, in fact, would be preferable to use via Programmatic Settings) Custom Variables.

Customization

Description

domainName

Domain name for which this setting will be applied. Just a subdomain and domain name is enough and not required a full domain url.

eyeDivZindex

Set z-index of eyeDiv that holds left gutter, right gutter and header panel.

contentSelector

Page content div reference to align left and right gutter.

headerSelector

Page header div reference to align gutter from top.

contentOffset

offset from total page content(default is 0)

headerOffset

offset from header (default is 0)

alignTopScroll

Align gutter to top if header goes out of view.

backgroundPlacementSelector

Page content div referend to push background panel.

siteStylesheet

URL for the site style sheet to push in page content header.

siteJavascript

URL for the javascript file that will be injected in page header.

backgroundZindex

Background panel z-index.

 Example:

var domainConfig = [{
   domainName: 'demo.sizmek.com',
   eyeDivZindex: 10,
   contentSelector: '#siteContainer',
   headerSelector: '#siteHeader',
   contentOffset: 0,
   headerOffset: 0,
   alignTopScroll: false,
   backgroundPlacementSelector: 'body',
   backgroundInjectType: 'Last',
   siteStylesheet: 'siteStylesheet/sizmek_demo.css',
   siteJavascript: 'siteJavascript/sizmek_demo.js',
   backgroundZindex: -1
}];

 

Important: If you need to have a single ad tag work across a network of sites, you will need to either edit the deprecated file domainConfig.js to set different properties across different publishers, or work with the Sizmek Ad Format Certification Team to ensure the custom variables are set as needed by publisher specifications across all intended sites.

Customizing an Immersive Takeover Video

All of the Immersive Takeover 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, style.css and script.js 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 Background

 To make the background panel appear in correct location, set the mdBackgroundPlacementSelector to a valid CSS selector. The background panel will then be moved from its original div to a reference div mentioned in the variable.  You can also use an additional property that handles how to place background panel in div. Check mdBackgroundInjectType for for more details.

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.

Configuring Header

Header panel align correctly in page content by accessing parent div in which placement tag is placed and if for some reason if it fails to read it, then fall back value from mdMinHeaderWidth custom variable will be used. mdHeaderHeightBreakPoints will define header collapse height for different viewport area.

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 Advertising Suite platform (MDX does not support the manifest file; the file is simply ignored).  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 Immersive Takeover

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 an Immersive Takeover in the Sizmek Platform

Set up in the MDX2.0 Platform

Procedure 
  1. Archive the Immersive Takeover workspaces into ZIP files, preserving the directory structure. You can do this with WinZip, 7Zip, or another archiving program.
  2. In the Sizmek MDX, under Creative Assets, create a new Workspace by uploading the ZIP file.
  3. Under the Ads section, create an ad using the workspace that you have uploaded.
  4. Set the Ad Format to Immersive Takeover 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 header panel, set panel name as 'header' and select index.html from panels/header folder. Set position type to 'Banner Relative' and Auto retract to 'Never'.
    • Add background panel, set panel name as 'background' and select index.html from panels/background folder. Set position type to 'Page Relative-Pixels' and Auto retract to 'Never'.
    • 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'.
  7. Uncheck 'Show single panel at a time'
  8. Set the frequency capping as per campaign requirement.
  9. Save the ad.
  10. Under the Advanced Features section, customize the Variables to your needs.
  11. Create a new placement for the ad.
  12. Fill out the form. Set the Placement type to In Banner and the Banner size to 1x1.
  13. After you've saved your placement, you can then generate preview tags to test on your web site.

Note: On the Sizmek Platform, your user account will need access to the Immersive Takeover format in the list of available custom formats.  If you do not have access to this format, please reach out to Support to gain permissions for this format.

Set up in the Sizmek Advertising Suite Platform

Procedure
  1. Archive the Immersive Takeover 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 Immersive Takeover 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 header panel, set panel name as 'header' and select index.html from panels/header folder. Set position type to 'Banner Relative' and Auto retract to 'Never'.
    • Add background panel, set panel name as 'background' and select index.html from panels/background folder. Set position type to 'Page Relative-Pixels' and Auto retract to 'Never'.
    • 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'.
  7. Uncheck 'Show single panel at a time'
  8. Set the frequency capping as per campaign requirement.
  9. Save the ad.
  10. Under the Advanced Features section, customize the Variables to your needs.
  11. Create a new placement for the ad.
  12. Fill out the form. Set the Placement type to In Banner and the Banner size to 1x1.
  13. After you've saved your placement, you can then generate preview tags to test on your web site.

 

Custom Script Notice: Since Immersive Takeover 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:false, 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

mdBackgroundPanelName

String

Background panel name as set on platform

background

mdBackgroundPlacementSelector

String

Div reference to inject background panel. A valid CSS selector should be present in this variable to successfully push background panel.

body

mdBackgroundInjectType

String

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

Last

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

mdHeaderExpandedHeight

Integer

Header panel expanded height

417

mdMinHeaderWidth

Integer

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

970

mdExpandFullScreenBelow

Integer

Expand header panel to fullscreen if viewport value is less than value mentioned in this variable

3000

mdAutoCollapseTimeout

Integer

Delay to auto collapse header pane when panel auto expands.

10

mdBackgroundZIndex

Integer

Background panel z-index

-1

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

mdControlPanelName

String

Controls panel name as set on platform

Note: Only for VideoSkin template.

controls

mdHeaderExpandPercentage

Integer

Header expansion percentage. If set to 100, header will expand to fullscreen by pushing page content outside. If set to value less than 100, some part of page content may be displayed at the bottom.

Note: Only for VideoSkin

100

mdPushdownAnimate

Boolean

Animate expand/collapse header panel. If set to false, header will immediate expand/collapse.

true

mdExpandAnimDuration

Integer

Time taken by header panel to expand animate.

1000

mdCollapseAnimDuration

Integer

Time taken by header panel to collapse animate.

1000

mdExpandCollapseAnimEasing

String

Easing for header panel expand and collapse animation.

Accepted values:

  • easeInCubic
  • easeInOutCubic
  • easeInOutQuad
  • easeInOutQuart
  • easeInOutQuint
  • easeInQuad
  • easeInQuart
  • easeInQuint
  • easeOutCubic
  • easeOutQuad
  • easeOutQuart
  • easeOutQuint
  • linear

easeInOutQuint

mdAutoExpandDelay

Integer

Delay auto expansion by value mentioned in this variable.

0

mdExpandToFullScreen

Boolean

Expand header panel to fullscreen.

Note: Only for VideoSkin template.

false

mdBackupImgPath

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

mdContentAlignment

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

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

mdAlignTopScroll

Boolean

Align gutters to top if header goes out of view.

false

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

mdLeftGutterMaxWidth

Integer

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

500

mdLeftGutterMinWidth

Integer

Left gutter minimum width.

100

mdRightGutterMaxWidth

Integer

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

500

mdRightGutterMinWidth

Integer

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/

mdParentLevelsToResize

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

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. 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:
enabled:false, 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: 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

enabled

You can enable or disable this feature. If it´s TRUE the background will be injected in the publisher's site

Default: false

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

expand_immersiveTakeover_auto

(Auto) When the header panel is expanded automatically

expand_immersiveTakeover_user

(User) When user click on the expand button

collapse_immersiveTakeover_auto

(Auto) When user click on the close button

collapse_immersiveTakeover_user

(User) When user click on the close button

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_background Clickthrough fired once the user clicks on the background panel.
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: August 6, 2018 (v1.5.1)

  • v1.5.1 The manner in which the video is added to the templates has been revised.  The video tag is now dynamically generated within the "initVideo" function of the "immersiveTakeover_script.js" file and injected into the panel. This allows for the video tag and source tag(s) to be loaded into the DOM in a proper state per the desired functionality and environment. Through this revision the environments in which autoplay video will function has been dramatically increased. All updates related to dynamic creation and injection of the video by the template is as follows;
    • The HTML document of panel in which the video is to be injected must contain a video container div, optimally with ID "video-container". This container should have no child elements.
    • The HTML document must not have any hard coded video or source tags.
    • The "config" object passed in as the parameter of the call to "new immersiveTakeover(config);" has been expanded to require the following two new key value pairs in the panel in which the video will reside.
      • videoURL:
        • "videos/video1.mp4", // For a single video codec.
        • ["videos/video1.mp4", "videos/video1.webm", "videos/video1.ogv"] // For multiple video codecs.
      • videpPoster:
        • "videos/video1.jpg",
    • The "initVideo" function call now takes a reference to the video container div as it's parameter. If no parameter is passed the "initVideo" function within the "immersiveTakeover_script.js" script file will attempt to locate a div with ID "video-container".
    • A new video callback has been added, named "afterVideoReady". This callback will fire off when the video has been injected into the panel and is ready for both function calls and interaction.
    • A new key, "video", has been added to the existing "args" object passed to all video related callback functions as their sole parameter. The value of this key is the dynamically created video element.  The earliest point at which the panel can gain a reference to the dynamically created video element is within the newly added "afterVideoReady" callback.
    • Minor updates to the naming of video and video container related variables has been performed in the "immersiveTakeover_script.js" file as well as the "script.js" file of the panel in which the video resides for consistency and clarity.
    • The "resizeVideo" function of the "immersiveTakeover_script.js" script file will now return without running any code if the dynamically created video is not yet available.
  • V1.5.1 Bug Fixs.
    • Corrected an issue where when "mdAlignTopScroll" is set the gutters are not re-aligning them selves as they should per "mdGutterTopPos" on scroll but did on resize and load.
    • Video - Corrected an issue related to the updated size and styles of the native video controls in Chrome desktop browser version 68 which led to the CTA overlapping the video controls as per it's current placement. Detection was aded for this browser/version.  When detected the CTA in question is re-positioned. Detection and repositioning is not active during local testing as the detection relies on platform variables which do not populate when the unit is in local testing mode.
    • Video - Corrected an issue where if one should click the video area where it is hot to trigger a call to video play while the panel is in the process of contracting, the call to play will be successful and the video will play while in the collapsed state. On video collapse complete, the template will check if the video exists and is not in a paused state. If both are true, the template will call video pause.
    • VideoSkin - Corrected an issue where if the expand/collapse animation is running while a user clicks the expand/collapse buttons, the button state will change but have no affect on the actual creative state. Subsequent expand/collapse button interactions can then also have no affect as the proper state has become out of sync.

Release: May 10, 2018 (v1.4.0)

  • v1.4.0 The custom format and all templates were renamed. The format was renamed from "Immersive Skin" to "Immersive Takeover" and some templates were renamed:
    • From "VideoWall" to "VideoSkin"
    • From "Image-Wallpaper" to "ImageSkin"
  • v1.4.0 The templates have been totally updated and the code was cleaned up, now it's non-coders friendly. You will find in the code only the basic functions (Callbacks) for specific events of the format for each panel which are optional to use. All the advanced functions are in a separate JS file "immersiveTakeover_script.js" which it´s not necessary to modify.
  • v1.4.0 New Header experience, the new custom variable mdHeaderSizeInheritence you can get a different behaviors of the header panel when is loaded on the content of the page. You can use the Breakpoints option like in the past but now you can use "browserWidth", "publisherContainerSize" and "adaptiveOnAuto" options.
  • v1.4.0 New easy method to synchronize all panels that now you can start an animation at the same time in all panels or sending "Strings" to any panel.
  • v1.4.0 Now you can add easily the Immersive Takeover experience in your projects made with Adobe Animate or from Scratch. You only will need to load this JS file "immersiveTakeover_script.js" and CSS file "immersiveTakeover_style.css" in your HTML file.
  • v1.4.0 When an image is injected to the publisher site without adding the background panel now you can do this image clickable without using transparent gutters as panels. The gutters will be created using a DIV element on the page. You only  will need to change the property "clickable” to “true" in the custom variable "mdPageBackground"
  • v1.4.0 A new feature was added that now examines the publisher page and finds the widest element so you can set your header panel to the same width automatically.  This is an experimental new feature that is being tested in certifications. (by default will be disabled)
  • v1.4.0 Some minor bugs were fixed
  • V1.4.0 the custom variable mdViewabilityTarget was removed. Now the ViewabilityTarget is assigned automatically

Release: June 29, 2017 (v1.3.0)

  • v1.3.0 VideoWall: Autoplay in mobile devices (excluding Android Native Browsers)
  • v1.3.0 Video, Non-Video(Sync) and Wallpaper: DomainConfig file has been removed from the templates
  • v1.3.0 New template (Image-Wallpaper): Background injection feature, basic (in CSS or Div) or using breackpoints
  • v1.3.0 New template (MSN): Special template for MSN. Like the 'ResponsiveSkin' format 
  • CustomScript v1.3.0: New method to inject a background image on the publisher's page with a new custom variable or from any template.

Bugfix: December 20, 2016 (Custom Script v1.2.2 -- workspace unchanged)

  • v1.2.1 only fixed instant loading ads, this bug fix release (v1.2.2) fixes both polite and instant for CSS/JS injection on Ad Load timing

Bugfix: December 9, 2016 (Custom Script v1.2.1 -- workspace unchanged)

  • Fixed bug related to CSS/JS injection on Ad Load timing

Release: November 10, 2016 (v1.2.0)

Workspace and Custom Script updated

  • Programmatic Support
  • Custom Backup Image (any size you want)
  • Asymmetrical Layout Support
  • Converted domainConfig.js vars to Custom Variables
  • Customized header injection location
  • Banner Viewability set to header panel can be customized

Release: July 12, 2016 (v1.1.0)

  • Two new templates Videowall and Wallpaper released with addition to old templates.
  • Header now pushes page content downside gradually and while collapsing page content will come back to its original location gradually. Header expand and collapse animation can be customised through custom variables.
  • Along with per domain CSS style sheet a javascript file can also be pushed in page through domain configuration file.
  • Local preview supported for panels.
  • Page scroll event can be listened inside creative javascript.

Release: Jan 20, 2016 (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
  • The Platform's preview is not very precise and you only will see the basic behavior of the format 
  • Autoplay feature will not be available in some unsupported devices. Currently the only environments listed within the support matrix for this template, as seen in the "Supported Platforms" section of this document, which do not support autoplay video are iOS9 and Samsung browser version 6.
  • On Ipad 11.3 after the first expansion the big play button will not shown, but you can play the video with the small one

 

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.

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

Comments