The immersive takeover format consists of a full-width expandable header, with left and right gutters that appear around the page content, as well as a full page wallpaper skin that appears behind the page content. The header, gutters, and background skin are responsive to different screen sizes. The header height can be configured to resize to different viewport breakpoints.
Responsive gutters are shown if there is enough space to display them to the left and right of the page content. They will not be visible when the ad is viewed on mobile or tablet devices.
The immersive takeover can be set as a simple image with a video in the header, or as a full video.
Note
Note: If your skin ad does not need to be responsive, build a standard banner (if below 300 KB with a single click as the interaction) or a rich media banner. For more information, see About standard banner and About rich media banner.
Note
Note: The About simple skin is another responsive skin with fewer options.
Note
Note: This format is not supported in unfriendly iFrames.
Click here to preview a demo of the immersive takeover format.
The immersive takeover can be set as ImageSkin (a simple image), Video (includes a video in the header), or as a VideoSkin (the skin is a full video).
All of these variations include the following capabilities:
-
Basic Cross Domain configuration using one ad (creative-level)
-
Affect the site with style (requires publisher approval)
-
Affect the site with script (requires publisher approval)
-
Inter-panel synchronization
-
Responsive
-
Mobile experience (gutters are hidden, different header expansion)
-
Scroll detection
-
Domain configuration via Domain config tool (f/k/a Programmatic)
-
Local preview
-
Uses AdKit (able to include DCO and Additional Assets)
-
Polite loading
None of these variations include the following capabilities:
-
Safeframe support
-
MRAID (In-app support)
The ImageSkin is an immersive takeover template with predefined options to inject an image to the background of the publishers page without the use of a panel in the background. There are three panels in the workspace, used solely for mouse events (mouse position and click-throughs):
-
LeftGutter (transparent)
-
RightGutter (transparent)
-
Header (transparent but with Amazon Ad Server logo and click-through button)
The template has no background panel.
Most of the logic is located in the header panel, where you can find different methods used to inject images or breakpoints / CSS to the publishers page.
You can inject an image in to the content of the publisher's page using a <div> element as a wrapper, or directly inject CSS to affect the background element of the publisher's page. The CSS injection process means creating several mediaQueries, which are injected automatically to the site when the ad is loaded, to achieve certain responsive behavior.
ImageSkin with a custom background image:
ImageSkin with a pattern using the repeat option:
The Video template is the basic template for the immersive takeover with a video in the header panel. There are four panels in the workspace:
-
LeftGutter
-
RightGutter
-
Background
-
Header
In the following example, the gutters have a logo and a click button. The background panel has an image that will appear as wallpaper skin spanning the background of the page. When the header is collapsed, you will see an image with a play button, the logo, and a clickthrough button. 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.
Video template when collapsed:
Video template when expanded:
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 five panels in the workspace:
-
LeftGutter (transparent)
-
RightGutter (transparent)
-
Background
-
Header (transparent but with the logo and click-through button)
-
Controls
The gutters are transparent and will be used to do click-through. The background panel shows the video in the size of the full browser. The video will be auto-played depending if the device is compatible with the autoplay feature. If not, the user must click the video to play. This template has a special panel. Controls, which you can use to play/pause the video, turn on/off the sound, or expand/collapse the banner.
Immersive Takeover - VideoSkin Collapsed:
Immersive Takeover - VideoSkin Expanded with Full-screen option enabled:
The immersive takeover is an advanced format which can be built as a workspace ad in AAS. A code editor of your choice is recommended as the best option.
|
Create |
Create the ad using a code editor. For more information, see Create an immersive takeover in a code editor. |
|
Set up |
|
|
Share |
Share your ad with your media agency. |
|
Specifications |
Dimensions |
Variable |
There are a variety of custom variables that determine the size of the ad. |
|
Maximum duration |
None |
The publisher or the media technology (for example, DSP) determine the max duration. IAB recommendation: 30 seconds |
|
|
Maximum size |
10 MB |
If your ad does not require any of the format's features, consider building a Rich Media Banner. For more information, see About rich media banner |
|
|
Tag type |
In-Banner |
For more information about tag types, see Amazon Ad Server ad formats. |
|
|
Compatibility |
Device |
Limited |
Examples include web, mobile web, in-app. |
|
Publisher Certification |
Publisher Certification web |
Mandatory |
For more information, see About publisher certifications. |
|
In-app |
N/A |
||
|
Programmatic |
Recommended |
||
|
Measurements |
Available metrics |
Examples include:
|
For more information about metrics, see Glossary: dimensions and metrics for Aggregated Reports. |
Comments