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 |
|
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 |
|
Logo image. |
|
Close button image. |
|
Peel tab image. |
|
Poster image for the video. |
|
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 |
|
Global variable(s) that will be used for define the HTML objects later. |
|
This variable tells you if the device is iOS device or not. |
|
This variable tells you if the device is Android device or not. |
|
This variable tells you if the device is a mobile device or not. |
|
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 |
|
Check to see if the adkit object is initialized and then proceed to initialize creative. |
|
Initial creative. You may add your own script here if you wish to execute a script when the creative is initialized. |
|
Initialize all the variables assigning all the elements that it will use. |
|
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. |
|
This is where we initialize the video tracking. |
|
Call this function for the default click-through. This will stop the video playing as well. |
|
Call this function for retract the peel tab to its original position. This will stop the video playing as well. |
|
This function handles the browser resize event. In the template, it calls positionAdElements to reposition the ad elements. |
|
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. |
|
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. |
|
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. |
|
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. |
|
This function will pause the video. This function also has rewind video to starting point option by adding the parameter in the function call. |
|
Show / hide the elemens, for example: the close button. |
|
Show / hide click through button function. |
|
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
- Archive the Page Peel workspaces into ZIP files, preserving the directory structure. You can do this with WinZip, 7Zip, or another archiving program.
- In the Sizmek MDX2.0, under Creative Assets, create a new Workspace by uploading the ZIP file.
- Under the Ads section, create an ad using the workspace that you have uploaded.
- Set the Ad Format to Page Peel and fill out the form.
- 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.
- Under the Advanced Features section, customize the variables to your needs, and those of your publishers.
- Create a new placement for the ad.
- Set the Placement type to In Banner and the Banner size to the size of your ad.
- 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
- 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. - Click Creative > Assets Library. Upload your Workspace to the chosen folder.
- Click Creative > Ads, and then click New Ad > Blank Ad.
- Enter a name for the ad, and set Ad Format to Page Peel
- In the Creative Assets section, on the Main Assets tab, select the Workspace folder and the default image.
- Select the Page Peel Panel
- Set the Panels of your ad
- 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.
- Under the Advanced Features section, customize the variables to your needs, and those of your publishers.
- Create a new placement for the ad.
- Set the Placement type to In Banner and the Banner size to the size of your ad.
- 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 |
|
Boolean |
Enable/disable the peel tab startup animation. |
Yes |
|
Integer |
Declare how many times the peel tab should animate in startup animation. * Set 0 for unlimited |
3 |
|
Float |
Float number in second. Declare the duration of one peel tab animated in start-up animation. |
1 |
|
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 |
|
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 |
|
String |
The relative path for the peel tab image. * Only take effect when peel tab type set to "image". |
|
|
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 |
|
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) |
|
Integer |
Number of pixels for the offset of the peel tab shadow. |
5 |
|
Integer |
Amount of the peel tab shadow. |
10 |
|
Integer |
Declare the percentage of the long edge of the browser that peel tab should fully peel off when peel exceeds. |
30 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
Boolean |
Whether or not to load the programmatic settings. |
No |
|
String |
Location from which to load the programmatic settings files. |
//services.serving-sys.com/programmatic/DomainList/ |
|
String |
Set eye div z-index. |
undefined |
|
Number |
if there is an auto-expand panel, it will be closed after "n" seconds. |
0 |
|
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. |
Comments