PRODUCT
Follow

Note

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

Create an Ad Using a Sizmek Ad Suite Template

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

Template

Pushdown_MultiPanel_2.2.0.zip

Multiple panel pushdown

Pushdown_MultiPanel_Video_2.2.0.zip

Multiple panel pushdown with video

Pushdown_SingleExpandable_2.2.0.zip

Single Expandable pushdown

Pushdown_SingleExpandable_Video_2.2.0.zip

Single Expandable pushdown with video

Demo

Preview demo

The Pushdown format is a multi-panel expandable. The default template comes with an auto panel and user panel; allowing the ad to open up a different panel with different content based on auto expand or user expand:

  • Expand Effect: Expands the panel to overlap the content of the webpage.

  • Pushdown Effect: Slides down the content of a webpage, moving elements out of the way to accommodate for the ad.

  • Fullscreen Pushdown Effect: Expands the panel over the entire viewport by pushing down the page content. Page contents must be wrapped within a single container right below the ad container in order to achieve the full screen pushdown effect.

  • Fullscreen Expand Effect: Expands the panel over the entire viewport.

Although, you can customize the Pushdown to any size, templates with common sizes are provided. Templates that expand to full screen use the entire space available in the browser while centering expanded content. The following sections provide the complete list of templates that are available.

Included Files

The following tables describe the list of files that are included in the downloadable templates. The asset files are the same for both templates; the only difference is the banner dimensions.

All of the Pushdown functionality is programmed in the template files. At a minimum, the only changes you will need to make are to the loaded image and video assets, and their respective styles.

HTML

File Name

Description

Required

index.html

HTML file for the banner.

Required

styles/style.css

Style sheet for the ad and its elements.

Required

pushdown_banner.js

Minified code required for the format.

Required

images/backup.jpg

Fallback image shown in unsupported browsers.

Required

Additional Files in the Video Template

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

File Name

Description

Required

videos/video.mp4

Temporary video that you should replace with your own video .

Required

videos/video.webm

webm video for Firefox.

Required

images/poster.jpg

Poster image for the 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 Pushdown.

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

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

define({
    "adFormatId": 10360
});

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 Creative.

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 ad.

Variables

Variable Name

Location

Description

Type

Editable

  • adDiv

  • bannerDiv

  • expansionDiv

script.js

Global variables used to define HTML objects.

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

divID

DOC_tick.gif

Functions

These functions are located in the script.js file.

Function Name

Description

initEB

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

startAd

Initializes the creative.

expand

Expands the ad. Do not rename or replace this function as it is sometimes called from the publisher.

collapse

Collapses the ad. Do not rename or replace this function as it is sometimes called from the publisher.

handleExpandButtonClick

Handles the expand button click.

handleCloseButtonClick

Handles the close button click.

handleClickthroughButtonClick

Handles the click-through button click.

handleUserActionButtonClick

Handles the user-action button click.

To change the duration of the expansion and collapse animation, change the collapseDuration and expandDuration variables. This time is measured in milliseconds, so a 1 second animation uses a value of 1000. If you do not want the expansion to animate, set the variables to 0.

Auto-Expand Frequency Capping

Many publishers and networks allow Pushdown to expand automatically once in a given time period. For example, you may be allowed to auto-expand once per day, or once per campaign. If you want this functionality, include the following script in the head of your HTML:

<script type="text/javascript" src="https://secure-ds.serving-sys.com/BurstingRes/CustomScripts/html5_auto_expand_frequency_capping_adkit.js">
</script>

You can then set your auto-collapse settings using JavaScript. The following code sets the ad to auto-expand once per campaign, then auto-collapse after 7000 milliseconds, or 7 seconds.

var autoExpandSettings = {
    isEnabled: true,
    frequency: EB.autoExpandFrequencyCapping.Frequencies.CAMPAIGN,
    expansionsPerPeriod: 1,
    timeUntilAutoCollapse: 7000
};

EB.autoExpandFrequencyCapping.initialize(autoExpandSettings);

Auto-Expansion Properties

You can set the following properties for auto-expansion.

Property

Type

Description

isEnabled

Boolean

Determines whether auto-expansion is enabled.

frequency

String

Determines the time period for auto-expansion, for example, per day, or per campaign.

expansionsPerPeriod

Number (integer > = 0)

Determines how many times the ad auto-expands in a given time period, for example, once per period, or twice per period.

timeUntilAutoCollapse

Number (integer > = 0)

The amount of time, in milliseconds, the ad can stay open before it auto-collapses. Many publishers require the ad to auto-collapse after 7-10 seconds.

Note

Note: You can omit this property to prevent the ad from auto-collapsing.

You can then pass these settings in an object into the EB.autoExpandFrequencyCapping.initialize function. At that time, the EB.autoExpandFrequencyCapping object determines if the ad should auto-expand. If the ad does auto-expand, the expansion is not tracked as a user expansion.

It is important to determine a period or frequency for auto-expansion. Some publishers allow you to auto-expand on a daily basis, while others allow you to auto-expand on a campaign basis. There are multiple constants you can use to set the frequency property. The constants are contained in the EB.autoExpandFrequencyCapping.Frequencies object.

For example, the constant for day is EB.autoExpandFrequencyCapping.Frequencies.DAY, and the constant for campaign is EB.autoExpandFrequencyCapping.Frequencies.CAMPAIGN.

Frequency Options

The following table shows the options available for frequencies.

Constant

Literal

Description

NEVER

never

Never auto-expand

SESSION

session

Auto-expand per session (per browser window or tab)

DAY

day

Auto-expand per day

