PRODUCT
Follow

Overview

The Page Peel is an HTML5 format that allows a user to peel publisher content away and expose a full-screen ad underneath the page's site.  An eye-catching peel animation is shown as the user clicks on or drags the corner peel to show ad content (with the mouse on desktop or finger on touch screen).  By default, the Page Peel format will display the peel tab in the lower left corner, but the peel can be customized to be shown in any of the four corners.  

On page load, the page peel partially auto-animates three times (or any customizable number) to catch your attention.  Belonging to the family of adhesion-like formats, the page peel will continue to maintain its corner position as the user scrolls... enhancing ad visibility.  Although not required, a small snippet of ad content is shown underneath the default peel to expose a portion of the advertiser's message and draw the user's attention. The size of the peel is completely customizable so smaller or larger peels may be displayed.

Although Page Peel is designed to work on mobile and tablet devices, it will also work on major desktop browsers as well.

The Peel tab on initial ad load with the peel appearing in the lower left hand corner of the page. It´s possible to change the position of the Peel tab using the Panel settings in the Platform.

 peelTab_initial.png 

The left image shows what the peel tab would look like as the user is dragging the peel open while the image on the right shows the effects of the peel action being complete with the full-screen ad content displayed.

 peelTab_drag.png                 peelTab_peelOff.png

Portrait Mode

 

 

peelTab_PeelOff_LandScape.png

Landscape Mode

 

When the user closes the ad content, a reverse peel animation is shown with the page content re-emerging to cover the ad content.  The peel will return to its default corner with the user being able to trigger the ad again at any time. 

This format includes a "domain configurable" solution.  This allows one tag to be served across different domains, where Certification and Support can use the "Domain Settings Admin Tool" to change custom variables, JavaScript and CSS on specific domains, so a single tag can work everywhere as expected. (Note: This has previously been referred to as a "programmatic" solution, but is more appropriate for PMPs and smaller networks that have been certified with Sizmek)  For more information on the domain configurable formats in general, and how to preview the different certified settings, please see Domain Config Solution for Custom Formats.

Demos/Downloads

The following table provides links to the template and demo for the Page Peel format.

Template

PagePeel_Video_2.0.0.zip

Demo

Preview demo

Templates Overview

Workspace

Video

Default Image Dimension

Peel Tab Dimension

PagePeel_Video_2.0.0.zip

Yes

1x1

100x100

 

Supported Platforms

Platform

Supported Versions

iOS iOS 9 and later
Android Android 4.4 and later
Internet Explorer 10.0 and later
Firefox Recent versions
Chrome Recent versions
Safari (Mac) 7.0 and later

 

Note: Supported in mobile browsers only and not in Apps. 

 

Features

These are the key features of the Page Peel format.

Feature

Supported

Publisher Customizations (provided via Certification using Domain Config Tool)

Responsive

Local Preview

Uses AdKit (able to include DCO and Additional Assets)

Polite Loading

Safeframe Support

MRAID (in APP Support)

Secure Serving

Sizmek Advertising Suite Support

Ad Builder Templates Available

 

Implementing a Page Peel

Included Template Files

Banner
HTML

The following HTML5 template files are included.

File Name Description
index.html The HTML file for the banner

 


Styles

The following CSS template files are included.

File Name Description
styles/reset.css Styles that reduce differences in appearance between different browsers
styles/style.css The style sheet for the banner

Scripts

The following JavaScript files are included.

File Name Description
scripts/script.js The JavaScript file for the banner
scripts/localPreview.js JavaScript file enabling local preview of index.html in browser, without the need to upload the ad to the platform first.  Provides a limited preview experience.
config.js The configuration file for the ad (used for things like Smart Versioning)

Images

The following image template files are included.

File Name Description
images/backup.jpg The Backup image is a 1x1

 

Panels
HTML

The following Panels are included in the template 'panels/peelad'

File Name Description
index.html The HTML file for the PeelAd Panel

 

Styles

The following CSS template files are included.

File Name Description
styles/style.css The style sheet for peel ad panel.

Scripts

The following JavaScript files are included.

File Name Description
scripts/script.js The script for peel ad panel.

Images

The following image template files are included.

File Name Description
images/logo.png The Sizmek logo

panels/peelad/images/logo.png

Logo image.

panels/peelad/images/close.png

Close button image.

panels/peelad/images/peeltab.png

Peel tab image.

panels/peelad/images/poster.jpg

Poster image for the video.

Panels/peelad/images/sizmek_icon.png

