From September, Flash will no longer be supported by Chrome. Prepare for the shift towards HTML5 by visiting our Flash to HTML5 help page

Check it out!

Dynamic Content Ad

Dynamic content banner (or simple dynamic content banner) allows changing the content without a need to produce a new banner. Banner is parsing some particular template's data from Adform system. It shows only 1 particular ad message from system's template on each impression. Single ad message could be assigned directly for banner on initial banner settings page or multiple ad messages could be picked up to display if  banner is placed to rotator on system. Selected multiple ad messages in a rotator might have rotation or retargeting options applied if needed. As you can see in the preview, random messages are loaded in the same banner on each refresh - this is done by placing simple dynamic banner to a rotator.

To sumup: simple dynamic banner solution may display one particular ad message on each banner impression. Ad messages are entered to Adform's template data manually,  whenever user wants. If there is a need to have automatic data filling and advanced ad message selection mechanism - a product targeting solution is used. 

Dynamic content banner specifications

Dynamic content banner should follow general HTML5 Assets specifications – .zip file should include manifest.json file with banner dimensions and source defined, HTML file, and other assets used in the banner. And also to succesfully create dynamic banner a workflow should be followed:

  • Create data template

    Dynamic banner is created to take some portion of dynamic data - images or texts. Adform system has ability to create data template for storing text, graphic image and landing page values for the dynamic banner to use. Workflow is as follow:

    1. Creating template: template is created manually under Banners > Templates section. New data template on Adform's system is created manually and the data to it could be filled either manually, either doing automatic data import (transformation). As it is a simple dynamic banner - data to it is added manually as just manually added data is visible in system interface. Automatic data transformation (feeds) fills in data to different location, not visible via system interface and such data can't be used for simple dynamic banner.
    2. Creating ad messages: each item/product/admessage that is wished to be displayed per 1 impression on simple dynamic banner's stage should be added as single ad message on a template. Ad messages amount on Adform's template for simple dynamic banner is limited to 10 000. Ad message title/name must be unique as if not an error is shown during template save. Each ad message gets it's own group message id.
    3. Defining variables: variable names for TextGraphic and Landing pages variables may vary but it is advised to ad semantic variable name meaning, for e.g. instead of "t1" use "text_1" or "header_text". Variable amount is limited to 100. Variables and their values can not be empty, at least one character is required for each (space is not counted as a character if it is the only one character used or the first one). Before creating Graphic variables make sure that image assets are hosted under "Assets" section in Adform system. Landing pages can be added for each template and Ad message. Ad message can have unlimited amount of unique landing pages, but the amount of landing pages and their names must match in all the Ad messages of a template. Name of a landing page must meet clickTAG variable format, e.g. clickTAG, clickTAG2, etc., to ensure that later it is used correctly.
    4. Publishing template: data from template which status is "In progress" or "Modified" is not used/parsed to the banner. Status must be "Published" after all edit tasks are done. Once template published a path to XML source is generated on system. It looks like: http://s1.adform.net/Banners/Elements/Templates/12216/11030.xml . The last two digits are important for local banner testing as they stands for client id - cid:12216 and template id - tid:11030.  Also, opening this link in browser it is possible to get any entered ad message group id value - gid variable, for example inside this template there is gid:80549535.
    5. Local banner test: placing above mentioned variables to banner's code banner creator may get particular ad message dynamic values loaded locally. Once banner is placed to system and some template assigned to it - variables are inherited dynamically.



  • Forming dynamic AdMessage

    It is advised to start building simple dynamic banner starting with banner sample provided. Inside the sample you will find banner's html source, java script file, image assets. 

    Html file must have dhtml library included in a header element:

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

    In a body tag  it is possible to create any divs, add any static information desired. Important is to leave <div id="message"></div> element as into it a dynamic ad message part is inserted, code sample:

    <div id="wrapper" class="wrapper">
    	<div id="message"></div>
    		<div id="default">
    		<h2>Dynamic Content Banner</h2>
    			<p>Refresh to see another AdMessage Ad dimensions: 300x250px<br>
    				<span id="logo"><img src="logo.png" style="border:none;" /></span>
    			</p>
    		</div>
    </div>

    Creating simple dynamic banner project a javascirpt code is used for data parsing and forming. Dynamic ad message part is formed using Mustache script:

    <script type="text/mustache" id="admessage">
                {{#products}}
    				<a class="link" href="{{clickTAG}}" target="{{target}}">
    					<img src="{{image}}" />
    					<p style="color:#{{color}}">{{admessage_title}}</p>
    				</a>
                {{/products}}
    </script>

    Variables like {{image}}, {{color}}, {{admessage_title}}, etc. will be filled with values from Adfrom's XML template and can be easily changed in Adform system any time. Note that variables names should be used the same as are predefined on Adform's XML template. Otherwise banner won't find variable value to display. A tip - if you use HTML coded characters (like <br/>, <strong>, etc.) in variable value, then you may render those right using triple brackets in mustache, like so {{{variable_name}}}

    Below in a code it is defined how AdMessage is linked with particular Adform's template using cid and tid variable values. If instructions are followed how to create data template in a step above, a final result gives cid ad tid variable values that could be used in a code below for local banner testing:

    dhtml.adMessage = Adform.AdMessage.build({
           cid: dhtml.getVar('cid', 4790),
           tid: dhtml.getVar('tid', 4869),
           domain: dhtml.getVar('domain', 'http://track.adform.net/banners/'),
           rotseqno: dhtml.getVar ('rotseqno', 0),
           clickTAG: dhtml.getVar('clickTAG', 'http://www.adform.com/'),
           pageSize: 1,
        });

    Note: when banner is uploaded to Adform system these predefined variables cid, tid, domain, clickTAG... values are received from the system. However, when testing the banner locally, it will use the fallback values such as 4790, 4869, etc., and will load a template like this.

     

    Using the following command, the Mustache script will be filled with the particular ad message's values from the template. A gid variable is used here as a referrer to particular ad message id from a template. If testing banner locally, search gid value in a template used - open template in a browser to get ad messages structure listed and look for node like <Group name="First AdMessage" id="217845">. This is particular ad messsge's gid value that could be used for testing locally:

    dhtml.adMessage.getItems([dhtml.getVar('gid', 217845)], function (err, items, info) {
      if (err) {
        // Handle AdMessage service error
        dhtml.addClass(dhtml.byId('wrapper'), 'error');
        dhtml.byId('wrapper').innerHTML = err.message;
      } else {
        dhtml.byId('message').innerHTML = dhtml.mustache('admessage', {
        products: items[0], 
        target : dhtml.getVar('landingPageTarget', '_blank'),
     clickTAG: dhtml.getVar('clickTAG', 'http://example.com'),
        });
      }
    });

    Note: The gid value depends on the template used - in this example it is a second AdMessage. You should provide different value if using another template. Once the banner is uploaded and a template + ad message is assigned to it in a system, gid value will be  inherited from the system dynamically.

  • Assigning ad messages

    Created dynamic content banners in the Adform system should be assigned with an XML data template. Template created and edited via the Banners page on system (see step "Create data template" for more information). Content  Manager Templates are connected to client's account and it is possible to use the same Template for different campaigns of the same client.

    Each ad message on published data template could be assigned to the banner directly (A) or if banner is used in a Banner-Rotator on Adform system then it is possible to select multiple ad messages (B).  In most cases it is done to apply different rotator retargeting options for individual ad message display.

    A. Assign template and Ad message directly to the banner B. Assign multiple Ad messages if banner is placed to rotator

    Dynamic Template

    Select Admessages

    If banner click should take to specific ad mesasge's landing page entered in a data template then an Inherit button must be pressed. Clicking the Inherit button, while editing a banner (asset edit section in system), overrides all the matching asset clickTAG’s landing pages with new ones from a data template's Landing page, according to the template and Ad message selected for that banner.

    Inherit