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!

Product Recommendation Ad


Product Recommendation
 banners are used to show relevant products (from big data feed) according to the browsers cookie score/tracking points data collected and  selected re-targeting model.

Steps for Product Recommendation Ad Setup:

  • The implementation of tracking points

    Adform site tracking team (site-tracking@adform.com) could help you to built DCO Tracking Point (TP) scripts. These scripts should be implemented and fire on particular product view, add to basket or purchase state. Regarding these TP fired and what are the cookie values stored on visitors machine Adform Product Targeting solution picks the most suitable product (ad message) to display. This is basic product targeting engine principle.

    Important: fired product ID with tracking point variables must match product ID used in data feed, as if not - retargeting engine will not work as expected.

     

  • Create Adform's XML template

    The data synchronization should be done between client's product feed source (XML, CSV, JSON) and the Adform's XML template. Adform XML is an XML template on Adform system that is created manually using Data Transformer tool and the data  for Product Targeting banners is filled doing automatic data import (transformation). Data transformer is a powerful tool that allows user to easily convert client's data source to Adform XML structure, do imported values customizations (if needed), apply business rules or retargeting modules in just few workflow steps.

    Automatic data import synchronize products data within defined interval of time - like once a day, twice a day, every 10 or 15 minutes. Minimum update interval is 5 minutes (can not be smaller). Using Adform Data transformer 2Gb+ files can be transformed. Know more how to work with XML Transformer tool in Adform HELP Center (system login required).

    Note: once the feed is created, 4 retargeting engines are enabled by default: "View recency", "Interest score", "Interest score with rotation", "Viewed category". For more information about retargeting models, please refer to this documentation page product targeting models (system login required).

     

    Requirements and specs for XML data source

    Collection:

    • via HTTP or FTP (if FTP - login credentials should be provided).

    Important: if there is a security certificate used (HTTPS feed source) a valid SSL certificate must be used. If not data source should be moved to HTTP instead.  Data sources could be hosted on SFTP as well.


    XML validation check:

    • document needs to have a root node;
    • every node needs to be closed correctly. No self closing tags (like <sample/>) are supported yet, for empty nodes please use full tags expression like <sample>-</sample>
    • node name can't contain empty spaces.  <node name>info</node name> is not valid node name;
    • no HTML tags in content (e.g. no <br/> tag like "1st line.<br/> 2nd line.") are recomended to use;
    • encoding should be UTF-8, ISO-8859-1 or Windows-1252: or better always to use UTF-8;
    • every product node(instance) must have a unique value, something like id, sku, number or unique string combination;
    • product item's unique value should not be longer then 200 symbols (including spaces, commas, etc.).
    • product item's values should not be empty, at least one character is required for each (can not be only space). 
    • it is recommended, that all external sources (e.g. image url, landing page url, data feed url) use secure protocols (HTTPS), if it is not for a direct campaign. HTTP can be used in direct campaign.

    Important: product ID value must be unique for each product. Also it must be the same / matching to the one fired with DCO Tracking Point variables for specific item.  Matching product ID value is essential keyword in retargeting process.
    The default output variables are product_id, product_category_id, product_name, product_deeplink, product_image. But this list could be filled with any other variable you like. Each variable value is filled with data from XML source
    .

     

    Source XML sample: if we get from a client such XML structure: http://test.adform.com/banners/mindaugas/xmls/e-shop-xml.xml it is very good and suitable to make a transformation.

    <products>
    <product>
    <product_name>Computer 123</product_name>
    <product_id>123456</product_id>
    ...
    <product_deeplink>http://client.com/products/computer123</product_deeplink>
    <product_image>...</product_image>
    </product>
    <product>
    <product_name>Computer 456</product_name>
    <product_id>456789</product_id>
    <product_category_id>computers</product_category_id>
    ...
    <product_deeplink>http://client.com/products/computer456</product_deeplink>
    <product_image>...</product_image>
    <product>
    ...
    <products>

    Info: Adform Technical department guys could help if any issues appear. Contact Adform Technical Support: technical@adform.com

     

    Requirements and specs for CSV data source

    Collection:

    • via HTTP or FTP - login credentials should be provided.

    CSV structure validation check:

    • first row should be set as column (field) names;
    • fields values should be separated with comma (,) vertical bar (|) , semicolon (;) delimiter or TAB separated;
    • if comma (,) is used as a field values delimiter and there are texts that contain commas then text strings should be added to double or single quotes qualifier, like:
      id111,Product A,"Some text string, another word, test",http://deeeplink.com,price 11eur
    • encoding should be set to UTF-8;
    • every product instance must have a unique value, something like id, sku, number or unique string combination;
    • product item's unique value should not be longer then 200 symbols (including spaces, commas, etc.).
    • product item's values can not be empty, at least one character is required for each (can not be only space). 
    • it is recommended, that all external sources (e.g. image url, landing page url, data feed url) use secure protocols (HTTPS), if it is not for a direct campaign. HTTP can be used in direct campaign.

    Tip: if CSV is formed right after opening it with MS Excel you should see data values nicely filled to columns.

     

    CVS source samples:

    CSV file with comma delimited fields - http://test.adform.com/banners/mindaugas/csv/comma_delimited.csv:

    product_id,product_name,product_category_id,product_deeplink,product_image,product_price
    id-1,Head saver,Head holders,http://dcodemo.adform.com/eshop/?product_id=1,http://files.adform.net/Banners/Stream/images/head-saver.jpg,90
    id-2,Diet belt,Clothes,http://university.adform.com/eshop/?product_id=2,http://files.adform.net/Banners/Stream/images/diet-belt.jpg,10.50
    id-3,Washing boots,Good Ideas,http://university.adform.com/eshop/?product_id=3,http://files.adform.net/Banners/Stream/images/washing-boots.jpg,30.33
    id-4,Dream pillow,Head holders,http://university.adform.com/eshop/?product_id=4,http://files.adform.net/Banners/Stream/images/dream-pillow.jpg,150.00
    id-5,Time killer,Good Ideas,http://university.adform.com/eshop/?product_id=5,http://files.adform.net/Banners/Stream/images/time-killer.jpg,9.99

    CSV file with semicolon delimited fields - http://test.adform.com/banners/mindaugas/csv/semicolon_delimited.csv:

    product_id;product_name;product_category_id;product_deeplink;product_image;product_price
    id-1;Head saver;Head holders;http://university.adform.com/eshop/?product_id=1;http://files.adform.net/Banners/Stream/images/head-saver.jpg;90
    id-2;Diet belt;Clothes;http://university.adform.com/eshop/?product_id=2;http://files.adform.net/Banners/Stream/images/diet-belt.jpg;10.50
    id-3;Washing boots;Good Ideas;http://university.adform.com/eshop/?product_id=3;http://files.adform.net/Banners/Stream/images/washing-boots.jpg;30.33
    id-4;Dream pillow;Head holders;http://university.adform.com/eshop/?product_id=4;http://files.adform.net/Banners/Stream/images/dream-pillow.jpg;150.00
    id-5;Time killer;Good Ideas;http://university.adform.com/eshop/?product_id=5;http://files.adform.net/Banners/Stream/images/time-killer.jpg;9.99

    CSV file with comma delimited fields and texts separated commas -
    http://test.adform.com/banners/mindaugas/csv/comma_delimited_texts.csv:

    product_id,product_name,product_category_id,product_deeplink,product_image,product_price
    id-1,"Head saver, product",Head holders,http://university.adform.com/eshop/?product_id=1,http://files.adform.net/Banners/Stream/images/head-saver.jpg,90
    id-2,"Diet belt, nice item",Clothes,http://university.adform.com/eshop/?product_id=2,http://files.adform.net/Banners/Stream/images/diet-belt.jpg,10.50
    id-3,"Washing boots, good idea",Good Ideas,http://university.adform.com/eshop/?product_id=3,http://files.adform.net/Banners/Stream/images/washing-boots.jpg,30.33
    id-4,"Dream pillow,sweet dreams",Head holders,http://university.adform.com/eshop/?product_id=4,http://files.adform.net/Banners/Stream/images/dream-pillow.jpg,150.00
    id-5,Time killer,Good Ideas,http://university.adform.com/eshop/?product_id=5,http://files.adform.net/Banners/Stream/images/time-killer.jpg,9.99

    Info: Adform Technical department guys could help if any issues appear. Contact Adform Technical Support: technical@adform.com

     

    Requirements and specs for JSON data source

    Collection:

    • via HTTP or FTP - login credentials should be provided.

    JSON structure validation check:

    • encoding should be set to UTF-8;
    • every product instance must have a unique value, something like id, sku, number or unique string combination;
    • product item's unique value should not be longer then 200 symbols (including spaces, commas, etc.);
    • product item's values should not be empty, at least one character is required for each (can not be only space). 
    • it is adviced to use objects as 1 level structure.
    • it is recommended, that all external sources (e.g. image url, landing page url, data feed url) use secure protocols (HTTPS), if it is not for a direct campaign. HTTP can be used in direct campaign.

    JSON source structure sample: http://test.adform.com/banners/mindaugas/json/data.json

    {
      "products": {
        "product": [
          {
            "product_id": "id-1",
            "product_name": "Head saver",
            "product_category_id": "Head holders",
            "product_deeplink": "http://dcodemo.adform.com/eshop/?product_id=1",
            "product_image": "http://files.adform.net/Banners/Stream/images/head-saver.jpg",
            "product_price": "90"
          },
    		.....
          {
            "product_id": "id-10",
            "product_name": "Winter wear",
            "product_category_id": "Clothes",
            "product_deeplink": "http://dcodemo.adform.com/eshop/?product_id=10",
            "product_image": "http://files.adform.net/Banners/Stream/images/winter-wear.jpg",
            "product_price": "400.00"
          }
        ]
      }
    }

    Info: Adform Technical department guys could help if any issues appear. Contact Adform Technical Support: technical@adform.com

     

  • Product targeting banner specs

    Once client‘s feed has been synchronized with Adform’s XML template, template's variables can be provided and banner can be tested locally. Variables allow seeing converted product feed information in the Product Targeting ad locally or in Adform Studio.

    Creating Product Ad is similar to creating HTML Banners for Adform Content Manager.

    a) Html file must have dhtml library and Products component included in a header element:

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

    b) Build connection between Adform data template and banner:

    dhtml.adMessage = Adform.AdMessage.build({
                    cid: dhtml.getVar('cid', 28538),
                    tid: dhtml.getVar('tid', 12388),
                    dcoEngineId: dhtml.getVar('dcoEngineId', 2),
    				bn: dhtml.getVar('bn', 0),
                    domain: dhtml.getVar('domain', 'http://track.adform.net/banners/'),
                    clickTAG: dhtml.getVar('clickTAG', 'http://www.adform.com/'),
                    pageSize: 4
                });

    cid, tid, domain and clickTAG values are received from the system when banner is uploaded to Adform. When testing banner locally, in HTML5 Studio or banner preview use dcoEngineId to load data from feed.

    Note: Once client’s product feed is synchronized with Adform’s template, different cid and tid values will be provided.


    c) setupProducts function is used to define Product Ad properties:

    dhtml.setupProducts({
       container: dhtml.byId('productsContainer'),
       layout: dhtml.getVar('layout', 'horizontal'),
       pageSize:   parseInt(dhtml.getVar('pageSize', 3), 10), //How many products to show
       stepSize:   parseInt(dhtml.getVar('stepSize', 1), 10), //How many products to scroll
       perItem:    parseInt(dhtml.getVar('perItem', 1), 10), //There can be several products shown per one item
       duration:   parseInt(dhtml.getVar('duration', 500), 10), //Animation speed
       autoScroll: parseInt(dhtml.getVar('autoScroll', 1), 10) //If autoscroll should be enabled
     }, productsCallback)

    It will define how many products are showed at once, the scroll step, and if animation should be enabled.

    d) Dynamic template for product is formed using Mustache script:

    <!-- Dynamic template for single Product Item -->
            <script type="text/mustache" id="item">
                {{#products}}
                  <div class="product">
                    <a href="{{$link}}" target="{{target}}" class="product-link">
                        {{#product_image}}
                            <div class="product-photo photo">
                                <img src="{{product_image}}" alt="{{product_id}}">
                            </div>
                        {{/product_image}}
                        <p class="product-label product-name">{{product_name}}</p>
                        <p class="product-label product-category">{{product_category_id}}</p>
                        <p class="product-label product-price">{{product_price}}</p>
                    </a>
                  </div>
                {{/products}}
            </script>

    {{product_image}}, {{product_price}}, {{product_name}}, etc. will be filled from the products template.

    Important: please leave {{$link}} as href value reference. Do not change it to {{product_deeplink}}. {{$link}} will inherit product deeplink value automatically after click through redirect is made.



    e) productsCallback function fills in Mustache template and handles product scrolling. If there were an outage in service from the recommendation engine (a 404 or a malformed response) then function has a built in alternate logic to display fallback asset or any static content.

    Important: update function code to display proper fallback prior launching the ad to go live.

    function productsCallback(error, productsInstance) {
      if (error) {
    	//display fallback asset (or static content) if there were an outage in product recommendation service 
    	dhtml.addClass(dhtml.byId('wrapper'), 'static');
    		var image = dhtml.getAsset(1) || 'assets/logo.png';
    		static_content = '<div>This is a falback message<br><img src='+image+' alt="fallback image"></div>';	
    	dhtml.byId('wrapper').innerHTML = static_content;	
      } else {
    	var prev = dhtml.byId('prev');
    	var next = dhtml.byId('next');
    
    	/**
    	 * itemShow event is emitted for each item that is currently
    	 * visible in the view/mask and additionally for items
    	 * that must be pre-cached, for smooth animation.
    	 *
    	 * node - HTMLElement of Products Scroller
    	 * data - loaded items from AdMessage service
    	 */
    	productsInstance.on('itemShow', function (node, data) {
    	  node.innerHTML = dhtml.mustache('item', {
    		products: data,
    		target : dhtml.getVar('landingPageTarget', '_blank')
    	  });
    	});
    
    	/**
    	 * itemHide event is emitted for each item that is not used in animation. 
    	 */
    	productsInstance.on('itemHide', function (node) {
    	  node.innerHTML = '';
    	});
    
    	/**
    	 * scroll is emitted on every scroll action.
    	 */
    	productsInstance.on('scroll', function (currentIndex, nextIndex, maxIndex) {
    	  if ( ! nextIndex) {
    		dhtml.addClass(prev, 'disabled');
    	  } else {
    		dhtml.removeClass(prev, 'disabled');
    	  }
    
    	  if ( ! (nextIndex - maxIndex)) {
    		dhtml.addClass(next, 'disabled');
    	  } else {
    		dhtml.removeClass(next, 'disabled');
    	  }
    	});
    
    	prev.onclick = function () {
    	  if (productsInstance.previous()) {
    		// Send Adform previous button press event if previous action is successful
    		dhtml.sendEvent(dhtml.PREVIOUS_BUTTON_PRESS);
    	  }
    	};
    
    	next.onclick = function () {
    	  if (productsInstance.next()) {
    		// Send Adform next button press event if next action is successful
    		dhtml.sendEvent(dhtml.NEXT_BUTTON_PRESS);
    	  }
    	};
      }
    }
  • Applying business rules

    Data Transformation tool enables to apply Business rules (BR) for the feed. BR helps to filter out, recommend items for specific user more accurately.  BR controls the feed source that is parsed to the banner from ad serving recommendation engine. There are 6 Business rules possible to use:

    • Ad defaults: adds 100 items to feed the banner. If the recommended product count is not large enough, the first 100 products from the provided source file are stored as defaults and added to each recommendation. It is set by default, as if not, then banner would be empty until we gain some score for any item(s).
    • Ignore Interaction: define which interaction should be ignored: View, Basket or Buy. By default is Buy – if item is bought, then it is not recommended any more in a feed. This BR is enabled by default.
    • Purchased Products Only: if BR applied recommendations only show products that user purchased.
    • Ignore by TIME:  ignores (or use) old tracking information – adserver checks cookie score save time and forms recommendation list from newer or older items then entered.
    • Insert Top Offers: first <top_offer>true<top_offer> should be added to data item before transformed. If this rule used, items are listed in front of recommendation parsed result.
    • Filter Top Offers: first <top_offer>true<top_offer> should be added to data item before transformed. This rule enables to use (or ignore) only those items from XML data, that has ‘true’ identifier.

    Define top offer in data source

    First, add a mark in the feed:

    <product>
    <product_id>1</product_id>
    <product_name>Head saver</product_name>
    <product_category_id>Good Ideas</product_category_id>
    <product_deeplink>http://dcodemo.adform.com/eshop/?product_id=1</product_deeplink>
    <product_image>
    http://files.adform.net/Banners/Stream/images/head-saver.jpg
    </product_image>
    <product_price>90.00</product_price>
    <top>true</top>
    </product>

    While setting up the feed with XML transformer tool, in the Field Mapping step Add a custom field. Name the field as top_offer and drag top offer field (which was provided in the feed source). Then, in the Business Rules page, select either "Filter Top Offers" or "Insert Top Offers"


Product Recommendation Banner samples

PRODUCT RECOMMENDATION BANNER 300x250:  shows 3 products on scene, horizontal auto scroll is disabled.
Banner: preview Support Preview Icon, source download Support Source Icon.

PRODUCT RECOMMENDATION BANNER 300x300:  shows 1 products on scene, horizontal auto scroll is disabled.
Banner: previewSupport Preview Icon, source downloadSupport Source Icon .

PRODUCT RECOMMENDATION BANNER 930x180:  shows 3 products on scene, horizontal auto scroll is disabled.
Banner: previewSupport Preview Icon, source downloadSupport Source Icon .

PRODUCT RECOMMENDATION BANNER 120x600:  shows 3 products on scene, vertical auto scroll is disabled.
Banner: previewSupport Preview Icon, source downloadSupport Source Icon .

PRODUCT RECOMMENDATION BANNER 160x600:  shows 2 products on scene, auto scroll is enabled.
Banner: previewSupport Preview Icon, source downloadSupport Source Icon .

PRODUCT RECOMMENDATION BANNER 300x600:  shows 6 products on scene, 2 products per 1 <li> item, vertical auto scroll is disabled.
Banner: previewSupport Preview Icon, source downloadSupport Source Icon .