The image for preview that shows at lower left corner.

 

Customizing Peel Tab in HTML

To customize the Peel Ad Panel, first, open panels/peelad/index.html in an HTML-authoring environment so you can edit/alter all the HTML elements within <body> tag in the index.html to create your own creative content. If you wish to change the size of the peel tab, please find the EB.initExpansionParams function in line 12 and change the third parameter to the width and the fourth parameter to the height you desire.

Second, you may also want to make changes to the panels/peelad/styles/style.css based on your content design. Finally, open panels/peelad/scripts/script.js in JavaScript editing tool and add your own script for peel ad Panel here. Below are the variable and function explanations for the template. 

Variables

Field

Description

adContainer, videoContainer, closeButton, video, clickThroughButton

Global variable(s) that will be used for define the HTML objects later.

isiOS

This variable tells you if the device is iOS device or not.

isAndroid

This variable tells you if the device is Android device or not.

isMobileDevice

This variable tells you if the device is a mobile device or not.

automaticPeelTabPosition

if it´s True, automatically the position of the peelTab will be changed depending on the setup you have in the panel settings in the Platform

 

Functions

This is where we initialize the global variables for HTML objects. In the template, we also call positionAdElements to position the ad elements.

Function Name

Description

checkIfAdKitReady

Check to see if the adkit object is initialized and then proceed to initialize creative.

initializeCreative

Initial creative. You may add your own script here if you wish to execute a script when the creative is initialized.

initializeGlobalVariables

Initialize all the variables assigning all the elements that it will use. 

addEventListeners

This is where we add all the event listeners. In the template, we have added the click event to the close button and the click through button. We also add the webkitendfullscreen event listener for iOS devices here to handle some positioning issues when get out of the full screen video player.

initializeVideo

This is where we initialize the video tracking.

handleClickThrough

Call this function for the default click-through. This will stop the video playing as well.

handleCloseButtonClick

Call this function for retract the peel tab to its original position. This will stop the video playing as well.

handleResize

This function handles the browser resize event. In the template, it calls positionAdElements to reposition the ad elements.

doBeforeFullyPeelOff

This function will be triggered before the ad fully peel off. You can add the code you want to do before the ad fully peel off here.

doAfterFullyPeelOff

This function will be triggered after the ad fully peel off. You can add the code you want to do after the ad fully peel off here.

doBeforePeelTabRetract

This function will be triggered before the peel tab retract. You can add the things you want to do before the peel tab retract here.

doAfterPeelTabRetract

This function will be triggered after the peel tab retract. You can add the things you want to do after the peel tab retract here.

stopVideo

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

showContent/ hideContent

Show / hide the elemens, for example: the close button.

showClickThroughButton/ hideClickThroughButton

Show / hide click through button function.

showVideo/hideVideo

Show / hide video function.

peelTabPosition This function will change automatically the prewieIcon to different position depending on the setup you have in the panel settings in the Platform.

 

Setting up a Page Peel in the Sizmek Platform

Set up in the MDX2.0 Platform

Procedure
  1. Archive the Page Peel workspaces into ZIP files, preserving the directory structure. You can do this with WinZip, 7Zip, or another archiving program.
  2. In the Sizmek MDX2.0, under Creative Assets, create a new Workspace by uploading the ZIP file.
  3. Under the Ads section, create an ad using the workspace that you have uploaded.
  4. Set the Ad Format to Page Peel and fill out the form.
  1. Add the following panels to the Panels List.
    • Panel Name: peelad
    • Creative Asset: Please select panels/peelad/index.html from the root of workspace.
    • Dimension: 100x100
    • Auto Expand on Mouse Over: Not Selected.
    • Delay Expansion: Not Selected.
    • Auto Retract When: Never.
    • Position Type: Page Relative-Percentage.
    • X: 0.
    • Y: 100.

* Additional information about x, y setting

      • To set peel ad at lower left corner: set x to 0, y to 100.
        bottom_left.jpg
      • To set peel ad at lower right corner: set x to 100, y to 100.
        bottom_right.jpg
      • To set peel ad at upper right corner: set x to 100, y to 0.
        top_right.jpg
      • To set peel ad at upper left corner: set x to 0, y to 0.
        top_left.jpg

Note: PagePeel always will be expanded if it's the default panel. 
        Set Default Panel Frequency for fully peel off.

  1. Under the Advanced Features section, customize the variables to your needs, and those of your publishers.
  2. Create a new placement for the ad.
  3. Set the Placement type to In Banner and the Banner size to the size of your ad.
  4. After you save your placement, you can generate preview tags to test on your web site.

 

