Search
Clear search
Close search
Google apps
Main menu

Build a dynamic creative in HTML5

To make a creative dynamic, you connect dynamic data with "containers" in your creative that hold text, images, video, and variables. These "containers" are divs or other HTML elements.

Building your creative in Google Web Designer? Follow our guide for building dynamic creatives with Google Web Designer instead.

Before you begin

Make sure the following assumptions are true:

  • You have an existing HTML5 creative that you have already prepared for Studio (it loads Enabler.js, includes tracking metrics, etc.) as described in the HTML5 build guides
  • You are familiar with the Dynamic Creative workflow (see the Basic vs. advanced dynamic Help Center article for more information.

Adobe Edge Animate isn't supported for dynamic creatives and is no longer being actively developed. Please use Google Web Designer or another authoring tool.

Step 1: Paste setup code from Studio

After you set up a profile in Studio, you must link that profile to your HTML5 creative to create dynamic functionality. You do this by copying the setup code from Step 4: Generate Code in the Dynamic Content tab within Studio. Select the HTML5 button and copy and paste the generated HTML5 code into your creative. (This step isn't required for creatives built in Google Web Designer.)

The JavaScript code examples below can live either inline within the .html file, or in a separate .js file.

Sample setup code from Step 4: Generate Code
<!-- DynamicContent Start: HTML5 invocation code. -->
// Dynamic Content variables and sample values
Enabler.setProfileId(12345);
var devDynamicContent = {};
devDynamicContent.SampleElement = [{}];
devDynamicContent.SampleElement[0]._id = 0;
devDynamicContent.SampleElement[0].headline = "Some headline";
devDynamicContent.SampleElement[0].image_url = {};
devDynamicContent.SampleElement[0].image_url.Url =
"http://yourServer/sample.jpg";
devDynamicContent.SampleElement[0].landing_url = {};
devDynamicContent.SampleElement[0].landing_url.Url =
"http://www.yoursite.com";
Enabler.setDevDynamicContent(devDynamicContent);

 

<!--
* You may access the variables in the following manner
* AFTER the Studio Enabler is initialized:
* var price = dynamicContent.Product[0].price;
* Note: be sure to use "dynamicContent", not "devDynamicContent"
-->

Step 2: Connect the dynamic data

Add the code to connect the dynamic data to the individual elements within your creative such as text, images, and exit URLs. Be sure to add the code after the Enabler has already been initialized.

When writing code that accesses dynamic data, use dynamicContent and not devDynamicContent, as noted in the setup code above, and shown in the examples below.

Sample code using dynamic data

Example: Setting dynamic text


document.getElementById('headline').innerHTML =
    dynamicContent.SampleElement[0].headline;

Example: Setting a dynamic image

document.getElementById('background').src =
    dynamicContent.SampleElement[0].image_url.Url

Example: Setting dynamic click-through URL

document.getElementById('cta').addEventListener('click', ctaHandler);

function ctaHandler() {
  Enabler.exitOverride(
      "yourExitID",
      dynamicContent.SampleElement[0].landing_url.Url);

}

The above examples reference the dynamic content directly. An alternative approach is to create an object, add the dynamic elements to the object as properties, and then reference the object’s properties directly. This may make your code easier to read and to modify. See the following example:

Example:

var data = {};
data.headline = dynamicContent.SampleElement[0].headline;

and then, later in your code:

document.getElementById('headline').innerHTML = data.headline;

Step 3: Test different dynamic values

Before uploading your creative to Studio, you should test different possible values for the dynamic content. Look in the feed for a range of values to test; for example, different URLs for dynamic images, or different strings for text, especially edge cases like extra long (or short) text. Plug each value into the setup code in your creative and preview the results. This will help you catch problems ahead of time, instead of waiting for them to be caught in QA.

Also, you may want to modify the values in the setup code so that it is clear they are development values:

<!-- DynamicContent Start: HTML5 invocation code. -->
// Dynamic Content variables and sample values
// ...
devDynamicContent.SampleElement[0].headline = "Default headline";

This will make it obvious when viewing the creative in dynamic preview (or with a live tag), if the creative is not using “real” dynamic data, but instead is using the development values from the setup code.

Was this article helpful?