Build Dynamic Ads

Greta
Greta
  • Updated

Dynamic ads consist of several elements:

  • Creative shells (HTML banners which can receive dynamic values).

  • Images and text (and other elements) that are shown by a creative shell.

  • Version spreadsheet: .xlsx file which provides the information for the shell and specifies which images, text the shell is supposed to show in every particular dynamic ad version.

Adform also requires certain settings for each dynamic ad when you set it up. For more details, see Introduction to Dynamic Ads.

A dynamic ad can be any ad targeted or adjusted for a particular viewer. Dynamic ads in Adform can have up to 15 creative shells, which can be HTML5 standard ads or rich media ads. The creative shells can be simple or complex.

  • You can use Adform Studio to create a creative shell using built-in features. Additionally, you can upload an HTML5 standard ad to Adform directly from Studio. For more details, see Upload Banners from Adform Studio to Adform FLOW.

  • If your dynamic ad requirements are more complex, a developer can create creative shells using Adform’s Dynamic Ad Helper library. This library includes scripts for adjusting dynamic banner elements based on content data retrieved from Adform.

  • To completely customize a dynamic ad, a developer codes the creative shell without the library scripts. These dynamic ads can be quite complex, using third-party APIs to make requests to different data providers, doing custom calculations, manipulating images, and triggering complex animations.

Click the banner to preview some examples of dynamic ads in Adform Creative Showroom:

Elderweis

Aldi

A-Rosa Hotels
Elderweiss.png
Aldi.png
Screenshot_2024-02-07_103633.png

Use Adform Studio

For a basic dynamic ad, you use Adform Studio to create a custom creative shell. For information about using Adform Studio, see Use Quick Templates.

For example, let's say a media agency wants to build a banner internally, but it doesn’t have employees with coding skills. For simple banners, the Studio's builder will be able to handle the building of the creative shell. The agency employee can simply drag components as needed and specify the options to create the shell.

Use Dynamic Ads Helper

To build more advanced banners, you can use helper libraries for animations and dynamic effects. The Dynamics Ad Helper (and similar) libraries allow you to achieve Dynamic Content Optimization (DCO) without extensive, detailed coding.

To use library methods:

  1. Add the helper script to the <head> tag of the banner’s HTML file:

    <script src="//s1.adform.net/banners/scripts/components/Adform.DynAdsHelper.js"></script>
<script>
  document.write(' < script src = "' + (window.API_URL || 'https://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js?bv=' + Math.random()) + '"><\/script>');
</script>

  2. In the <body> tag, define the dynamic elements of the banner:

    <div id="text_field1">Empty...</div>
<div id="text_field2">Empty...</div>
<div id="text_field4_manual">Empty...</div>
<img id="img_field" width=48 src="" />

  3. After the definitions, in the body tag, insert the autoWire script:

    <script>
    Adform.DynAdsHelper.autoWire();
</script>

    Note

    You must set demo data before the autoWire script.

    For the autoWire script to work, each dynamic element ID must have an identical content element ID (column name) in the version spreadsheet. For example, if you have a dynamic element ID = "text_field" in the ad, you must have a column named text_field1 in the version spreadsheet.

    If a dynamic element ID has no match or if you want to fill in data manually, add these scripts for text or image elements:

    <script>
  Adform.DynAdsHelper.addText('elementId', 'columnName');
  Adform.DynAdsHelper.addImage('imageElementId', 'imageColumnName');
</script>

    The first value (elementId) is a dynamic element ID, and the second value (columnName) is the content to add. For text elements, include the text itself. For image elements, provide the URL for the image file.

You use the Dynamic Ads Helper library script to match and fill dynamic banner elements with content based on data retrieved from Adform.

Method

Example and Parameters

addText()

Replaces the contents of the HTML element with the text value from the spreadsheet.

The HTML is not interpreted because this method uses innerText().

Adform.DynAdsHelper.addText(id, name);

id: String (ID of the HTML element that accepts dynamic content)

name: String (Name of the column in the version spreadsheet)

addImage()

Replaces the source of the image with a dynamic asset from the spreadsheet.

Store images in the banner assets or provide absolute path to the image with image links.

Adform.DynAdsHelper.(id, name);

id: String (ID of the HTML element that accepts a dynamic image)

name: String (Name of the asset column in the spreadsheet)

autoWire()

Dynamically fills in text and defines image sources from the version  spreadsheet.

Adform.DynAdsHelper.autoWire();

no parameters

setDemoData()

Call before autoWire(), addText(), or addImage() methods.

Use to test how the final ad would look before it is uploaded to platform and takes data from version list. Data must be remove before going live.  

Adform.DynAdsHelper.setDemoData(demoData)

demoData: Object (Data object where the keys are column names and values for dynamic values.)

For example: { text_field: 'Demo Text', image_field: '/images/demoImage.png'}

getVar()

Adform.DynAdsHelper.getVar(name, callback)

name: String (Name of the column in the spreadsheet)

callback: Function (A function that receives the dynamic value as the only parameter)

For example:

Adform.DynAdsHelper.getVar('text_field', function(value) {  console.log(value);});

getVars()

Adform.DynAdsHelper.getVars(callback)

callback: Function (A function that receives an object with all dynamic values as its only parameter)

For example:

Adform.DynAdsHelper.getVars(function(data) {   console.log(data); });

addDataTransformPlugin()

You can register multiple data transform plugins.

They are called in order of registration.

Adform.DynAdsHelper.addDataTransformPlugin(plugin)

plugin: Function (This function receives version data as the first parameter and a callback as the second parameter. The callback receives transformed data as a single parameter. The callback should always be called inside the plugin function.)

For example:

Adform.DynAdsHelper.addDataTransformPlugin(function(data, callback){   data.text_field = data.text_field.toUpperCase();   callback(data); });

Test Banners

To test a dynamic ad locally, add demo data to the banner’s code:

<script>
        // demo data for local testing
        var demoData =
            [
                {
                   'text_field1': '01',
                   'text_field2': '02',
                   'text_field4': '0d',
                   'img_field':
                         'https://site.adform.com/build/ddc8af9602d2a029e0155f6a5b198155.png'
                }
            ];       
        Adform.DynAdsHelper.setDemoData(demoData);
</script>

For each text element ID (text_field1) provide the text for the text element (such as 01). For each image element ID (img_field) provide the URL for the image file.

Note

Content element IDs must match dynamic element IDs. If there's no matching ID, you must fill in the data manually with addText and addImage scripts.

Was this article helpful?

/
How we can make it better?

Thank you for your feedback!