Submit a request
 
PRODUCT
Privacy Policy |  AAS Advertising Policy | Terms of Use
Cookie Preference
✖

Amazon Ad Server will be sunset in Q4 2024, please visit this page (AAS offboarding information) for offboarding support resources and sunset FAQs. Details shared on that page represent the most up to date information in the Help Center, if you find disparate information in other resources please default to the information in the AAS offboarding information page accordingly.

Please note that on October 1, 2024, the ability to create new campaigns, placements and tag managers was disabled.

Follow
Last Update:
  viewable by end users
  editable by agents

Note

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

Overview

This article describes how to manually define dynamic elements for HTML ads built in Google Web Designer (GWD).

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

Important

Important: To install the components required for building your ad, make sure that you follow the instructions in Create a rich media banner in Google Web Designer.

Configuring Dynamic Elements

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

You can add variables for dynamic elements anywhere within the ad's JavaScript code. Dynamic elements are retrieved using the AdKit API. The following table describes the types of dynamic elements.

SV : svData

Description

string

Creates a dynamic element based on a string (raw text).

html

Creates a dynamic element based on an HTML string.

image

Creates a dynamic element based on an image.

video

Creates a dynamic element based on a video.

String and HTML

The following example shows how to convert a text element that has the id BookPrice into a dynamic element.

Procedure

  1. Open your config.js file.

  2. Add a JSON object to your file, as shown in the following example.

    define(
{
    "SV": {
        "svData": [{
            "svKey": "dynamicPrice",
            "svType": "html",
            "value": "<b>7.99</b>"
        }]
    }
}
);

  3. Save your file.

Note

Note: To validate your JSON code, copy the JSON section to an online JSON parser. Before running the test, make sure that you exclude the define(); wrapper. In our example, it is the first and last lines of the code.

  1. Open your creative in GWD.

  2. Create an empty text element on the stage and provide an id, for example BookPrice.

  3. In the time line, go to the first frame and create a new event.

  4. Add a new custom action in the event.

  5. Use the following code snippet to load the dynamic variable to the text element.

    function handleSVData(data) {
    document.getElementById("BookPrice").innerHTML = adkit.getSVData("dynamicPrice");
}
adkit.onReady(handleSVData);

    Note

    Note: You will not see any dynamic text in the GWD preview. If you want to view the dynamic text, write inside the text area. Remember to delete this text before publishing the ad.

The JSON object in our example includes the following:

SV: Defines the dynamic elements, svData. An element named dynamicPrice is of an html string type, with the default value of <b>7.99</b> that will display in bold due to the html <b> tag.

  • svKey: ID of the dynamic element.

  • svType: An element named dynamicPrice is of an html string type.

  • value: The complete list of values, with which a dynamic element can be populated, is defined later in AAS for each specific version. The config.js file simply includes the first possible default value, <b>7.99</b>.

    Note

    Note: Make sure that you use UTF-8 Encoding.

The JavaScript function uses the following AdKit API methods. For more information about these methods, see 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 retrieves the value of the dynamic element (svKey) called dynamicPrice, which is inserted automatically into the BookPrice div. Once the ad is served, this value is different for each ad version.

Image

Procedure

  1. Open your config.js file.

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

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

  3. Save your file.

  4. Open your creative in GWD.

  5. Drag the Amazon Dynamic Image component from the components library on to the stage.

  6. In the Properties pane, enter the value for the SvKey field using the svKey from the config.js. In this example, the svKey is dynamicImage.

    Note

    Note: To preview in GWD, add the image that you want to view in the GWD Image Preview field.

Video

Procedure

  1. Open your config.js file.

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

    define(
{
    "SV": {
        "svData": [{
            "svKey": "dynamicVideo",
            "svType": "video",
            "value": "my_video.mp4"
        },
        {
            "svKey": "videoPoster",
            "svType": "image",
            "value": "poster.jpg"
        }]
    }
}
);

  3. Save your file.

  4. Open your creative in GWD.

  5. Drag the Amazon Dynamic Simple Video component from the components library on to the stage.

  6. In the Properties pane, enter the value for the MP4 Path svKey and the Poster Path svKey fields using the svKey from the config.js. In this example, the svKey is videoFile and videoPoster.

    Note

    Note: To preview in GWD, add the files that you want to view in the GWD Video Preview and GWD Poster Preview fields.

YouTube Video

Procedure

  1. Open your config.js file.

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

    ,

define(
{
    "SV": {
        "svData": [{
            "svKey": "dynamicYTVideo",
            "svType": "String",
            "value": "abcxyz"
        }]
    }
}
);

  3. Change the value abcxyz to the actual video ID of your YouTube video.

  4. Save your file.

  5. Open your creative in GWD.

  6. Drag the Amazon Dynamic Youtube Video component from the components library on to the stage.

  7. In the Properties pane, enter the value for the Youtube Id svKey field using the svKey from the config.js. In this example, the svKey is youtubeVideo.

    Note

    Note: To preview in GWD, add the Youtube ID that you want to view in the GWD YoutubeId Preview field.

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.

Was this article helpful?
1 out of 1 found this helpful
Have more questions? Submit a request

Comments