Creative Services Toolkit

Tutorials

Dynamic Content

Add content to your creative dymanically.

Purpose

This tutorial will teach you how to use data and javascript to add content to your creatives.

Why does it matter?

Using data and javascript to add content is more efficient than hard coding everything in HTML. It allows you to easily update text/images/clicktags later without re-trafficking creative, and it saves time in the build process. The end result is normal HTML just like we're all used to working with.

Download Example

Click here

Overview

We'll use data created in javascript and merge it with a template that we'll create in HTML. For each item in the data the code will merge the data with the template and add that chunk of HTML to whatever HTML container we like, creating dynamically added content.

The Data

  • We created a new variable called recipes. The value of the variable is an array of 2 recipes, each with a title, a URL to an image, and a clicktag.
  • The [] (square brackets) is how we define an array.
  • The {} (curly brackets) is how we define an item (a object) in the array. So the contents between curly brackets is the data for that one item.
  • You can add anything you like as data in the array. Simply follow the key: value pattern
    Example: Say you want to add a subtitle, you could add subtitle: "here's my subtitle text" to each item
  • You can add as many items as you want, just copy from { to } and separate each item by a comma.
    NOTE: Make sure each item has the same group of data (title, image, click should be found in each item).

The HTML Template

  • We created a div with ID "templates", and made sure it was display none. This way templates themselves don't display visually.
  • Inside the div we create a new template, you can have multiple templates for different items. We define a template using the <template> tag and give it an ID so we can find it later.
  • Inside the template we add whatever HTML we like.
  • Within the HTML you'll notice {{ image }}. The double curly brackets is how we tell the template that this is where a piece of data should go. So when the code is adding our items, it will replace {{ image }} with the value of image from our data, and so on.

Putting it all together

  • From the top down:
    • 1. Our HTML template
    • 2. A div where we will add the content.
    • 3. A link to the mustache.js file that is the template rendering engine. Nothing will work without that.
    • 4. The Javascript.
      First is our recipe data array.
      Next we define the template, so we're creating a new variable var recipeTmpl and we're setting that equal to the HTML template with an ID of "recipes".
      Last is a for loop which runs the code between the {} a set number of times. In our case it's set to run for the total number of items in our recipes array, which is 2. If we add another item to recipes it would run 3 times etc.
      Inside the for loop we're appending our template that's been merged with our data for each item to the "container" div.

Real World Examples

New York Bakery: Click Here.
The bakers, recipes, and products are all added dynamically from data.

Kohls Pushdown: Click Here.
The hotspots and text that shows up when you hover over them is added on-load.
The items that show up when you click a hotspot are added only when a user clicks the hotspot, so that initial file size is low. We're basically lazy loading not just images but all the HTML content.