PRODUCT
Follow

Introduction

Overview

The Interstitial format is a full-screen ad format that launches before displaying a publisher’s content page or may also be triggered from interacting with the publisher’s site. The Interstitial uses an overlay that resizes to the dimensions of the screen and optionally disables user scrolling of the publisher page.  Currently some of the basic templates support fixed-size content while other templates support adaptive content. For the adaptive Interstitial, these templates support device rotation so that the ad content adjusts to the size of the screen as the orientation is changed. Alternate content may also be swapped in during orientation changes. The Interstitial also can be customized to collapse after a certain amount of seconds if the user is not interacting with the ad contents.

The Ad Builder - Interstitial is the Ad Builder version of the Interstitial. The workspace version is a separate custom format and has added functionality that can be found by referencing the table below. If interested please check the workspace's build guide. Workspace templates give you greater flexibility to adapt the code and program additional customizations while Ad Builder templates provide ease of use. The templates available within these alternate environments may be slightly different, so make sure you use the one based on your needs. The different templates are described below, but check back frequently since new templates are expected to be added.

Ad Builder Templates

There are four flavors of the Interstitial format that are currently available on Ad Builder. Below table shows available Ad Builder templates.

Template Name

Video

Banner Size

Default Panel Dimension

Overlay Size

Basic Mobile Interstitial

Yes

1x1

Full-Screen

300x250

Basic Desktop Interstitial

Yes

1x1

Full-Screen

600x600

Responsive Mobile Interstitial

Yes

1x1

Full-Screen

Responsive

Advanced Responsive Interstitial

Yes

1x1

Full-Screen

320x356, 480x215

 

Both of Basic Mobile Interstitial and Basic Desktop Interstitial templates are full-screen, but with fixed size overlays.  By default, the overlay size will be 300x250 for Basic Mobile Interstitial and 600x600 for Basic Desktop Interstitial.  The overlay size can be changed easily from Ad Builder. Responsive Mobile Interstitial also starts with a 300x250 overlay and the overlay will be resized to fit within the browser based on its aspect ratio. Advanced Responsive Interstitial come with two fixed size overlay, one for portrait (320x356) and one for landscape (480x215), and will automatically switch the mode based on the browser dimension. By default, the portrait overlay shows when the browser width is less than 480 pixels, the landscape overlay shows when the browser width exceeds 479 pixels. All the Interstitial templates optionally disable user scrolling of the publisher page and optionally collapse after a certain amount of seconds if the user does not interact with the ad.

The illustration on the right shows the Basic Mobile Interstitial.  It includes includes a video, close button, user action button, and a click-through button:

 

 basic_mobile_portrait_crop.png

The illustrations below show the look for Basic Mobile, Responsive Mobile, and Advanced Responsive in portrait and landscape mode.

Basic Mobile Interstitial

Responsive Mobile Interstitial

Advanced Responsive Interstitial

 basic_mobile_portrait.png  responsive_mobile_portrait.png  advanced_responsive_portrait.png

Basic Mobile Interstitial

basic_mobile_landscape.png

 Responsive Mobile Interstitial

responsive_mobile_landscape.png

Advanced Responsive Interstitial

advanced_responsive_landscape.png

 

The templates available may be slightly different, Below table shows functionality difference between different Ad Builder templates and workspace templates 

Interstitial Functionality

Ad Builder Basic

Ad Builder Responsive

Ad Builder Advanced

Workspace

One fixed size overlay

Two fixed size overlay for portrait and landscape

Responsive overlay

Option to turn off auto collapse

Option to enable user scroll

Option to use MRAID SDK to play video

Option to use MRAID default close button

*

*

*

**

Sizmek Advertising Suite Support


* via Ad Settings from Ad Builder

** via Custom JS Var mdEnableSDKDefaultCloseButton.

 This format includes a fully “domain configurable” / "Liquid Framework" solution. For more information on the domain configurable formats in general, and how to preview the different certified settings, please see Domain Config Solution for Custom Formats

Demos

The following table provides links to the demos for the Interstitial format.

Demo

Preview 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, MRAID Apps

iPad

iOS 9.0 and later, MRAID Apps

Android Phone

Android 6.0 and later, MRAID Apps

Android Tablet

Android 6.0 and later, MRAID Apps

Format Properties

Listed below are common properties available to the format.

Feature Supported
Polite Loading
Safeframe Support
MRAID (in APP Support)
AdKit ready 1
Programmatic (One-Tag Solution)
Secure Serving
Sizmek Advertising Suite Support
Ad Builder Templates Available

 1 Allows for DCO Support as well as Additional Assets.

Note: This format uses the HTML5 Expandable Banner as the base format.

