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 Ads (Legacy)

Dynamic content banner (or simple dynamic content banner) allows to change ad content without producing 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 sum up: 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.

 

To create a dynamic ad, follow the simple 3-step workflow:

  • 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. Create a 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 only 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. Create ad messages. Each item/product/ad message that is wished to be displayed per 1 impression on simple dynamic banner's stage should be added as a single ad message on a template. Amount of ad messages on Adform's template for simple dynamic banner is limited to 10 000. Ad message's title/name must be unique. If not, an error is shown when attempting to save a template. Each ad message gets it's own group message id.

    3. Define 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 cannot 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. Publish the template. Data from template which status is "In progress" or "Modified" is not used/parsed to the banner. Status must be "Published" after all editing tasks are done. Once template is 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 stand for client id – cid:12216 and template id – tid:11030.  Also, when 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. Test the banner locally. Placing the above mentioned variables to banner's code, you can get the dynamic values of the particular ad message loaded locally. Once the banner is placed to system and some template is assigned to it, the variables are inherited dynamically.
  • Form Dynamic Ad Messages

    It is advised to start building a simple dynamic banner with the banner sample provided. Inside the sample you will find banner's HTML source, JavaScript file and 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 divs and add any static information desired. It is important to leave <div id="message"></div> element intact because a dynamic ad message part is inserted into it. 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>

    In a simple dynamic banner project, a JavaScript code is used for data parsing and forming. Dynamic ad message part is formed using a  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 at any time. Note that names of the variables should be the same as in Adform's XML template. Otherwise the banner won't find variable value to display. A tip – if you are using HTML-coded characters (like <br/>, <strong>, etc.) in a variable value, then you may render those correctly using triple brackets in mustache, e.g. {{{variable_name}}}.

    In a code sample below, see how AdMessage is linked with a particular Adform template using cid and tid variable values. If you followed instructions on how to create a 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', 0),
           tid: dhtml.getVar('tid', 0),
           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 the banner is uploaded to Adform system, the values of predefined variables cid, tid, domain, clickTAG... 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 a particular ad message id from a template. When testing the 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', 0)], 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 the example above, it is a second AdMessage. You should provide different value if you are using another template. Once the banner is uploaded and a template & ad message are assigned to it in a system, gid value will be inherited from the system dynamically.

     

  • Assign Ad Messages

    Dynamic content banners should be assigned to an XML data template in the Adform system. The template is created and edited via the Banners page (see "Create Data Template" step for more information). Content Manager Templates are connected to the 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 a 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 a banner click should take to a specific ad message's landing page entered in a data template, then an Inherit button must be clicked. Inherit option overrides all the matching landing pages of the asset clickTAG with the new ones from a data template's Landing page when editing the banner (asset edit section in the system).

    Inherit