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.

Before you begin

Before you can connect dynamic data to your creative, you first need to design the basic creative structure, planning the headline copy, images, and other design elements that make up your ad. Your creative should include the DoubleClick Enabler and the necessary code should already be added to track exits, counters or timers.

To learn more, follow our build guides.

Building your creative in Google Web Designer? Follow our guide for building dynamic creatives with Google Web Designer instead. Google Web Designer automatically includes all necessary dynamic code for you.

The steps below walk you through building creatives with other HTML editing software.

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.

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?
How can we improve it?