Build Product Targeting Banners

Greta
Greta
  • Updated

Note

Before starting to build an actual banner, we recommend tagging the advertiser's website, importing the advertiser's product data into Adform, and deciding about the business rules and targeting strategy to be used. That is because a banner itself doesn't do much more than represent the data received from the backend. For the banner to receive data, it needs to be imported already. It will also be much easier to make decisions about the banner's visuals and design the banner's elements if the structure of the data to be shown is already known.

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

Nucao

Bimbo Bakeries

Axo Finans AS
Nucao.png
Bimbo.png
Axo.png

The general product targeting banner setup looks like this:

  1. Create and implement tracking points on the advertiser's website.

  2. Create a product feed file.

  3. Build product targeting banners.

  4. Upload and assign banner(s) to a product feed.

  5. Set up a product retargeting strategy for your banner.

For more information, see Set Up Product Retargeting.

Load Data From Adform

See Adform Studio for code example:

  1. Go to Adform Studio.

  2. On the left-side navigation, click files.png.

  3. Click 1.product.html.

  4. Check the code.

To receive data from Adform, the banner has to use DHTML library:

Adform.AdMessage.build({
    cid: dhtml.getVar('cid', '56310'),
    // receive Client's (advertiser's) ID from Adform or fallback to hardcoded CID on local machine.
    tid: dhtml.getVar('tid', '18180'),
    // same as above, just TID (template ID) - ID of data feed imported to Adform
    clickTAG: dhtml.getVar('clickTAG', 'https://track.adform.net/C/?bn=12345678'),
    // clickTAG or fallback to fake click counter on local machine
    pageSize: 1,
    // receive one product
    bn: dhtml.getVar('bn', '0'),
    // banner number (BN) will be defined when banner is uploaded to Adform
    dcoEngineId: dhtml.getVar('dcoEngineId', 2),
    // business rules to use, locally let's fallback to 2 - view recency
    domain: dhtml.getVar('domain', 'https://track.adform.net/banners/')
    // domain banner will be running in
}).getPage(1, function (error, items) {
    if (!!items && !!items[0] && !error) {
        console.log(items[0]); // will log product to console
        document.body.innerHTML = items[0].product_name;
    } else {
        console.log(error);
    }
});

Note

You will know CID and TID when you import advertiser data in Adform.

In the browser console it should look like this:

$id: "4502293548408822486"
$link: "https://track.adform.net/C/?bn=12345678;cpdir=http%3A%2F%2Fdcodemo.adform.com%2Feshop%2F%3Fproduct_id%3D1"
$name: "Head saver-1"
$pdata: "CNa1w9uMhNe9PhIMSGVhZCBzYXZlci0x0"
default_order: "0"
product_category: "Good Ideas"
product_category_id: "Good Ideas"
product_deeplink: "https://dcodemo.adform.com/eshop/?product_id=1"
product_id: "1"
product_image: "https://files.adform.net/Banners/Stream/images/head-saver.jpg"
product_name: "Head saver"
product_price: "90.00"
top_offer: "false"

This way a banner receives advertiser's data imported to Adform, and this data can now be rendered in the banner.

Clickable Banner

See Adform Studio example:

  1. Go to Adform Studio.

  2. On the left-side navigation, click files.png.

  3. Click 2.clickable-product.html.

  4. Check the code.

For the banner to click through to product, you should include $link for a click to go through:

banner.addEventListener('click', function () {    window.open(product.$link, '_blank');});

Make sure to use $link received in product info, not product_deeplink.

$link: https://track.adform.net/C/?bn=12345678;cpdir=http%3A%2F%2Fdcodemo.adform.com%2Feshop%2F%3Fproduct_id%3D1

You can see that $link: $link contains Adform's click tracker which then redirects (with ;cpdir=) to the final product's landing page.

Using product_deeplink will land directly to the product's landing page, Adform will not count the click. Don't use product_deeplink as a direct click- through.

Send Dynamic Product View Event to Adform

For the banner to send dynamic product view event to Adform, use:

const VIEW_EVENT_ID = '152'; // 152 is reserved in Adform for Product View

