Build Product-Targeting Ads

Greta
Greta
  • Updated

Product targeting ads appear next to a certain product or product category. Instead of targeting a specific audience, based on demographics, geography, or search terms, these ads are shown in placements related to particular products. This way, they can help promote your products to an audience that's already interested in a similar product and intends to buy it.

Before you start building the ad, we recommend that you implement site tracking on the advertiser's website, import their product data into Adform, and select the business rules and targeting strategy to use. This is because a product-targeting ad renders data from the backend, so the data must be imported first. Additionally, when you know the data structure in advance, it'll help to decide on the ad's visuals and design elements.

Note

For examples of product-targeting dynamic ads, see Nucao or Bimbo Bakeries. To preview more dynamic ads examples, explore Adform Creative Showroom.

Set Up Product-Targeting Ads

The overview of product-targeting ad 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 ads with JavaScript code that loads Adform data.

  4. Upload and assign ads to a product feed.

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

For more information, see Set Up Product Retargeting.

Load Data From Adform

Product-targeting ads must use JavaScript code to fetch data from Adform. This section provides code examples for using product-targeting ads in different ways, including standard ads, clickable ads, and carousels.

Product-Targeting Ad

To see an example of a code for implementing product-targeting ads:

  1. Download Product.html.

  2. View the page source code.

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

     <script>
        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,
            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) {
                console.log(items[0]);
                document.body.innerHTML = items[0].product_name;
            } else {
                console.log(error);
            }
        });
    </script>

Note

You'll know CID and TID when you import advertiser data to Adform.

In the browser console, here's an example of what you may see:

$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, the ad receives the advertiser's data imported into Adform, and this data can now be rendered in the ad.

Clickable Ad

To see a code example for a clickable ad:

  1. Download Clickable-Product.html.

  2. View the page source code.

For an ad to click through to product, include $link:

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

Make sure to use $link received in the product info, not product_deeplink. $link: $link contains Adform's click tracker, which redirects to the final product landing page with ;cpdir=.

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

Note

product_deeplink leads directly to the product's landing page, so Adform won't count the click. Don't use product_deeplink as a direct click-through.

Send Dynamic Product View Event to Adform

For the ad to send a 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, which sends data about which product and data feed it came from.

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 in a carousel, you can increase the page size in Adform.AdMessage.build method.

To see a code example for an ad with multiple products:

  1. Download Multiple.html.

  2. View the page source code.

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: 3,
    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) // let's pass product (item) to renderProduct function to actually show it in banner
    } else {
       console.log(error);
    }
});

renderProducts has an array containing the data of three products. You can loop through the array to render each product in a carousel or in a similar way to display multiple products.

Note

Adform's backend can return up to 100 products.

In most cases, it's optimal to just load one product initially, and then load additional products on the carousel scroll. To see a code example:

  1. Download OnDemand.html and

  2. View the page source code.

To implement this, use pageSize: 1 and load other pages in getPage.

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/')
})
function loadOneMoreProduct() {
    message.getPage(productCount, function (error, items) {
        if (!!items && !!items[0] && !error) {
            renderProduct(items[0]);
            productCount++;
        } else {
            console.log(error);
            console.log('No (more) products in data feed?');
        }
    });

This works by building an ad message with the same Adform.AdMessage.build method. Assign it to a variable, like message in this code example:

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/')
})

Then the following code loads pages or products:

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 any 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, etc.

Was this article helpful?

/
How we can make it better?

Thank you for your feedback!