PRODUCT
Follow

Note

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

Creating an Ad Using a Sizmek Ad Suite Template

When creating a Page Peel in a code editor, it is recommended that you start with our official template, which is available here:

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.

Optional

images/backup.jpg

Fallback image shown in unsupported browsers.

Required

panels/peelad/index.html

HTML file for the Peel ad panel.

Required

panels/peelad/styles/style.css

Style sheet for Peel ad panel.

Required

panels/peelad/styles//script.js

Script for Peel ad panel, including functionality and tracking code.

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

panels/peelad/videos/video.mp4

Temporary video that you should replace with your own video.

Required

peelad/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 Page Peel.

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

Bulk Upload

For the SAS Ad Creation Wizard to recognize your Workspace as a Page Peel, verify that the config.js file contains the following:

define({
    "adFormatId": 10360
});

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

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

Description

Type

Editable

mdPeelTabAnimationEnabled

Enables/disables the peel tab startup animation.

Boolean

DOC_tick.gif

mdPeelTabAnimatedTimes

Defines how many times the peel tab should animate in startup animation. Set to 0 for unlimited.

Integer

DOC_tick.gif

mdPeelTabAnimatedTimeFrame

Defines the duration, in seconds, of one peel tab animated in start-up animation.

Float

DOC_tick.gif

mdPeelTabAnimatedAmount

The number of pixels that the peel tab should animate in startup animation. The maximum is the size of the template, 50 px or 100 px.

Integer

DOC_tick.gif

mdPeelTabType

The type of the peel tab. Types include the following:

  • image: Prepare a png image for the peel tab and set the path in the mdPeelTabImageSource custom variable.

  • css: Provide the peel tab color in the mdPeelTabColor custom variable.

String

DOC_tick.gif

mdPeelTabImageSource

Relative path for the peel tab image.

Only applies when the mdPeelTabType set to image.

String

DOC_tick.gif

mdPeelTabColor

Color name or HTML hex color that determines the color for the peel tab.

Only applies when the mdPeelTabType set to css.

String

DOC_tick.gif

mdPeelTabShadowColor

Defines the peel tab shadow color and shadow opacity.

This variable uses the following format:

rgba(Red, Green, Blue, Opacity)

For example, rgba(0, 0, 0, 0.2) sets the peel tab shadow to black with a 0.2 opacity.

String

DOC_tick.gif

mdPeelTabShadowOffset

Number of pixels for the offset of the peel tab shadow.

Integer

DOC_tick.gif

mdPeelTabShadowAmount

Size of the peel tab shadow.

Integer

DOC_tick.gif

mdPercentageForFullyPeelOff

Percentage of the long edge of the browser that the peel tab should fully peel off when peel exceeds the value declared in that variable.

Integer

DOC_tick.gif

mdFastSwipePeelOffEnabled

Enables/disables fast-swipe to completely peel. This option determines if the peel tab should peel off completely when user's mouse (or finger) swipes fast, even when it does not exceed the percentage of the long edge of the browser.

Boolean

DOC_tick.gif

mdDesktopDragToPeelEnabled

Enables/disables mouse-drag on the peel tab to peel the page on desktop browsers. When disabled, user can still click the tab to peel the page.

Boolean

DOC_tick.gif

mdParentLevelsToResize

This variable is only used when the ad is serving a default image.

When set to any value over 0, the number of publisher parent elements of our tag resizes to the default image size, if they are smaller than the default image serving.

Integer

DOC_tick.gif

mdBackupImgPath

Relative path to the backup image, if a custom image is required. This path displays an image that is not a 1 x 1, even though the tag is a 1 x 1 tag.

For example, if this custom variable is set to images/300x250_Default.jpg, a file loads from the images folder. You must be sure this file exists in the workspace. When set to undefined, the normal 1 x 1 fallback occurs.

String

DOC_tick.gif

mdAutoRepositionInterval

Ad resize/reposition interval. Use 0 to turn off the interval.

The ad attempts to resize itself every "n" milliseconds. Even with this value set to 0, the ad will always attempt to resize itself upon browser resize, browser scroll, or orientation change. This variable adds an interval by which to attempt to resize/reposition.

Number

DOC_tick.gif

mdIsDomainConfigEnabled

Determines whether to load the programmatic settings.

Boolean

DOC_tick.gif

mdProgSettingsFolderPath

Location from which to load the programmatic settings files.

String

DOC_tick.gif

mdEyeDivZIndex

Sets eye div z-index.

String

DOC_tick.gif

mdAutoCollapseTimer

Determines the number of seconds after which the auto-expand panel closes.

Number

DOC_tick.gif

mdInteractionsCancelAutoCollapse

Variable only used when there is an auto expand panel. If there is a user interaction, the panel will not be closed.

Boolean

DOC_tick.gif

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.

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

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

DOC_tick.gif

registerInteraction

When adding dynamic user interactions, make explicit calls to them here, but never call this function. SAS reads from this function to register possible interactions. If this function is invoked, it tracks all of the interactions defined inside it, distorting the metrics.

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

handleResize

Handles the browser resize event. In the template, it calls positionAdElements to reposition the ad elements.

DOC_tick.gif

doBeforeFullyPeelOff

Triggered before the ad fully peels off. You can add the required code to do before the ad fully peels off.

DOC_tick.gif

doAfterFullyPeelOff

Triggered after the ad fully peels off. You can add the required code to do after the ad fully peels off.

DOC_tick.gif

stopVideo

Pause the video. This function also has rewind video to starting point option by adding the parameter in the function call.

DOC_tick.gif

showContent/hideContent

Show/hide the elements, for example, the Close button.

DOC_tick.gif

showClickThroughButton/ hideClickThroughButton

Show/hide click-through button function.

DOC_tick.gif

showVideo/hideVideo

Show/hide video function.

DOC_tick.gif

peelTabPosition

Changes the preview icon to a different position automatically, depending on the setup in the panel settings in SAS.

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