Add dynamic elements to your HTML ads using adobe animate – Amazon Ads Help Center

Note

Note: To learn more about Dynamic Creative Optimization (DCO), or to see guides that use other authoring tools, see Introduction to dynamic creative.

Overview

This article describes how to manually define dynamic elements for HTML ads built in Adobe Animate.

The Dynamic Creative feature uses the Amazon Ad Server (AAS) Creative AdKit for developers, which contains ad-related functionalities that provide quick and easy development of your HTML ads.

Important

Important: Make sure to follow the Create a rich media banner in Adobe Animate guide to download the required files and develop the ad with the correct publish settings.

Configuring Dynamic Elements

Define variables inside your config.js file, and use the AdKit API to access these variables inside your Adobe Animate project.

You can add variables for dynamic elements anywhere within the Adobe Animate Action panel. Dynamic elements are retrieved using the AdKit API.

Dynamic Element Types

SV: svData	Description
string	Creates a dynamic element based on a string (raw text).
image	Creates a dynamic element based on an image.

String

The following example shows how to turn a movie clip that has the instance name BookPrice into a dynamic element.

Procedure

Open your config.js file with a text editor.
Add a JSON object to your file, as displayed in the following example.
- svKey: ID of the dynamic element.
- svType: Type of the dynamic element.
- value: Value of an SV element is determined by AAS for each specific version. The config.js file contains the default value.
```
define(
{    "SV": {
        "svData": [{
            "svKey": "dynamicPrice",
            "svType": "string",
            "value": "7.99"
        }]
    }
}
);
```
Save your file.

Note

Note: You can validate your JSON code, to make sure it is properly coded, by copying the JSON section to an online JSON Parser.

To validate, remember to remove excluding the define(); wrapper (first and last lines of the code example).
Open your Adobe Animate project.
Create a movie clip on the stage and give an instance name (for example, BookPrice).
In the timeline, go to the first Keyframe and open the Action panel.

Use the following code snippet to load the dynamic variable into the movie clip:

var textContent = new createjs.Text(adkit.getSVData("dynamicPrice"));
this.BookPrice.addChild(textContent);

Note

Note: When you publish your project and see it from the local host server, the dynamic variables do not appear. We recommend to check your ads by opening the HTML file in a browser instead.

The following sections explain the code examples:

SV Section

This section defines the dynamic elements (svData). An element named dynamicPrice is defined with a type string and a default value of 7.99.

svKey: ID of the dynamic element, in this case dynamicPrice.
svType: Type of the dynamic element, in this case string.
value: The complete list of values with which dynamic elements can be populated will be defined later, directly in AAS , for each specific version. The config.js file contains the first possible default value, 7.99.

Note

Note: Ensure your value field is configured with UTF-8 Encoding when applying any of the following languages: Greek, Swedish, Spanish or Russian.

JavaScript Function

The JavaScript code uses these AdKit API methods.

Method	Description	Syntax
`adkit.onReady`	Waits for AdKit to initialize and runs a callback function.	`adkit.onReady(CallbackFunctionName);`
`adkit.getSVData`	Retrieves the value of a Dynamic Creative variable by `svKey`.	`adkit.getSVData(svKey)`

In our example, when AdKit is ready, the getSVData function will retrieve the value of the dynamic element (svKey) called dynamicPrice, which will be inserted automatically into the BookPrice movie clip. Once the ad is served, this value will be different for every ad version.

Note

Reminder: Before uploading your ad, make sure you follow the steps to Publish the ad.

Image

Procedure

Open your config.js file.

Add a JSON object to your file, as in the following example:

define(
{
    "SV": {
        "svData": [{
            "svKey": "dynamicImage",
            "svType": "image",
            "value": "my_image.png"
        }]
    }
}
);

Save your file.
Place your image named my_image.png in the same folder as the config.js file.
Open your Adobe Animate project.
Create a movie clip on the stage and give an instance name (for example, BookImage).
In the Timeline, go to the first keyframe and open the Action panel.

Use the following code snippet to load the dynamic variable into the movie clip:

var imageContent = new createjs.Bitmap(adkit.getSVData("dynamicImage"));
this.BookImage.addChild(imageContent);

Creating Ad Versions in Amazon Ad Server

Once you upload your ad to AAS , the Versions tab is available from the Ad Setup page. The Versions page includes the HTML and variable items that you defined in the config.js file. For more information about versioning, see Work with versions of a dynamic creative ad.

Note

Overview

Important

Configuring Dynamic Elements

String

Note

Note

SV Section

Note

JavaScript Function

Note

Image

Creating Ad Versions in Amazon Ad Server

Comments