Implementing an Interstitial in Ad Builder

Setting Up a New Ad in Ad Builder

The Interstitial format is available on Ad Builder.

  1. To access the Interstitial format template on Ad Builder, click Template Gallery from the Ad Builder Welcome screen.
    template_gallery_button.png
  2. Click on Format tab, You should be able to find HTML5 Full Screen Expandable format from the template list. 
    adbuilder.png
  3. To create a new ad, simply select a template and then click on Create. The new ad will start with a Master_Banner and default panel, Banner and panel layers will be shown in left section of Ad Builder tool. Below image show Basic Interstitial Ad with panel creative content in view.adbuilder1.png
  4. Select the Master_Banner is 1x1 and set to auto expand panel on load. Below image show event that tiger panel to expand full screen. To view this setting, Select Master_Banner and open Action & Animations panel.

adbuilder_panel.png

After you have completed editing your ad, click Save to upload the ad to Sizmek MDX platform and preview your ad. 

Customizing the Interstitial in Ad Builder

You may remove or replace any existing component in the template with your own creative assets. However, there are some things you need to be aware of:

Removing the video

If you wish to remove the video component, please make sure you go to the Actions & Animations for each button and remove ”Pause: video-container” action from Tap/Click event.

Changing the close button

With Ad Builder, you should be able to style your own close button by using component Properties, but if you are removing the default close button and adding a close button, please make sure you go to the Actions & Animations and add the following action to Tap/Click event:

  • Expandable – Collapse, and select a panel target (default or the other name if you have made change to the panel name)

If your ad contains video, it is recommended to add the following action prior to the Collapse action so the video can be paused when the panel collapses. Normally we will also make the Collapse action start 200ms after the Pause action.

  • Video Action – Pause, and select a video target (video-container or the one you create)
Bring Responsive Mobile Interstitial to large scale screen

The Responsive Mobile Interstitial is suitable for most of the mobile phones on the market. If you wish to bring this template to large scale screen such as iPad or Android Tablet, you may use Responsive Mobile Interstitial template and enlarge the panel overlay dimension, please remember to leave the Responsive Panel option checked from panel properties so you can get responsive effect.

Making changes to Advanced Responsive Interstitial

By default, when you open the Advanced Responsive Interstitial, you will see the panel is made in portrait mode. Switching between portrait and landscape is handled through CSS media query. To view implemented media query select responsive-media-query HTML component in panel.

adbuilder_css_panel.png

This component is placed at top left corner of panel and placed out of panel view so that it will not be visible once panel is expanded. Ad Builder does provide a support to implement a custom CSS and that is through HTML component. Since this component doesn't contain any image assets and only CSS, it is placed out of panel so when panel expands CSS will be executed. To view media query, double click on component or select "Open Code Editor" from property panel.

adbuilder_css_panel1.png

Clicking on "Open Code Editor" will open editor popup that contains custom CSS.

adbuilder_css_panel2.png

There are two media query breakpoint for each screen size. Media query for portrait is with 479px break point and media query for landscape is with 480px break point. This media query resize various components like Close button, User Action button and Click Through button. In addition to resizing components you will also see that media query is resizing adkit-container. This is the container that holds all the component and make the panel. Custom CSS media query resize this container to portrait or landscape view based on viewport size.

If you are adding, editing or removing any component from the panel, that behave differently in Portrait and Landscape view then you need to implement a CSS logic for same in responsive-media-query HTML component under respective media query break point. So whenever that breakpoints media query executes, your component related custom CSS will be executed.

Note: CSS knowledge is required if you are planning to use Advanced Responsive Interstitial template

Restrictions & Important Notes

  • The Interstitial format supports the following components, using any other components from Ad Builder may result in the auto snap functionality not working properly:
    • Image
    • Button
    • Video
    • Text
    • Hotspot
    • Shape
  • The Interstitial format supports one panel by default. It is not suggested that you create multiple panels with the Interstitial format.
  • The default panel in the template loads the required JavaScript using onLoad event. Please do not remove it or edit the JavaScript.
  • The auto expand and frequency capping option from ad settings on MDX platform is not working properly with the ad builder templates, please avoid to use those options.

Common Customizations

Disable Auto Collapse

To disable auto collapse, please go to the Advanced tab in Ad Settings on Sizmek MDX and change the custom variable mdTimeUntilAutoCollapse to 0.

Enable User Scroll after Panel Expanded

To enable user scroll, please go to the Advanced tab in Ad Settings on Sizmek MDX2.0 and change the custom variable mdLockScrollingWhenExpanded to "No".

Setting up Interstitial in the Sizmek Platforms

Setting up Interstitial in the Sizmek MDX2.0 Platform