if (window.dhtml) {
    dhtml.appendEvents({
        [VIEW_EVENT_ID]: 'Dynamic Product View'
    });
}

The product is then rendered with the following code to send data about what exact product from which data feed was shown.

dhtml.$sendEvent(VIEW_EVENT_ID, null, { bv1: dhtml.getVar('tid'), bv2: product.$id, bv3: product.$name }, 'pdata=' + product.$pdata);

For more details, see Code HTML5 Banners.

Show Multiple Products

To show multiple products, product carousel, you can increase the page size in Adform.AdMessage.build method:

See Adform Studio example.

Adform.AdMessage.build({
    cid: dhtml.getVar('cid', '56310'),
    tid: dhtml.getVar('tid', '18180'),
    clickTAG: dhtml.getVar('clickTAG', 'https://track.adform.net/C/?bn=12345678'),
    pageSize: 3, // product count to get
    bn: dhtml.getVar('bn', '0'),
    dcoEngineId: dhtml.getVar('dcoEngineId', 2),
    domain: dhtml.getVar('domain', 'https://track.adform.net/banners/')
}).getPage(1, function (error, items) {
    if (!!items && !!items[0] && !error) {
        renderProducts(items);
    } else {
        console.log(error);
    }
});

In renderProducts you see an array containing data of three products.

You can then loop through the array to render each product in a nice carousel or similar.

Note

Adform's backend can return up to 100 products.

In most cases, it's optimal to just load one product at first, and then load other products on a carousel scroll. To achieve this, use pageSize: 1 and in getPage, load other pages:

Adform.AdMessage.build({
    cid: dhtml.getVar('cid', '56310'),
    tid: dhtml.getVar('tid', '18180'),
    clickTAG: dhtml.getVar('clickTAG', 'https://track.adform.net/C/?bn=12345678'),
    pageSize: 1, // product count to get
    bn: dhtml.getVar('bn', '0'),
    dcoEngineId: dhtml.getVar('dcoEngineId', 2),
    domain: dhtml.getVar('domain', 'https://track.adform.net/banners/')
}).getPage(2, function (error, items) { 
    // loads second page (product as page contains only one)
    if (!!items && !!items[0] && !error) {
        renderProducts(item[0]);
    } else {
        console.log(error);
    }
});

See Adform Studio example:

  1. Go to Adform Studio.

  2. On the left-side navigation, click files.png.

  3. Click 4.on-demand.html.

  4. Check the code.

This works by building ad message with the same Adform.AdMessage.build method, assign it to a variable (let's call it message):

const message = Adform.AdMessage.build({
    cid: dhtml.getVar('cid', '56310'),
    tid: dhtml.getVar('tid', '18180'),
    clickTAG: dhtml.getVar('clickTAG', 'https://track.adform.net/C/?bn=12345678'),
    pageSize: 1,
    bn: dhtml.getVar('bn', '0'),
    dcoEngineId: dhtml.getVar('dcoEngineId', 2),
    domain: dhtml.getVar('domain', 'https://track.adform.net/banners/')
})

It then loads pages/products with:

message.getPage(productToLoad, function (error, items) {
    if (!!items && !!items[0] && !error) {
        // do something with product
    } else {
        console.log(error);
        console.log('No (more) products in data feed?');
    }
});

You can also check other methods the message has:

message:
{setProperties: ƒ, getProperties: ƒ, getPage: ƒ, getItems: ƒ, getDefault: ƒ}

message.getProperties()
// will return something like
{total: 17, totalPages: 6, pageSize: 3, ids: Array(17), limit: 100}
// so you will know e.g. how many products the banner will be able to load.

//IDs in properties object:

ids: Array(17)
0: "4502293548408822486"
1: "6066320661192145994"
2: "7656254616925782287"

// will contain Product IDs (on Adform, NOT client's data feed), they can be used with getItems:

message.getItems('7656254616925782287', (error, product) => {console.log(product)})

// to get a particular product and etc.

Was this article helpful?

/
How we can make it better?

Thank you for your feedback!