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.

VideoSkin Template

The VideoSkin template is the advanced template for the Immersive Takeover with a video in the background panel which will be loaded behind of the content of the page. There are 5 panels in the workspace:

• LeftGutter (transparent)
• RightGutter (transparent)
• Background
• Header (transparent but with Sizmek logo and clickthrough button)
• Controls

The gutters are transparent and only they will be used to do clickthrough. Background panel shows the video with full browser size and it will be autoplayed depending if the device it´s compatible with the autoplay feature, if not the user will need to click the video to do play. This template has a special panel "controls" which you can use to do play/pause the video, turn on/off the sound or expand/collapse the banner. 

Immersive Takeover - VideoSkin Collapsed

Immersive Takeover - VideoSkin Expanded with Fullscreen option enabled

Immersive Takeover - VideoSkin when is clicked

Demos/Downloads

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

Supported Platforms

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

Features

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

Implementing an Immersive Takeover Format

Workspaces

Essential files to use in any project

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

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 VideoSkin Template Files

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

HTML

The following HTML template files are included.

Styles

The following CSS template files are included

Scripts

The following JavaScript template files are included

Images

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

Videos

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

Customizing Immersive Takeover Format in any HTML

All creative functionalities are programmed in the scripts/immersiveTakeover_script.js file and you can include all your functions in other script file and load it from your HTML file. You only need 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 to initialize 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)

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

 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 VideoSkin

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'.
   • Add controls panel (if VideoSkin template selected), set panel name as 'controls' and select index.html from panels/controls 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'.
   • Add controls panel (if VideoSkin template selected), set panel name as 'controls' and select index.html from panels/controls 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 Variables

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

{"automaticDetection": true}

Inject a background image on the publisher's page

It´s possible change the body or a specific element in the DOM of the page to inject your background image. You can use a simple background or you can setup a advance setup using breakpoints to select when you want load a specific background. For example you will be able to have a background for mobile devices in portrait mode or for low/higth resolution.

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.

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.

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

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"
}]

 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:

Example:

{"automaticDetection":true,
"search":"div","horizontalTreshold":"300,1800",
"avoid":"header,footer,dfp,google,input,search,hide,nav,fb,module,column",
"priority":"#container,#wrapper,.container,.wrapper,.main,#main"}

Custom Interactions

The following custom interactions are reported by the ad and can be reviewed in Sizmek reporting (besides standard ad interactions).

Change Log

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