Build a dynamic creative in HTML5

Building a dynamic creative in HTML5 is similar to building in Flash. As in Flash, the main task is to connect dynamic data coming into the creative with the different “containers” in your creative that hold text, images, video, and variables. The only difference is that the “containers” are divs or other HTML elements, instead of the movie clips or text fields you would use in Flash.

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's linked to Enabler.js, includes tracking metrics, etc.) as described in the HTML5 build guides or
  • You are familiar with the Dynamic Creative workflow (see the Basic vs. advanced dynamic Help Center article for more information.

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

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.

Sample setup code from “Step 4: Generate Code”:

<!-- DynamicContent Start: HTML5 invocation code. -->
// Dynamic Content variables and sample values
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 =
devDynamicContent.SampleElement[0].landing_url = {};
devDynamicContent.SampleElement[0].landing_url.Url =

* 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.

Example: Setting dynamic text

document.getElementById('headline').innerHTML =

Example: Setting dynamic image

document.getElementById('background').src =

Example: Setting dynamic click-through URL

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

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:


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, just as you would when developing in Flash. 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, remember that just as when developing in Flash, 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.

Flash/HTML5 differences and similarities

Notice some of the syntax differences between the setup code generated for ActionScript vs. for HTML5, including:

  • use of devDynamicContent instead of dynamicContent
  • Enabler.setDevDynamicContent()
  • Enabler.setProfileID()

However, these Flash-HTML5 differences are only apparent in the setup code. For the rest of the code that you will add, the syntax is the same -- you use dynamicContent, not devDynamicContent. The following line of code would work in both ActionScript and JavaScript:

var myText = dynamicContent.SampleElement[0].headline

This is because dynamicContent is declared as a global variable inside the Enabler. At runtime, it is filled with the actual dynamic values from the ad server (i.e. the payload). If for some reason the payload is not received, the values from devDynamicContent (in the setup code) are copied into the dynamicContent object. So dynamicContent will always contain values, either from the payload or from the setup code.

For this reason, you should not attempt to define dynamicContent as a variable; instead, you can assume that if the Enabler has been initialized, that the variable dynamicContent will already exist, and will contain values -- either the actual dynamic values (the “payload” or the default dynamic values from the setup code).

Android-style image of the author of this page

Sarah is a DoubleClick Studio expert and author of this help page. Help her improve this article by leaving feedback below.

Was this article helpful?