Note
Note: To learn more about this format, preview a demo, or to see build guides for other authoring tools, see About Adhesion.
When creating an Adhesion in a code editor, it is recommended that you start with our official template bundle.
Files within the bundle:
README.txt
Amz_Adhesion_1_0_1.zip
Amz_Adhesion_DCO_1_0_1.zip
Download the template and then select the desired folder from the list of available dimensions and options (classic or video).
You can also customize the dimensions according to your requirements. Everything can be personalized, including media controls of the video.
The following tables describe the list of files that are included in the downloadable template.
File Name |
Description |
Required |
---|---|---|
|
HTML file for the banner. |
Required |
|
Configuration/manifest file for the ad. Used for actions such as default ad settings, and Dynamic Creative. |
Optional |
|
Style sheet for the banner and its HTML elements. |
Optional (If you choose to include CSS styling in the HTML file) |
|
JavaScript (logic and tracking) for the banner. |
Required |
|
Script that enables local preview of the ad. |
Optional (Does not require uploading) |
Fallback image shown in unsupported browsers. |
Required |
|
|
Amazon Ad Server logo. Replace this logo with your own logo, or delete this image if it is not needed. |
Optional |
|
Amazon Ad Server background. Replace this background with your own background, or delete this image if it is not needed. |
Optional |
After you finish creating your ad, proceed to setting up your ad in AAS. For more information, see Set up an Adhesion.
The config.js
file includes the manifest ad data. This file contains metadata used to configure the ad in AAS during the upload. For more information about the Manifest files, see Manifest Ad Data.
If you are planning to upload multiple ads, make sure that the Ad Creation Wizard in AAS recognizes your workspace as an Adhesion. Verify that the config.js
file contains the following JavaScript:
define({ "adFormatId": 10328 });
For more information, see Set up multiple ads using Ad Creation Wizard.
If you are developing ads with third-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.
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.
The following sections describe common methods in which to customize your Adhesion
To create an Adhesion banner without any expansion, keep the banner settings and ignore the expand panel settings. In addition, make sure that you remove the expand button from the Master Banner HTML file.
Note
Note: To ensure that the Adhesion displays properly in both web browsers and in-app, keep the Master Banner file, and use its file settings to create the ad. We do not recommend using the expand panel in place of the Adhesion.
These values determine visibility of the banner and panel while the publisher's page is scrolling. When these values are set to false, both the banner and panel remain visible. These fields are included in the config.js
in the workspace, and on the Master Ad Setup page in AAS (Master Ad Setup > Settings > General > Advanced Features).
-
Set the x position of the banner to 100.
This places the banner at the right-end of the browser. This option is included on the Master Ad Setup page in AAS (Master Ad Setup > Creative Assets > Panels).
-
Change
mdFullwidthBanner
to No.
This field is included on the Master Ad Setup page in AAS (Master Ad Setup > Settings > General).
-
Set the banner size to 728x90.
Since mdFullwidthBanner
is set to No, the panel container is not extended to the browser width. Therefore, you need to set the banner size with accurate numbers. The size setup is included on the Master Ad Setup page in AAS (Master Ad Setup > Creative Assets > Panels).
Note
Note: To ensure that the dimensions are correct for the footnote, you must design your creative inside the Adhesion workspace file. The default dimensions for the banner are 728x90, and the leave behind is 100x75.
Function Name |
Location |
Description |
Additional Code Allowed |
---|---|---|---|
|
|
Initializes the creative. You can add your own script if you want to run a script when the creative is initialized. |
|
|
Initializes the global variables for HTML objects. In the template, |
||
|
Initializes the close button. Whether to display the close button is based on the serving environment and custom variable. |
||
|
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 |
||
|
|
Initializes the video based on the serving environment and custom variable. Determines how to serve the video object and add video tracking to the video module when possible. |
|
|
Triggered when user taps on user action button. It only contains the |
||
|
Triggered when user taps on click-through button. It calls the |
||
|
|
Triggered when user taps the close icon on the top- right corner of the banner. This function dispatches the |
|
|
|
Triggered when the ad is either clicked through, collapsed, or the video is paused. |
|
|
Triggered when user scrolls the page. You may need to modify the function to fit your requirements, and depending on the content to display when the page is scrolled. |
||
|
Returns the custom variable. |
||
|
|
Triggered when user taps on expand button. You may need to modify the function to fit your requirements, and depending on thet content to display when the ad expands. |
|
|
|
Triggered when user taps on the close button just after the ad expands. You may need to modify this function to fit your requirements, and depending on the content to display when ad is collapsed. |
Click here to preview a demo of Adhesion format.
Comments