Note
Note: To learn more about this format, preview a demo, or to see build guides for other authoring tools, see About single expandable.
When creating a single expandable in a code editor, it is recommended that you start with our official template bundle.
Files within the bundle:
README.txt
Amz_SingleExpandable_1_0_1_300x250_DCO.zip
Amz_SingleExpandable_1_0_1_300x250_Video.zip
Amz_SingleExpandable_1_0_1_300x250.zip
Download the template and then select the desired folder from the list of available dimensions and options.
You can also customize the dimensions according to your requirements. Everything can be personalized, including media controls of the video.
The following table describes 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. |
Required |
|
|
Style sheet for the banner and its HTML elements. |
Required |
|
|
JavaScript (logic and tracking) for the banner. |
Required |
|
|
AAS logo. Replace this logo with your own logo, or delete this image if it is not needed. |
Optional |
|
|
Fallback image shown in unsupported browsers. |
Required |
|
|
Poster image displayed in the video location in the banner before the video starts and after the video ends. |
Optional |
|
videos/video.mp4 |
Temporary video that you should replace with your own video (only in video template ) |
Optional |
After you finish creating your ad, proceed to setting up your ad in AAS. For more information, see Set up a single expandable.
If you are planning to upload multiple ads, make sure that the Ad Creation Wizard in AAS recognizes your workspace as a single expandable. Verify that the config.js file contains the following JavaScript:
define({
"adFormatId": 39
});
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 .
All of the single expandable functionalities are coded within the template files. At a minimum, the only change you will need to make is to the image .jpg asset, the video .mp4 asset, and their respective styles and markup.
To update the layout and design of a template, open the index.html and style.css files in a text editor.
To customize the dimensions of a main banner, update the style.css file to match your new size, and generate a default image for the ad. Upon ad setup in AAS, the dimensions of the default image will be used to set the size for the banner.
To resize the expansion, edit the .css and the EB.initExpansionParams() method's arguments. This method invocation is in the index.html.
Update the values of the arguments so that they fit the size of your expanded panel. For example:
if(0)EB.initExpansionParams(xPosition, yPosition, width, height);
When populated:
if(0)EB.initExpansionParams(140, 0, 300, 600);
And the line in the template's index.html file:
<script>if(0)EB.initExpansionParams(140, 0, 300, 600);</script>
Another way to initialize or resize the expansion is through the config.js that can be found on the root folder along with the index.html. For example:
define({
"adFormatId": "39",
"name": "Amz_SingleExpandable_1_0_1_300x250_Video",
"defaultBanner": "Main_Banner",
"banners": [{
"name": "Main_Banner",
"width": 300,
"height": 250,
"expansionParams": {
"x": 200,
"y": 0,
"width": 500,
"height": 250
},
"defaultImage": "images/default.jpg"
}], "clickThrough": {
"url": "https://advertising.amazon.com/en-us/solutions/products/sizmek-ad-suite",
"target": "newWindow",
"showMenuBar": true,
"showAddressBar": true }
});
The following tables provide additional variables that are available for this format. You can use these additional items to fully customize your ad.
These functions will be chain-triggered when the window is loaded and the AdKit API is ready (initiated by the checkIfAdKitReady function invoking initializeCreative). They are all located in the panels/default/scripts/script.js file.
|
Function Name |
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 video tracking by creating a new instance of the EBG video module. It also contains auto-play video functionality in video templates. |
|
|
|
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 |
|
|
|
Click on the event handler function for the expand button. It also contains auto-play video functionality for video templates. |
|
|
|
Invoked to close the panel, and enable the page scrolling before the ad is collapsed. This function also pauses the video. |
|
|
|
Click event handler for user action button. Calls and tracks the user action. This function also pauses the video. |
|
|
|
Click handler for the click-through button. Calls this function for the default click-through. This function also pauses the video. |
|
Click here to preview a demo of single expandable format.
Comments