Skip to main content

Prebid Client Side (Prebid.js​) - AMP

Commerce Grid DocumentationIntegration Guides WebPrebid Client Side (Prebid.js​)
Table of contents

Introduction

Welcome! This document will explain integrating with Commerce Grid's Prebid solution.

If you are starting a Prebid implementation from scratch, please refer to Prebid's How-to documentation here.

Requirements

You will receive from Criteo

  • A list of identifiers for each ad placement and/or format you have available on the page

You will need to

  • Download prebid.js from Prebid.org or manually build from Github, including the Criteo adapter and the required modules.

  • Map the placements available on each page with the Criteo networkId

  • Criteo complies with the IAB Consent Framework. Please refer to their documentation for more information and examples of certified CMPs.

  • Allow the Criteo bid adapter to have access to the storage (CF next section)

AMP

Criteo's solution is compatible with AMP RTC. Being a registered vendor, all you need to do is to declare Criteo on your amp-ad tags along with the zoneid provided by your Criteo representative. This generates an asynchronous call so Criteo can identify the user and return with a bid. You can define a timeout threshold before calling the adserver. The bid information is automatically sent to the adserver, triggering the Criteo campaigns using custom keyword criteria.

Requirements

YOU WILL RECEIVE FROM CRITEO:

  • A list of identifiers for each ad placement and/or format you have available on the page

  • Code samples demonstrating how to map the placements

  • Creative codes to be used in the adserver

WE WILL NEED YOU TO

  • Implement the Criteo RTC configuration on your amp-ad tags

  • Update your adserver setup. Alternatively, your Criteo contact can provide an automated solution.

    • Create the line items for the different bid prices in your adserver

    • Implement the targeting rules and the creative code

  • Criteo complies with IAB Consent Framework. Please refer to their documentation for more information and examples of certified CMPs.

AMP tags

All you need to do now is to identify your existing AMP-AD tags (see sample on the right) and adapt it to include the Criteo ids provided by your representative. You can find a working example on this page. Otherwise, please refer to the AMP RTC docs for other examples.

The AMP-AD tag with RTC enabled for Criteo will look like below. The snippet below is just an example, please use the identifiers provided by your Criteo contact.

Adserver setup - Keywords

Go to Inventory > Key-values and click on New Key and create the key-value

  • Key name: crt_amp_rtc_pb

  • Value type: Users will enter targeting values when creating line items or checking inventory. (Free-form)

Adserver setup - Order

Go to Delivery > All orders and click on New Order and create one new Order for the Commerce Grid campaign.

Adserver setup - First Line Item

You can create the first line on the same page. The goal is to create one dedicated line item per different CPM price band.

  1. We will create the unitary CPM for this first line item:

    • Name: Please use a self-explanatory name like cdb_1.00

    • Inventory sizes: Please include all formats available on your page. Eg: 728x90, 300x250

    • Labels section: Please check Allow same advertiser exception

    • Type: Please select the priority as agreed with your Criteo representative.

    • Start time: Immediately

    • End time: Unlimited

    • Limit: None

    • Rate: Please include here the CPM. In this first example, we will use $1.00

    • Display Creatives: One or More.

    • Rotate Creatives: Evenly

  2. Finally, please select the inventory for the campaign and add the following targeting:

    1. Type: Choose Key-values

    2. Select a key: Choose crt_amp_rtc_pb

    3. Value: choose is and input 1.00

  3. Finally, hit save and follow with the creative steps next.

Adserver setup - Creatives

For AMP, all inventory sizes (format sizes), must have a unique creative. For example, if your website has a 300x250 and a 320x50, you must create 2 unique creatives. These creatives can live on the same line item.

  1. Go to Delivery > Creatives > All creatives and click on Add creative and type the same advertiser name.

    • Type: Third-party

    • Name: CDB_OnPage_Creative1

    • Code snippet: paste the code located on the right

    • Size: choose the respective size

    • Safeframe: confirm it is selected

  2. Hit Save. Repeat the action for every inventory size you have on your AMP page.

Adserver setup - Creatives Continued

  1. Go back to the first line item created, click on the Creatives tab and on use existing creatives, and you will be able to list and include the recently created one. Please repeat this action for every format you have configured.

  2. The last step is to duplicate this creative as many as unique ad units you have on the same page. I.e.: Should you have up to 3 different 300x250 ad units on your homepage, this means you will need to setup at least 3 different 300x250 creatives for this line item.

  3. The easiest way to achieve this is by selecting one (or multiple) creatives and click on More actions > Copy creative until you have the minimum amounts required.

Adserver setup - Remaining line items

Now that you have the first line item fully configured, you can simply duplicate it and reuse the existing creatives. Your Criteo contact can provide an automated solution. Otherwise, go to the line item pages, select its respective checkbox and click on More actions > Copy and share creatives. Repeat this action for all the different price bands you have.

Please don't forget to update:

  • The line item name

  • The CPM

  • The keyword targeting the respective price band

You can edit those values directly from the list page by clicking on the icon on the corner of each field:

  • Line item name:

  • CPM:

  • Inventory and keyword targeting

  • Start date. Please double check this value as the default one is the next day!

Once you are set, select all the new line items and click on the Resume button.