PRODUCT
Follow

Note

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

Creating an Ad Using a Sizmek Ad Suite Template

When creating a Rich Media Banner in a code editor, it is recommended that you start with our official template.

Download the template, and then select the desired folder from the list of available dimensions and options (classic or video).

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

styles/style.css

Style sheet for the banner and its HTML elements.

Optional (if code is included in the HTML file)

scripts/script.js

JavaScript (logic and tracking) for the banner.

Required

scripts/localPreview.js

Script that enables local preview of the ad.

Optional

images/backup.jpg

Fallback image shown in unsupported browsers.

Required

Additional Files for a Video Template

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

File Name

Description

Required

scripts/settings.js

Settings file that contains key variables used to make customizing the template easier.

Rich Media Banner includes an autoPlayVideo variable that you can customize in the settings. This variable is only applied to the templates that include video.

Optional (if code is included in the HTML file)

videos/video.mp4

Temporary video that you should replace with your own video.

Required

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 a Rich Media Banner .

Additional Resources

Preparing for Bulk Upload

If you are planning to upload multiple ads, make sure that the Ad Creation Wizard in SAS recognizes your workspace as a Rich Media Banner. Verify that the config.js file contains the following JavaScript:

define({
    "adFormatId": 38
});

For more information about uploading ads in bulk, see Set up Multiple Ads Using Ad Creation Wizard.

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, functions, and methods that are available for this format. You can use these additional items to fully customize your banner.

Variables

Variable Name

Location

Description

Type

Editable

  • bannerDiv

  • clickthroughButton

  • userActionButton

  • video

index.html

Global variables used to select tags in the HTML file.

Add, edit, or remove these variables as you modify elements in the index.html.

div ID

DOC_tick.gif

autoPlayVideo

settings.js

Set this value to true if you want the video to play automatically as soon as the banner loads.

You can modify this variable in scripts/settings.js .

Note

Note: autoPlayVideo is only available in the video template.

var boolean : true, false

DOC_tick.gif
  • sdkData

  • adId

  • rnd

  • uid

  • isMRAID

script.js

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.

where

DOC_cross_blue.jpg

Functions

All functions are located in the 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_cross_blue.jpg

initializeCreative

Initializes the creative.

DOC_tick.gif

initializeGlobalVariables

Initializes the global variables for HTML elements.

DOC_tick.gif

initializeVideoTracking

Initializes video tracking by creating a new instance of EBG Video Module. It also contains auto-play video functionality in video templates.

DOC_tick.gif

addEventListeners

Adds all the event listeners. In the template, the click event for the click-through and user action counter was added.

DOC_tick.gif

registerInteraction

For dynamic user interactions, make explicit calls to these interactions here, but never call this function. SAS will read from this function to register possible interactions. If this function is invoked, it will track all of the interactions defined within the function. Metrics will not be accurate.

DOC_tick.gif

handleUserActionButtonClick

Click event handler for user action button.

DOC_tick.gif

handleClickthroughButtonClick

Click handler for the click-through button.

DOC_tick.gif

pauseVideo

Pauses the video.

DOC_tick.gif

Additional Methods

The SAS HTML API provides a set of methods, such as user interactions, automatic interactions, and timers that you can use in your code. For more information about these methods, see Methods.

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

Comments