Set up in the Sizmek Advertising Suite Platform

Procedure
  1. Archive the Page Peel workspace into a new ZIP file, preserving the directory structure. You can do this with
    WinZip, 7Zip, or another archiving program.
  2. Click Creative > Assets Library. Upload your Workspace to the chosen folder.
  3. Click Creative > Ads, and then click New Ad > Blank Ad.
  4. Enter a name for the ad, and set Ad Format to Page Peel
  5. In the Creative Assets section, on the Main Assets tab, select the Workspace folder and the default image.
  6. Select the Page Peel Panel
  7. Set the Panels of your ad
  8. Add the following panels to the Panels List.
    • Panel Name: peelad
    • Creative Asset: Please select panels/peelad/index.html from the asset's panel.
    • Dimension: 100x100
    • Auto Expand on Mouse Over: Not Selected.
    • Delay Expansion: Not Selected.
    • Auto Retract When: Never.
    • Position Type: Page Relative-Percentage.
    • X: 0.
    • Y: 100.

* Additional information about x, y setting

      • To set peel ad at lower left corner: set x to 0, y to 100.
        bottom_left.jpg
      • To set peel ad at lower right corner: set x to 100, y to 100.
        bottom_right.jpg
      • To set peel ad at upper right corner: set x to 100, y to 0.
        top_right.jpg
      • To set peel ad at upper left corner: set x to 0, y to 0.
        top_left.jpg

        Note: PagePeel always will be expanded if it's the default panel.
        Set Default Panel Frequency for fully peel off.

  1. Under the Advanced Features section, customize the variables to your needs, and those of your publishers.
  2. Create a new placement for the ad.
  3. Set the Placement type to In Banner and the Banner size to the size of your ad.
  4. After you save your placement, you can generate preview tags to test on your web site.

 

Note: On the Sizmek platform, your user account will need access to the Page Peel format in the list of available custom formats. If you do not have access to this format, please reach out to Support to gain permissions for this format.

Custom Script Notice: The Page Peel format is an HTML5 Custom Format; therefore, there is no need to attach a custom script because the appropriate one will be pulled in automatically.

For reference, the following custom script is being used:

PL_PagePeel.js

 

Custom Variables

Variable Name

Type

Description

Default Value

mdPeelTabAnimationEnabled

Boolean

Enable/disable the peel tab startup animation.

Yes

mdPeelTabAnimatedTimes

Integer

Declare how many times the peel tab should animate in startup animation.

* Set 0 for unlimited

3

mdPeelTabAnimatedTimeFrame

Float

Float number in second. Declare the duration of one peel tab animated in start-up animation.

1

mdPeelTabAnimatedAmount

Integer

The number of pixels the peel tab should animated in startup animation. the maximun is the size of the template 50Pixels or 100Pixels

10

mdPeelTabType

String

The type of the peel tab. Available types are 'image' and 'css'. When using image type, you will need to prepare a png image for the peel tab and set the path in mdPeelTabImageSource custom var. When set to CSS you will need to provide the peel tab color in mdPeelTabColor custom var.

Note: The peel tab will fall back to use an image if the browser does not support css clip path when set peel tab type to CSS.

image

mdPeelTabImageSource

String

The relative path for the peel tab image.

* Only take effect when peel tab type set to "image".

panels/peelad/images/peeltab.png

mdPeelTabColor

String

The color name or html color hex. This is to set the color for the peel tab.

* Only take effect when peel tab type set to "CSS".

white

mdPeelTabShadowColor

String

Set 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) means set peel tab shadow to black color with 0.2 opacity.

rgba(0, 0, 0, 0.2)

mdPeelTabShadowOffset

Integer

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

5

mdPeelTabShadowAmount

Integer

Amount of the peel tab shadow.

10

mdPercentageForFullyPeelOff

Integer

Declare the percentage of the long edge of the browser that peel tab should fully peel off when peel exceeds.

30

mdFastSwipePeelOffEnabled

Boolean

Enable / disable fast swipe fully peel off. This option determines if the peel tab should fully peeled off when user's mouse (or finger) swipe really fast even without exceed the certain percentage of the long edge of the browser.

Yes

mdDesktopDragToPeelEnabled

Boolean

Enable / disable mouse drag the peel tab to peel the page on desktop browsers. When disabled, user still able to use click on tab to peel the page.

Yes

mdParentLevelsToResize

Integer

