PRODUCT
Follow

Note

Note: To learn more about this format, preview a demo, or to see build guides for other authoring tools, see About Interstitial .

Creating an Ad Using a Sizmek Ad Suite Template

When creating an Interstitial in a code editor, it is recommended that you start with our official templates.

Download the template, and then select the desired folder from the list of available dimensions and options.

You can also customize the dimensions according to your requirements. Everything can be personalized, including media controls of the video.

Included Files

The following table describes the list of files that are included in the downloadable template.

File Name

Description

Required

index.html

HTML file for the banner,

Required

config.js

Configuration/Manifest file for the ad. Used for actions such as default ad settings, and Dynamic Creative.

Optional

styles/reset.css

Resets the native styles of the browser so that the ad can look as intended.

Optional

scripts/script.js

JavaScript (logic and tracking) for the banner.

Required

scripts/localPreview.js

Script that enables local preview of the ad.

Does not require uploading

images/backup.jpg

Fallback image shown in unsupported browsers.

Required

panels/default/index.html

Default panel file.

Required

panels/default/styles/style.css

Style sheet for default panel creative.

Required

panels/default/scripts/script.js

Core script file required for default panel to load and initialize panel creative.

Required

panels/default/images/logo_white.svg

Logo image.

Optional

panels/default/images/background.jpg

Background image.

Optional

Additional Files for a Video Template

The following table describes the additional files that are included in a video template.

File Name

Description

Required

panels/default/images/poster.jpg

Poster image for the video.

Optional

panels/default/images/play_video_button.png

Play button for the video when ad served in MRAID apps (video template only).

Required

panels/default/videos/video.mp4

Ad video file

Optional

Setting up Your Ad in Sizmek Ad Suite

After you finish creating your ad, proceed to setting up your ad in SAS. For more information, see Set up an Interstitial.

The config.js file includes the manifest ad data. This file contains metadata used to configure the ad in SAS during the upload. For more information about the Manifest files, see Manifest Ad Data.

Additional Resources

Shared Libraries

If you are developing ads with 3rd party libraries, we recommend that you call these libraries from a CDN (Content Delivery Network) when possible. This will help improve loading time and caching.

Dynamic Creative Optimization

If you need to add dynamic creative optimization (DCO) elements to your creative, see Add Dynamic Elements to Your HTML Ads Using a Code Editor .

Advanced Configuration

The following tables provide additional variables and functions that are available for this format. You can use these additional items to fully customize your ad.

Variables

These variables are located in the panels/default/scripts/script.js file.

Variable Name

Description

Type

Editable

  • closeButton

  • userActionButton

  • clickthroughButton

  • video

  • videoContainer

Global variables used to define HTML objects.

Add, edit, or remove these variables as you modify HTML objects.

String

DOC_tick.gif
  • videoTrackingModule

  • SdkData

  • autoCollapseTimer

  • adId

  • rnd

  • uid

These variables store values that are necessary for the ad to run properly after the upload to SAS.

Important

Important: Do not make changes to these variables.

Boolean

DOC_cross_blue.jpg

Functions

These functions are located in the panels/default/scripts/script.js file.

Function Name

Description

Additional Code Allowed

checkIfAdKitReady

Checks to see if the AdKit is ready, and then proceeds to initialize creative.

DOC_tick.gif

initializeCreative

Initializes the creative.

You can add your own script if you want to run a script when the creative is initialized.

DOC_tick.gif

initializeGlobalVariables

Initializes the global variables for HTML objects. In the template, positionAdElements is also called to position the ad elements.

DOC_tick.gif

initializeCloseButton

Initializes the close button. Whether to display the close button is based on the serving environment and custom variable.

DOC_tick.gif

initializeVideo

Initializes the video based on the serving environment and custom variable. Determines how to serve the video object and add video tracking to the video module when possible.

DOC_tick.gif

addEventListeners

Adds all of the event listeners. In the template, the click event for the click-through and user action counter was added. In addition, the webkitendfullscreen event listener for iOS devices was added in order to handle some positioning issues when exiting the full screen video player.

DOC_tick.gif

creativeContainerReady

Invoked when creative container is ready, and starts the auto collapse timer.

You can add your own function if you want the function to trigger when the creative container is ready.

DOC_tick.gif

handleCloseButtonClick

Invoked to close the panel, and enable the page scrolling before the ad is collapsed. This function also pauses the video.

DOC_tick.gif

handleUserActionButtonClick

Click event handler for user action button. Calls and tracks the user action. This function also pauses the video .

DOC_tick.gif

handleClickthroughButtonClick

Click handler for the click-through button. Calls this function for the default click-through. This function also pauses the video.

DOC_tick.gif

pauseVideo

Pauses the video.

DOC_tick.gif

videoSliderHandler

Handles the event when a user moves the video slider.

DOC_tick.gif

fullscreenChangeHandler

Handles the event when a video enters or exits full screen.

DOC_tick.gif

startCollapseTimer

Starts the auto collapse timer.

DOC_tick.gif

stop timer collapse

Stops the auto collapse timer.

DOC_tick.gif

disablePageScrolling

Blocks page scrolling.

Note

Note: Ads prevent page scrolling by turning off the touchmove event. If your content uses the touchmove event, verify whether to set the custom variable mdLockScrollingWhenExpanded to No in order to allow page scrolling.

DOC_tick.gif

enablePageScrolling

Allows page scrolling.

DOC_tick.gif

preventDefaultEventHandler

Blocks the default behavior from any passing event.

DOC_tick.gif
Was this article helpful?
0 out of 1 found this helpful
Have more questions? Submit a request

Comments