Build a dynamic creative using HTML5

To make a creative dynamic, you connect a list of different content options (typically stored in a spreadsheet), with containers in your creative that hold text, images, or video. These containers are mostly divs or other HTML elements.

You can also pass other information from the spreadsheet into a variable in your creative that's used to control how the creative looks. For example, you could store three colored themes (blue, green, and purple) in your spreadsheet, and apply rules that select one of these themes for a specific audience using rules set up in your dynamic profile. When the ad is served, the rule passes one of the color themes to your creative, and your creative's code shows creative content matching that color theme.

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.

If you're not using Google Web Designer, your creative should include the Studio 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.

Determine which creative elements are dynamic

During creative concepting, you should identify how many and which elements of the ad you plan to swap out dynamically. These elements, also called dynamic elements, most commonly include but are not limited to:

• Text
• Images
• Exit URLs
• Videos

Create a dynamic mapping

To better visualize how feed content fits in the creative, create a dynamic mapping, a mockup of the ad that clearly marks which elements are dynamic. For example, in the below dynamic mapping, you can see there are the following dynamic elements: headline text, product image, call-to-action (CTA), and offer copy. There are also useful notes on the side.

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.

 Next step: Upload your creative assets to Studio