This variable is only used when the ad is serving a default image.  When set to any value over 0, this number of publisher parent elements of our tag will be resized to the default image size, if they are smaller than the default image serving.

0

mdBackupImgPath

String

Relative path to the backup image, if a custom image is desired. This allows a fallback experience to display an image that is not a 1x1 even though the tag is a 1x1 tag. For example, if this custom var were set to "images/300x250_Default.jpg," then a file would attempt to be loaded from the images folder.  You must be sure this file exists in the workspace. When set to undefined, the normal 1x1 fallback occurs.

undefined

mdAutoRepositionInterval

Number

Ad resize/reposition interval. 0 to turn off the interval. 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 var simply adds an interval by which to attempt to resize/reposition also.

0

mdIsDomainConfigEnabled

Boolean

Whether or not to load the programmatic settings.

No

mdProgSettingsFolderPath

String

Location from which to load the programmatic settings files.

//services.serving-sys.com/programmatic/DomainList/

mdEyeDivZIndex

String

Set eye div z-index.

undefined

mdAutoCollapseTimer

Number

if there is an auto-expand panel, it will be closed after "n" seconds.

0

mdInteractionsCancelAutoCollapse

Boolean

This variable is only used when  there is an auto expand panel. If the user make some interaction the panel will not be closed.

No

 

Reported Custom Interactions

The following custom interactions are reported by the ad and can be reviewed in Sizmek's reporting (besides standard ad interactions).

Interaction Name

Description

user_PeelOff

User Interaction send on when the peel Ad is fully peel off. If the peel off is auto Expanded this interaction will not be reported

userClick_closeButton

User Interaction send on close button click

CustomInteraction

User Interaction send on UserAction button click

 

Appendix: EB Video Module

Templates that contain video load a video module. This module allows the video player to track video interactions and metrics. The code that loads this module looks like the code below.

<script type="text/javascript">EBModulesToLoad = ['Video'];</script>

This module already exists in the HTML5 Rich Media Banner templates with video. If you do not need this functionality, you can remove video module by deleting 'Video' from the EBModulesToLoad array. 

 

Change Log

2.0.0 CustomScript/Workspace

Release: Aug. 11, 2017

  • Updated format to offer a fully "liquid" or "domain configurable" solution.  This allows one tag to be served across different domains where Certification and Support can use the "Domain Settings Admin Tool" to change custom variables, JavaScript and CSS on specific domains so a single tag can work everywhere as expected. (Note: This has previously been referred to as a "programmatic" solution, but is more appropriate for PMPs and smaller networks that have been certified with Sizmek).
  • Support for Adkit and allowing you to include DCO elements within your ad amongst other benefits
  • Added support for frequency capping. Now it´s possible to control the Panel Frequency for fully PeelOff of the PeelAd using the setup from the platform.
  • New custom interactions are reported when user expand and close the PeelAd panel

 

1.0.2 CustomScript

June 6, 2016

  • Support for polite loading of assets. 

 

1.0.0 CustomScript

June 3, 2015

  • Initial release 

Known Issues

  • There is no transition animation on IE9 due to the CSS transition not being supported on IE9. Users will still able to drag the peel tab to peel the page, but there will be no start up peel tab animation or the peel/retract animation when a user's mouse releases the peel tab.
  • The swipe (or mouse drag) to peel is design for mobile and tablet devices, although it is also working on the desktop browsers, the mouse drag may not works as smooth as when use in the mobile devices especially when the peel tab size is less than 100x100 pixels. You may use the custom var 'mdDesktopDragToPeelEnabled' to disable the drag to peel in the desktop browsers if you find the peel is not working properly.

  

Copyright 2017 Sizmek. All rights reserved.

The information contained in this document is proprietary and confidential to Sizmek and/or any of its affiliated companies. Disclosure, copying, reproduction, storing or any use of this document or any part thereof without the express prior, written consent of Sizmek or its authorized representatives is strictly prohibited. The information furnished in this document is believed to be accurate and reliable. However, no responsibility is assumed by Sizmek for the use of this information. Sizmek reserves the right to make changes to the information included in this document at any time and without notice.

 

Flash is either a registered trademark or trademark of Adobe Systems Incorporated in the United States and/or other countries.

Trademark Note: Sizmek, the Sizmek logo, Sizmek Rich Media, Sizmek Mobile, Sizmek Video, Sizmek Channel Connect, Sizmek Workshop, etc. are trademarks and/or registered trademarks of Sizmek. All other trademarks are the property of their respective owners.

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

Comments