WEEK

week

Auto-expand per week

CAMPAIGN

campaign

Auto-expand per campaign

UNLIMITED

unlimited

Auto-expand every time

You can set up callback functions to trigger when the ad auto-expands or auto-collapses. For example, you probably want to call a function to switch to the expanded panel graphics before the ad auto-expands, and switch to collapsed banner graphics after the ad auto-collapses.

Note

Note: You must set up these event listeners before you initialize the EB.autoExpandFrequencyCapping object.

Create a Subscription to Auto-Expand Event

Create a new EB.autoExpandFrequencyCapping.EventSubscription object, which passes an object containing a number of different properties into the constructor function.

Once the object is initialized, it will determine whether the ad should auto-expand immediately. The following code creates a subscription to the auto-expand event.

var beforeExpandSubscription = new EB.autoExpandFrequencyCapping.EventSubscription({
    eventName: EB.autoExpandFrequencyCapping.Events.AUTO_EXPAND,
    callback: switchToExpandedGraphics,
    callbackBinding: this,
    timing: EB.autoExpandFrequencyCapping.EventTiming.BEFORE}
);

EB.autoExpandFrequencyCapping.subscribeToEvent(beforeExpandSubscription);

eventName

Sets the subscription to occur when the ad auto-expands.

eventName: EB.autoExpandFrequencyCapping.Events.AUTO_EXPAND

The event names are constants in the EB.autoExpandFrequencyCapping.Events object, defined in the following table.

Constant

Literal

Description

AUTO_EXPAND

autoExpand

Auto-expansion event

AUTO_COLLAPSE

autoCollapse

Auto-collapse event

callback

Called when the event is fired. This can be any function you define. For example, in a function that you created, you may want to pass switching to the expanded panel graphics.

callback: switchToExpandedGraphics,

The callback function you define should not call EB.expand or EB.collapse. These functions are automatically called by the EB.autoExpandFrequencyCapping object. Therefore, including these calls in your callbacks is redundant and will result in inaccurate reporting.c

callbackBinding

Defines the scope that contains your callback function. In most cases, you will just want to use this as the callbackBinding. this represents your current scope.

callbackBinding: this,

The last property is the timing property, which determines whether your callback function is called before or after the event. For example, you may want to switch to your expanded graphics before the panel expands, or switch to your collapsed graphics after the panel collapses.

timing: EB.autoExpandFrequencyCapping.EventTiming.BEFORE}

The following table shows the timing constants, which are in the EB.autoExpandFrequencyCapping.EventTiming.

Constant

Literal

Description

BEFORE

before

Calls the callback function before the event occurs

AFTER

after

Calls the callback function after the event occurs

Pass Properties to the EventSubcription Object

The last step is to subscribe to the event by passing the object containing all of your settings into the EB.autoExpandFrequencyCapping.subscribeToEvent function.

EB.autoExpandFrequencyCapping.subscribeToEvent(beforeExpandSubscription);

The following table defines the properties to pass to the EventSubcription object.

Property

Type

Description

eventName

String

Event you want to subscribe to (expand or collapse)

callback

Function

Function you want to call when the event occurs

callbackBinding

Object

Scope of the callback function (usually just this)

timing

String

Determines whether the callback function is called just before the event or just after the event

Prevent Your Ad from Auto-Collapsing

On some occasions, you may want to prevent your ad from auto-collapsing, for example, if a user engages with content in the expanded panel. You may also want to prevent the ad from auto-collapsing if the user clicks collapse, and then expands again, before the auto-collapse time limit is reached.

You can use the following function to cancel auto-collapse:

EB.autoExpandFrequencyCapping.cancelAutoCollapse()

Before using this method in your ad, make sure that your publishers allow you to cancel auto-collapse. Keep in mind the following points:

  • Before initializing frequency capping settings, you must set up auto-expand and auto-collapse event listeners.

  • The frequency capping settings apply to each browser individually. For example, if the ad is set to auto-expand once per day, it will auto-expand once per day in each browser. If frequency capping is by session, then frequency capping is not shared between separate windows and tabs.

  • Do not call EB.expand or EB.collapse in the callback functions for the AUTO_EXPAND or AUTO_COLLAPSE events. These functions are already called in the script.

  • You can omit the timeUntilAutoCollapse variable from your frequency capping settings if you want the ad to remain open after it auto-expands.

Set Expanded Panel Dimension

EB.initExpansionParams(x, y, width, height); must be used with defined values in order for the Pushdown , which is based on the Single Expandable format, to expand with its correct panel dimension.

There is a EB.initPanelDimensions(x, y, width, height); in the template. This is for the Expandable Banner format. You can disregard this if using the Pushdown format.

Full-Screen Functionality

The full-screen banner templates use a function called EB._sendMessage to tell the ad to expand to full-screen. This function communicates with a custom script that resizes the ad container to the full size of the screen. This function call is as follows.

EB._sendMessage('resizecontainer', {width:'full',height:'full', x:'pageLeft', y:0, pushDown:true});

In the templates, this function is called within the goToFullScreenSize function. The following function is called to collapse the ad back to its original size. You can change the width and height properties as needed.

EB._sendMessage('resizecontainer', {width:320, height:50, x:0, y:0, pushDown:true});

You must apply a custom script to the ad in order for these function calls to work properly. For more information about applying this script, see Set up a Pushdown.

There is also a function called setMessageTerminal in the full-screen templates. This function listens for resize events and responds accordingly. For example, if the user rotates their device, it will scroll to the top of the ad after it resizes. On Android, it ensures the ad resizes properly.

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