Once you have saved the ad to the platform, you can now use the settings from the Platform to setup your ad.

  1. Go to Ad Settings on MDX2.0 platform.
  2. For the Panel Settings, please make sure Show Single Panel at a Time is selected and Auto Expand Default Panel when Ad is Loaded is not selected.
  3. Set Default Panel Frequency to unlimited or the desired settings.
  4. Save the ad.
  5. Create a new placement for the ad.
  6. Fill out the form. Set the Placement type to In Banner and the Banner size to 1x1.
  7. After you’ve saved your placement, you can then generate preview tags to test on your web site.

Note: Custom Script Notice Since the Interstitial 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_AdBuilderInterstitial.js

Setting up Interstitial on Sizmek Advertising Suite

Once you have saved the ad to the platform, you can now use the settings from the platform to setup your ad.

  1. Go to Ad Settings in the Sizmek Advertising Suite.
  2. For the Advanced Panel Settings, please make sure Overwrite Creative Settings: Always auto-expand under Auto-Expand is selected.
  3. Set Panel Frequency to Unlimited.
  4. Make sure Show Single Panel at a Time under Multiple Panels is selected.
  5. Save the ad.
  6. Create a new placement for the ad.
  7. Fill out the form. Set the Placement type to In Banner and the Banner size to 1x1.
  8. After you have saved your placement, you can then generate preview tags to test on your web site.

Note: Custom Script Notice Since the Interstitial 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_AdBuilderInterstitial.js

Custom Variables

Custom Variable Definitions

Variable Name

Type

Description

Default Value

mdRemoveAdAfterCollapsed

Boolean

Declare if need to remove the ad after panel collapses. Available options are:

Yes: remove 1x1 banner after panel collapsed

No: keep 1x1 banner after panel collapsed

Yes

mdInteractionsCancelAutoCollapse

Boolean

Declare if need to cancel panel auto collapse upon user interacts with the ad contents. Available options are:

Yes: cancel panel auto collapse when user interacts with ad contents.

No: always auto collapse panel despite of user interacts with ad contents or not.

Yes

mdLockScrollingWhenExpanded

Boolean

Declare if the publisher page should be locked for scrolling when panel expands. Available options are:

Yes: lock the scrolling for publisher page when panel expands

No: do not restrict scrolling for publisher page when panel expands

Yes

mdAutoCollapseTimer

Integer

Declare the display duration for the panel before auto collapse in number of milliseconds. You can also set this variable to 0 to disable auto collapse.

7000

mdEyeDivZIndex

Integer

Set eye div z-index.

10000

mdIsDomainConfigEnabled

Boolean

Set ad to load with domain configuration.

No

mdProgSettingsFolderPath

String

Path to the folder of the settings files, not including protocol

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

mdAutoRepositionInterval

Integer

Repositions all panels every N milliseconds. if set to 0, automatic repositioning is disabled.

0

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. For example, if this custom var were set to "images/300x250_Default.jpg," then a file would attempt to be loaded from the images folder. You must be sure this file exists in the workspace. When set to undefined, the normal 1x1 fallback occurs.

undefined

mdParentLevelsToResize

Integer

This variable is only used when the ad is serving a default image. When set to any value over 0, this number of publisher parent elements of our tag will be resized to the default image size, if they are smaller than the default image serving.

0

Reported Custom Interactions

Currently, there are no custom interactions reported in the template, however, ad developers can always add their own custom interactions by using the following call: 

EB.userActionCounter(); 

Change Log

September 17, 2018

  • Fixed, Console error appear when video is removed.

March 16, 2018

  • Ad Builder templates re-released with Ad Builder specific custom format "Ad Builder - Interstitial". Workspace template supported under "Interstitial" custom format.
  • Custom close button removed and Ad Builder close button added.
  • Liquid framework support added. 

April 4, 2017

  • Advanced Responsive Interstitial template has been updated with minor bug fixes.

March 16, 2017

  • Video component has been updated in all Ad Builder Templates.
  • Supports video auto play on mobile devices.
  • Fixed issue related to panel auto collapsing even when user inter.

January 19, 2017

  • Released Ad Builder Templates for Sizmek Advertising Suite.

April 14, 2016

  • Initial release 

Known Issues

The following Known Issues would require updates from the Ad Builder team.

  • EDGE, Video doesn't resize to original dimension on returning back from full screen.
  • iOS9, 10 and native android browser, Video doesn't play in full screen and is left aligned.
  • Full screen button not showing in Samsung Galaxy tab 4.4.2 native browser.
  • Video not centre aligned in Ad Builder Advanced Responsive Interstitial template.
Was this article helpful?
2 out of 3 found this helpful
Have more questions? Submit a request

Comments