Introduction
Overview
The Adhesion is an ad format that continually fixes to the bottom of the display while the user scrolls through the page. In order to do that, Adhesion format uses default panel (banner panel) as a banner so it can be placed at the bottom of the publisher page without restricted by publisher page layout. Then when user click to expand, it will use another panel for the expansion.
The Adhesion has both Workspace and Ad Builder templates, this build guide describes the Workspace templates. If you would like further information on the Ad Builder templates, please check the related Ad Builder build guide. Workspace templates give you greater flexibility to adapt the code and program additional customizations while Ad Builder templates require little to no coding and provide ease of use. The templates available within these alternate environments may be slightly different, so make sure you use the one based on your needs. The different templates are described below, but check back frequently since new templates are expected to be added.
Demos/Downloads
The following table provides links to the template and demo for the Adhesion format.
Template |
|
Demo |
Workspace Templates
The Workspace templates includes an expandable template in sizes 320 x 50. The 320 x 50 template initially set up as full width banners that expand to the full width of the display on ad load. The banner will always pin to the bottom and will disappear while the user is scrolling the page or rotating the device and will re-appear once the user is done with scrolling or orientation changes (Note: It can also be customized so that banner will never disappear). The banner always includes a close button in the top right corner so users can collapse the ad.
By default, the Adhesion format expands to 25% height of the device screen to comply with the Better Ad Experience. The Adhesion format can also expand to full screen by changing the setting via custom variable. The following illustrations show the full width expandable template in a collapsed state and an expanded state.
The following illustrations show the full width expandable template in a collapsed state and a full screen expanded state in mobile browser.
The Adhesion format supports in App (MRAID) environments with some limitations. Depending on the App, the Adhesion format may NOT continually adhere to the bottom, it may just display the banner where the App assigns it. Additionally, the Adhesion format will only expand to full screen when served in App.
Here is a comparison of their behavior when the workspace template is served in web browser vs. in App (MRAID).
In Web Browser | In App (MRAID) | |
Banner | Hidden | Displays at the ad slot that App assigns it to* |
Default Panel | Auto Expands as an Adhesion banner pinned to the bottom of the page* | Does not expand |
Expand Panel | Expands when Expand button is clicked | Expands when Expand button is clicked and always expands to full screen |
* You may use same content for banner and default panel so you do not need create separate content for each of them.
The templates available in Ad Builder may be slightly different than the Workspace equivalent. The table below shows the functionality difference between them.
Adhesion Functionality |
Ad Builder |
Workspace |
Full width banner |
❌ |
✓ |
Option to use MRAID default close button |
✓* |
✓** |
Responsive full-screen panel, Panel content resize on browser resize. |
❌ |
✓ |
Restrict page scroll when full-screen panel is expanded |
✓ |
✓ |
Sizmek Advertising Suite Support |
✓ |
✓ |
* via Ad Settings from Ad Builder
** via Custom JS Var mdEnableSDKDefaultCloseButton.
Supported Platforms
Platform |
Supported Versions |
Windows |
Internet Explorer 10+, Firefox, Chrome, Safari |
Mac |
Safari, Firefox, Chrome |
iPhone |
iOS 9.0 and later |
iPad |
iOS 9.0 and later |
Android |
Android 4.4 and later (including Tablet) |
Note: This format supports in App functions such as expand and video playing, however, the adhesion function may or may not work properly depending on the design of the App.
Format Properties
Listed below are common properties available to the format.
Feature | Supported |
Polite Loading | ✓ |
Safeframe Support | ❌ |
MRAID (in APP Support) | ✓ |
AdKit-ready | ✓ |
Liquid Framework (One-Tag Solution) | ✓ |
Secure Serving | ✓ |
Sizmek Advertising Suite Support | ✓ |
Local Preview | ✓ |
Ad Builder Templates Available | ✓ |
Implementing the Adhesion using Workspace
Workspaces Available
Workspace |
Video |
Placement Dimension |
Default Panel Dimension (Adhesion Banner) |
Expand Panel Dimension |
|
Yes |
320 x 50 |
Full Viewport Width x 50px Height |
Full Viewport Width x 25% of viewport Height |
Included Template Files
HTML
The following HTML template files are included.
File Name |
Description |
|
The html file for the banner and default panel. |
|
The html file for the expand panel. |
|
The style sheet for the banner and default panel. |
|
The style sheet for the expand panel. |
Images
The following image template files are included.
File Name |
Description |
|
Backup image |
|
Background image for banner, default panel, and expand panel |
|
Sizmek logo image |
|
Image for the video poster image |
Scripts
The following script template files are included.
File Name |
Description |
|
The core script for controlling the button actions, tracking, expand and collapse, and initialize and control of the video. |
Videos
The following script template files are included.
File Name |
Description |
|
Demo video in mp4 format |
Customizing Adhesion
All of the Adhesion functionalities are programmed in the script file. You may modify the script file based on your design and what functionalities you will need for your ad.
Customize the Panels
- To customize the default panel (adhesion banner) or expand panel, open
scripts/script.js
andpanels/expand/scripts/script.js
in an HTML-authoring environment and edit it as needed.
The following table provides a list of functions and descriptions for the script file.
Functions
Function name |
Description |
|
This function will issue the call to initializeCreative function upon the state of the EB object. You can add your things in here if you want them to happen before the ad is initialized. |
|
The function is where we initialize the ad. You can add functionalities in here if you want them happening when the ad is initialized. |
|
The function saves all the html objects into global variables so we can use them later. |
|
The function decides if the custom close button should be shown based on where the ad is served and the value of mdEnableSDKDefaultCloseButton. |
|
The function hooks up the events with all the clickables. |
|
This function initialize the video player for in App environment, it also initialize the video tracking for non-in App serving. |
|
This function will be triggered when user taps on user action button. It only contains EB.userActionCounter function call for tracking purposes for now, but you certainly can add your own functionality here. |
|
This function will be triggered when user tap on click through button. It will call the EB.clickthrough function to launch the default click through that you have setup in the ad platform, as well as track the click from our delivery. |
|
This function will be triggered when user taps the close icon on the top right corner of the banner. This function will dispatch closeAd command to the Adhesion custom js on the placement level and have it to close the ad completely. The function will also track the closeAd user action by calling the EB.userActionCounter function. |
|
This function will be triggered when user taps on expand button. You may need to modify the function to fit your need for what content to be displayed when ad is expanded. |
|
This function will be triggered when user taps on the close button when ad expands. You may need to modify this function to fit your needs for what content to be displayed when ad is collapsed. |
Manifest Configuration (config.js file)
We have outlined some information about this file below, for a more detailed description please see the article in the Sizmek Help Center here.
The Manifest Configuration File (config.js location in the root folder of the workspace) is a metadata file that defines certain default behaviors for the ad when created on the Sizmek Advertising Suite platform (MDX does not support the manifest file; the file is simply ignored). When you create a new blank ad, and select a workspace containing a manifest file, the information in that manifest file will be applied. You may certainly make changes to the inputted information once the data is there. The manifest file only gets applied once, when you assign a workspace.
Manifest Property: adFormatId
Default Value: 10328
Description: DO NOT MODIFY this value or your ad will not function correctly. This is a reference to the custom ad format ID that maps to the Pushdown in the Sizmek platform. The mapped format name should appear in Ad Format selection shown in Figure1#2.
Manifest Property: name
Default Value: ""
Description: User-defined ad name displayed in the platform. You may change this to your desired name, or you may leave this line out entirely to create an ad without assigning a name. The input value should appear in Ad Name field shown in Figure1#1.
Manifest Property: defaultBanner
Default Value: "Main_Banner"
Description: This is the name of the default banner. This must match the name of the (only) asset in the banners array. This value is never displayed in the platform nor in reports, so while you can edit this, assuming you also changed the name of the banner in the below array to match this, it would have no effect.
Manifest Property: defaultPanel
Default Value: "banner"
Description: This is the name of the default panel. This must match the name of the asset in the panels array.
Manifest Property: banners
Description: A single-entry array of the only banner in the ad.
Parameters:
Field | Default Value | Description |
name | "Main_Banner" | Name of the banner, this must match the value of defaultBanner above. No reason to change this. |
width | 320 |
Integer value representing the banner width in pixels. Note: this should match the height of the defaultImage. The input value should appear with input height in Dimensions column shown in Figure1#4. |
height | 50 |
Integer value representing the banner height in pixels. Note: this should match the height of the defaultImage. The input value should appear with input width in Dimensions column shown in Figure1#4. |
defaultImage | "images/backup.jpg" |
Relative path to the default image for this format. The input value should appear in Asset column shown in Figure1#3. Note: only file name will be displayed instead of full relative path. |
Manifest Property: clickThrough
Description: Object containing details on the default clickthrough for the ad
Parameters:
Field | Default Value | Description |
url | "http://www.sizmek.com/?defaultClickthrough" |
Landing page when a user clicks. The URL can include up to a 1,000 characters. The input value should appear in Click-thriugh URL field shown in Figure2#1. |
target | "newWindow" |
Where to open the url when user clicks. The input value should appear in Target Window selection shown in Figure2#2. Options are:
|
showMenuBar | true |
Boolean value that determines the appearance of the browser's menu bar in the landing page new window/tab. The input value should appear in Show Menu Bar checkbox shown in Figure2#4. |
showAddressBar | true |
Boolean value that determines the appearance of the browser's address bar in the landing page new window/tab. The input value should appear in Show Menu Bar checkbox shown in Figure2#3. |
closePanels | false |
Boolean value that determines if panel should be collapsed when click-through triggered. Note: This is not yet implemented in the UI. You can safely ignore this setting if format/template does not include any panels. |
Manifest Property: customInteractions
Description: Array containing objects that define the default custom interactions for the ad.
Parameters:
Field | Default Value | Description |
name | "userAction" |
The name of the user action as defined in the workspace. The input value should appear in Name column shown in Figure3#1. |
reportingName | "User Action" |
The name to appear in reports for this custom interaction. The input value should appear in Reporting Name column shown in Figure3#2. |
type | "userAction" |
Type of interaction. The input value should appear in Type column shown in Figure3#3. Options are:
|
includeInRate | true |
A boolean value that defines whether to include the interaction in the Interaction Rate, and to influence the Interaction Rate metrics in reports. The input value should appear in Include In Interaction Rate column shown in Figure3#4. |
closePanels | false |
Defines whether to close the ad's panels when the interaction is triggered. The input value should appear in Close Ad Parts column shown in Figure3#5. |
landingPageUrl |
Landing page to which the user will be directed when triggering the interaction. The input value should appear in Redirect URL column shown in Figure3#6. We do NOT use this value in Adhesion format so you can ignore this value. Note: The URL can include up to a 1,000 characters. You can safely ignore this setting if there is no landing page for the custom interaction. |
Manifest Property: panels
Description: An array of the panel(s) in the ad.
Parameters:
Field | Default Value | Description |
name | "banner" | Name of the panel, this must match the value of defaultPanel above if is default panel. The input value should appear in Panel Name column shown in Figure4#1. |
width | 320 |
Integer value representing the panel width in pixels. The input value should appear in Width column shown in Figure4#5. |
height | 50 |
Integer value representing the banner height in pixels. The input value should appear in Height column shown in Figure4#6. |
asset | "index.html" |
Relative path to the panel index file for this format. The input value should appear in Asset column shown in Figure4#2. |
x | 0 |
The left offset for the panel position. The input value should appear in X column shown in Figure4#3. |
Y | 0 |
The top offset for the panel position. The input value should appear in Y column shown in Figure4#4. |
delayedExpansion | false |
Boolean value that determines if panel should be expanded with delay. The input value should appear in Delay Expansion checkbox shown in Figure5#2. |
positionType | pageRelativePercentage |
The type of panel positioning. The input value should appear in Position Types selection shown in Figure5#1. Options are:
|
autoCollapse | never |
This determines if the panel should auto collapse or not. The input value should appear in Retractions selection shown in Figure5#3. Options are:
|
Manifest Property: variables
Description: Array containing key/value pair objects that define the default values of the custom variables for the ad.
Guidelines and Rules
- The Manifest file key name must match the format key name. Note, this is NOT the same as the variable display name, please refer to the Custom Variables section below for the key value for each custom variable.
- A key is ignored and not added to the ad, if the Manifest file includes a unique key that is not defined on the format level.
- The last key is used in the Manifest file if the key appears more than once.
- Variables that are embedded on the format level with default values will appear on the ad level even if they do not exist on in the Manifest file.
- A variable is ignored if an error or conflict arises. The default values on the format level apply.
- Variable values can include boolean, integers, strings, and float types.
- All values should be entered with quotes, as strings, regardless of variable type
- Boolean values use lowercase "true" and "false" values
Parameters:
Field | Description |
key | Key of the custom variable. Note: this is NOT the display name, please refer to the Custom Variables section below for the key value for each custom variable. |
value |
The default value of the variable. Encapsulate every value in quotes, regardless of if variable type is string, integer, float, or boolean. |
Example:
Recommended Manifest Configuration Changes
At the very least, you will want to make a minimum of these changes to your manifest file:
Name: The template provided includes the template name as the ad name. You will want to make sure your ad is named according to your campaign/placement.
Clickthrough URL: The template clicks through to the Sizmek home page. You will want to update the default clickthrough URL according to your campaign/placement.
Interactions: The template provides a single interaction named "userAction". You will want to update this section to either include all the interactions you have in your ad's creative, or remove the section entirely and rely just on the asset scanning of the platform to detect all interactions in the code.
In addition to the above list, you may want to adjust the below entries:
Custom Variables: While the template provides default behavior, depending on the needs of your ad, the publisher(s) on which the ad will run, etc., you may need to adjust the values of some of the variables.
Banner Dimensions: The template provides is served as a 320x50. You may need to serve a different tag size due to certain publisher restraints. As this ad can behave responsively, you may serve any size banner you wish. If you decide to change your banner size, you should change the Manifest to match.
Common Customizations
Setting Up the Adhesion in the Sizmek Platform
Custom Variables
Variable Name (Key) |
Type |
Description |
Default Value |
Accepted Values |
|
Integer |
Auto re position panel if needed on specified time interval. |
0 |
> 0 and <= 100 |
|
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 320x50 even though the tag is a 320x50 tag. Template workspace includes a file that could be used here as an example, if this custom var were set to "images/970x250_Default.jpg" |
undefined |
Relative path to the backup image. eg. images/970x250_Default.jpg |
|
String |
Name of the banner panel. |
banner |
Any valid name string, need to match the panel name in mainfest file (config.js) |
|
Boolean |
Set Yes to use MRAID default close button rather than the customized one in template when ad served in MRAID (in App) |
No |
Yes/No |
|
String |
Name of the expand panel. |
expand |
Any valid name string, need to match the panel name in mainfest file (config.js) |
|
String |
Set eyediv zIndex - z-Index of the panel on publishers page. |
undefined |
Valid CSS z-Index value |
|
Boolean |
Decides if the banner needs to go full browser width. When set to No, the banner will uses placement width (320px from default template) and will not responsive. |
Yes |
Yes/No |
|
Boolean |
Decides if the banner will need to be hidden while user scroll (or resize) the publisher page. |
Yes |
Yes/No |
|
Boolean |
Decides if the panel will need to be hidden while user scroll (or resize) the publisher page. |
Yes |
|
Enable Domain Config (mdIsDomainConfigEnabled) |
Boolean |
Set ad to load with domain configuration. |
No |
Yes/No |
|
Integer |
Decides the Minimum height of the expand panel in number of pixels. Default value is -1 (no minimum). This value only applied when the mdPanelHeightDependency sets to percentage. |
-1 |
> 0 |
|
String |
Panel Aspect Ratio. This value only applied when mdPanelHeightDependency sets to aspectRatio |
4:3 |
String in [width ratio]:[height ratio] format |
|
String |
Decides the panel height based on the panel width breakpoints when mdPanelHeightDependency sets to adaptive. The value should be in the [width]:[height] format and use comma for multiple breakpoints. For example: 300:200,500:300,749:400 means set panel height to 200px when panel width <= 500, set panel height to 300px when banner width <= 749, set panel height to 400px when panel width > 749 |
300:200,500:300,749:400 |
String in [width]:[height] format. Use comma for multiple breakpoints. |
|
Integer |
Decides panel height when mdPanelHeightDependency sets to fixed |
416 |
> 0 |
|
String |
Decides what panel height should based on. |
percentage |
fixed: based on the value of mdPanelFixedHeight adaptive: based on the value of mdPanelBreakpoints aspectRatio: based on the value of mdPanelAspectRatio matchBanner: based on banner height browser: based on browser height percentage: based on the value of mdPanelPercentageHeight
|
|
Integer |
Decides the height of the expand panel should be how many percentage of the viewport height when mdPanelHeightDependency sets to percentage |
25 |
> 0 and <= 100 |
|
Integer |
Only applied when serving default image. Affects the number of levels of parent elements to resize to the default image size. |
0 |
> 0 |
|
String |
Path to Programmatic seetings file |
|
Valid folder path |
|
Boolean |
Decides if user be able to scroll the publisher page while the expand panel expanded. This will only applied when expand panel expands to full screen. Note: User may still be able to scroll on some devices, but our ad will try to scroll the page back to the previous position when the ad expands. Alternatively if using the banner template, the ad will scroll to the top of the page on ad load; you can set the value of this variable to "No" to cancel scrolling to the top of the page on ad load. |
Yes |
Yes/No |
Reported Custom Interactions
Besides the standard HTML5 ad interactions, the following are the custom interactions reported by this format and can be reviewed in Sizmek reporting.
Custom Interactions |
Description |
|
Sent when user click the close icon on the top right corner of the banner. |
|
Send when user click the UserAction button from expand panel. |
Known Issues
- On iOS browser, because of the reserved area at the bottom of the browser when browser bottom bar disappear, buttons in our templates may not clickable. Please keep this in mind during ad creation and try to not to place clickable that will appear at the bottom of the screen.
Change Log
May 10, 2018
- Add support for manifest (config.js) file.
- Adopt Better Ad Experience.
- Fix the expand and collapse issue for ad serving in App (MRAID).
- New Sizmek branded images and color theme.
September 12, 2017
- Custom format renamed from HTML5 Adhesion to Adhesion.
July 17, 2017
- Updated to support the liquid framework.
- Modified interaction tracking - previously interactions were coming from the banner, but since banner was a 1x1 that was never displayed, all interactions are now assigned to the panel that is acting as the banner.
- Fixed issue where the page would incorrectly snap back to the top if the user put in a delay when showing the adhesion banner or if the user had to scroll the page to see the adhesion banner
- Workspace has been updated to support AdKit.
July 6, 2016
- Support polite loading
August 5, 2015
- Rename to HTML5 Adhesion
- Change the base format from Single Panel expandable to Expandable Banner
- Add Custom JS Vars so the publishers can have option to not to hide the banner while user scrolling
- Add support for playing video on MRAID 2.0.
- Add support for both secure serving and non-secure serving.
- Expanded support to the desktop so a single tag can work across desktop, tablet and mobile
July 07, 2014 (Changes made to the IAB Mobile Adhesion format)
- Rebranded ad for Sizmek
- Fixed full screen resizing and positioning bugs in iOS 7 Mobile Safari
Notice
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.
Copyright © 2017 Sizmek. All rights reserved.
Comments