PRODUCT
Follow

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 Sizmek Ad Suite (SAS) 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.

  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:

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 Sizmek 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 Sizmek 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 Sizmek 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 Sizmek Ad Suite

Once you upload your ad to SAS , 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?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments