Appearance
Basket Tag Implementation Guide
The Basket Tag (V2) allows Click2Buy to track the exact contents of a user's basket upon order confirmation. This provides brands with detailed ROI analysis.
Script Installation
Paste the following script on your Order Confirmation Page.
html
<script>
(function(i,s,o,g,r,a,m){
i[r] = i[r] || {q:[],validationProcess:function(){
i[r].q.push(arguments)
}};
a = s.createElement(o);
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a,m);
})(window,document,'script','https://rs.clic2buy.com/retailers/YOUR_RETAILER_ID.js','C2B');
// Initialize the validation process with order parameters
C2B.validationProcess(ORDER_PARAMETERS);
</script>Replace YOUR_RETAILER_ID with the ID provided by your Click2Buy contact.
IMPORTANT
Action Required: ORDER_PARAMETERS is a placeholder for your actual order data. You must replace it with a JavaScript object containing real-time data from your checkout process. Without this customization, no order data will be recorded.
Order Parameters
The C2B.validationProcess function expects an object with the following fields:
| Field | Type | Required | Description |
|---|---|---|---|
totalAmount | Number | Required | Total amount of the basket. |
currency | String | Required | Currency code (ISO 4217, e.g., "EUR"). |
products | Array | Required | An array of product objects (see below). |
Product Object Fields
| Field | Type | Required | Description |
|---|---|---|---|
ean | String | Required* | EAN-13 code of the product. |
upc | String | Optional | UPC code of the product. |
retailerReference | String | Required* | Internal reference/SKU used by the retailer. |
amount | Number | Required | Unit price of the product. |
quantity | Number | Required | Quantity purchased. |
name | String | Required | Name of the product. |
brand | String | Required | Brand name of the product. |
manufacturerReference | String | Optional | Manufacturer's reference. |
packaging | String | Optional | Product packaging details. |
metadata | JSON | Optional | Any other useful data (free structure). |
TIP
Product Identification: We need at least the EAN, UPC, or retailerReference to identify the product. If a mandatory field is unavailable, you can pass null or leave it empty if your configuration allows.
Integration via Google Tag Manager (GTM)
IMPORTANT
Don't just copy-paste: Using the Basket Tag in GTM requires you to map your website's Data Layer variables to Click2Buy's parameters. If you only paste the script without configuring the variables below, the integration will fail.
Before adding the tag, ensure you have created GTM variables (e.g., {{currency}}, {{totalAmount}}, {{products}}) that pull data from your data layer.
1. Format the Products
You might need to map your existing data layer products to the Click2Buy format:
javascript
var products = {{products}}; // From your data layer
var c2bProducts = products.map(function(product) {
return {
brand: product.brand,
name: product.name,
ean: product.ean,
amount: product.price,
retailerReference: product.id,
quantity: product.quantity
};
});2. Call the validation function
Inside a Custom HTML tag in GTM:
javascript
C2B.validationProcess({
totalAmount: {{totalAmount}},
currency: {{currency}},
products: c2bProducts
});Example Implementation
javascript
C2B.validationProcess({
totalAmount: 400.00,
currency: 'EUR',
products: [{
ean: '3528700065817',
manufacturerReference: '006581',
retailerReference: 'M099876',
amount: 100.00,
quantity: 4,
name: 'CrossClimate2',
brand: 'Michelin'
}]
});Common Integration Pitfalls
To ensure your implementation is successful, avoid these common mistakes:
- Leaving Placeholders: Forgetting to replace
YOUR_RETAILER_IDor leavingORDER_PARAMETERSas a literal string. - Missing GTM Variables: Using
{{totalAmount}}in a Custom HTML tag without actually defining a variable namedtotalAmountin your GTM container. - Static Data: Passing hardcoded values instead of dynamic variables. Every order must push its own unique amount and product list.
- Wrong Data Types: Passing the
totalAmountoramountas a String (e.g.,"12.34") instead of a Number (e.g.,12.34).
If you have doubts about your configuration, please refer to the Verification Guide to test your implementation.