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.

  

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.

                  

Portrait Mode

 

 

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.

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

• To set peel ad at lower right corner: set x to 100, y to 100.
  

• To set peel ad at upper right corner: set x to 100, y to 0.
  

• To set peel ad at upper left corner: set x to 0, y to 0.
  

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

6. Under the Advanced Features section, customize the variables to your needs, and those of your publishers.
7. Create a new placement for the ad.
8. Set the Placement type to In Banner and the Banner size to the size of your ad.
9. 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.
  

• To set peel ad at lower right corner: set x to 100, y to 100.
  

• To set peel ad at upper right corner: set x to 100, y to 0.
  

• To set peel ad at upper left corner: set x to 0, y to 0.
  

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

9. Under the Advanced Features section, customize the variables to your needs, and those of your publishers.
10. Create a new placement for the ad.
11. Set the Placement type to In Banner and the Banner size to the size of your ad.
12. 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 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.