Introduction
Dynamic creatives are template creatives that dynamically get product information injected to them at runtime. The product information comes primarily from an advertiser feed that needs to be set up separately but can also come from stores, creative data sets or manually created data.
A dynamic creative is a normal HTML5 creative that will be prepared to read a JSON-object containing data that will be displayed inside the creative at the time of impression. This product data could be a product data such as description, price, image URL and landing page URL as well as any generic data on a key value format.
Please see HTML5 Creatives for details on how to prepare a HTML5 creative for use in BidTheatre DSP.
Creative data
The combined data will be exposed for the creative as a JSON-object with advertiser feed products in the products array and all other data in the data-object. The individual field names are configurable but we recommend to use the defaults listed in the example below for product data.
{
"data": {
"storeName": "The Bidtheatre Shop",
"streetAddress": "Urvädersgränd 5"
},
"products":[
{
"price":"$100",
"desc":"Nice shirt",
"name":"Shirt",
"image":"https://creatives.bidtheatre.com/feedimages/1/2.jpg",
"product_url":"https://adsby.bidhteatre.com/click?a=1&url=https%3A%2F%2Fwww.advertiser.com%2Fproduct1"
},
{
"price":"$50",
"desc":"Cool shorts",
"name":"Shorts",
"image":"https://creatives.bidtheatre.com/feedimages/2/3.jpg",
"product_url":"https://adsby.bidhteatre.com/click?a=1&url=https%3A%2F%2Fwww.advertiser.com%2Fproduct2"],
"meta":{
"product_cnt":2
}
}
The JSON listed above can be retrieved inside the creative by using our helper script in the following way
<script src="https://adsby.bidtheatre.com/js/asxhtml5.min.js"></script>
<script>
var jsonProducts = asxhtml5.getDynamicProducts();
</script>
Getting the creative data into the ad
Getting the dynamic product data into the ad can be done in multiple ways and the exact implementation is for the ad creator to decide on. One way could be to use a template language as Mustache.
A minimal and incomplete example could look like this
<!--
This is a placeholder to which we'll
write the complete template data
-->
<div id="products"></div>
<!--
Used for templating, optional, use your own implementation
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js">
</script>
<script>
// get product data
var jsonProducts = asxhtml5.getDynamicProducts();
// template, what html should be constructed for each product
var template = "{{#products}}<a href='{{product_url}}' target='_blank'><div><div class='price'>{{price}}</div><div class='name'>{{name}}</div></div><img src='{{image}}' class='product_image'></a>{{/products}}";
var html = Mustache.to_html(template, jsonProducts);
//push template data into placeholder
document.getElementById('products').innerHTML = html;
</script>
Non-Default product fields
The "Ad Target Template" will map the fields used in the product JSON with product feed columns. The default "Standard Dynamic Ad" template will map fields according to the names used above, (price, desc, name, image, product_url). We recommend to not change this, but if done, a new Ad Target Template will need to be set up and used with the ad.
Click Through
Even if no product data is provided to the creative, the banner must still click through to the advertiser's site. This is required for the creative to pass the audit phase with connected supply partners.
Best Practice
Multiple Products
Prepare the creative to display more than one product, either side by side, or with rotation. The number of provided products may vary, so make sure that the creative still will display correctly.
Images
The creative should either scale product images to fit, or be prepared to receive an agreed dimension on all images, that will match what is provided in the product feed.
Example
For a small example on how the products can be retrieved see this file.
Upload
These creatives are uploaded into BidTheatre DSP exactly the same way as HTML5 creatives with the following addition, once the creative is uploaded, you must assign an "ad target template".