PRODUCT
Follow

Note

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

Create an Ad Using a Sizmek Ad Suite Template

When creating a Single Expandable 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.

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.

Required

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.

Required

scripts/script.js

JavaScript (logic and tracking) for the banner.

Required

scripts/localPreview.js

Script that enables local preview of the ad in a browser without the need to upload the ad to SAS first. Provides a limited preview experience.

Optional

images/logo.png

SAS logo. Replace this logo with your own logo, or delete this image if it is not needed.

Optional

images/backup.jpg

Fallback image shown in unsupported browsers.

Required

panels/expandAuto/index.html

HTML file for the auto-expand panel.

Optional

panels/expandAuto/styles/style.css

Style sheet for the auto-expand panel and its elements.

Optional

panels/expandAuto/scripts/script.js

JavaScript for the auto-expand panel.

Optional

panels/expandUser/index.html

HTML file for the manual expand panel.

Optional

panels/expandUser/styles/style.css

Style sheet for the manual expand panel and its elements.

Optional

panels/expandUser/scripts/script.js

JavaScript for the manual expand panel.

Optional

Additional Files in the Video Template

File Name

Description

Required

videos/video.mp4

Temporary video that you should replace with your own video.

Required

images/background.jpg

Temporary background image for the banner that you should replace with your own background image.

Optional

images/play.svg

Play button for the video.

Required

images/poster.jpg

Poster image displayed in the video location in the banner before the video starts and after the video ends.

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 a Single Expandable.

Additional Resources

Prepare 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 Single Expandable. Verify that the config.js file contains the following JavaScript:

define({
    "adFormatId": 39
});

For more information, 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

Customization in HTML

All of the Single Expandable functionalities are coded within the template files. At a minimum, the only change you will need to make is to the image .jpg asset, the video .mp4 asset, and their respective styles and markup.

To update the layout and design of a template, open the index.html and style.css files in a text editor.

Resize Banner

To customize the dimensions of a main banner, update the style.css file to match your new size, and generate a default image for the ad. Upon ad setup in SAS, the dimensions of the default image will be used to set the size for the banner.

Resize Expansion

To resize the expansion, edit the .css and the EB.initExpansionParams() method's arguments. This method invocation is in the index.html.

Update the values of the arguments so that they fit the size of your expanded panel. For example:

if(0)EB.initExpansionParams(xPosition, yPosition, width, height);

When populated:

if(0)EB.initExpansionParams(140, 0, 300, 600);

And the line in the template's index.html file:

<script>if(0)EB.initExpansionParams(140, 0, 300, 600);</script>

Variables

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

Variable Name

Description

Type

Editable

  • bannerDiv

  • panelDiv

  • expandButton

  • clickthroughButton

  • userActionButton

  • video

Global variables used to select DOM elements.

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

String

DOC_tick.gif
  • isMRAID

  • SdkData

  • useCustomClose

  • 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_tick.gif

autoPlayVideo

Set this value to true so that the video auto-plays as soon as the panel expands. You can modify this variable from scripts/settings.js. (This variable is only available for the template that comes with the video.)

Boolean

DOC_cross_blue.jpg

useDefaultCloseButtonInMRAID

Set this value to true to use the MRAID default close button instead of the custom close button from template when panel expands. You can modify this variable from scripts/settings.js.

Boolean

DOC_tick.gif

Functions

These functions will be chain-triggered when the window is loaded and the AdKit API is ready (initiated by the checkIfAdKitReady function invoking initializeCreative). They are all 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

Not recommended

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

initializeVideoTracking

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

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 to handle some positioning issues when exiting the full screen video player.

DOC_tick.gif

handleExpandButtonClick

Click event handler function for the expand button. It also contains auto-play video functionality for video templates.

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

registerInteraction

If you add dynamic user interactions, make explicit calls to them 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 inside it, distorting the metrics.

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
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments