Use Google Tag Manager

The Cleverbridge Google Tag Manager (GTM) integration is the recommended way to manage tracking on your checkout pages. GTM gives you a single, centralized container and controller for all tags, so you can launch, test, and refine third-party tracking without code changes or Commerce Assistant (CA) setup.

note

Google Tag Manager works on both Checkout 1.0 and Checkout 2.0 pages. The list of supported events and tag templates may differ between versions; see the sections below for details.

Set up the integration

To integrate GTM with your Cleverbridge checkout pages:

1. Create a GTM account. For more information, see Google Tag Manager.
2. Contact the Client Experience team to enable the GTM data layer on your checkout pages.
3. Set up your GTM tags and triggers using Cleverbridge data layer values and events.

How events work

To make the concept easier to follow, the flow below shows a simplified version of how GTM interacts with the Cleverbridge dataLayer.

1. When the GTM integration is enabled, a dedicated data layer is created on every Checkout page. This layer acts as a container for data fields that can be used by GTM.
2. When an events happens on a Checkout page, a new data object is added to this layer.
3. GTM reads this object and resolves the Data Layer variables to their most recent values.
4. You can use these values to create rules that - provide values for other tags, trigger specific events, or fire tags.
5. When a tag fires, it reads the current data and sends it to the chosen destination (e.g., GA4, Google Ads, Meta Pixel).

note

Previous entries stay in the array until the page reloads.

Understanding the data fields

Data fields are the fields that represent information available at the Checkout page in Cleverbridge. When an event happens, these fields and their current values are saved in the data layer.

These include such details as:

• Transaction details, including the transaction id, transaction currency and total transaction amount.
• Details of the products in the cart, such their names and SKUs, categories, prices and amounts.
• Specific checkout screen, at which the data is passed, and the event that has caused the system to collect the data.
• Other information, including the sessions id, language, applied coupons, and x-parameters passed through checkout.

Data Layer variables

User-defined variables in GTM act like labels that tell GTM which pieces of information to pick from the data layer. Think of the data layer as a shelf full of boxes, each box holding a data field. By creating the variables, you’re essentially telling GTM “I want the value inside this box whenever it appears.” These values are than used to populate tag fields or define trigger rules (for instance, “fire when paymentStatus = paid”).

You can find detailed guidelines at Google’s document on user-defined variables. The guide covers all user-defined variables. For our purposes, you need to set the Type to Data Layer Variable.

Example

There is a value of the field called transactionId in the Cleverbridge data layer. We want to create a GTM variable cleverbridgeTransactionId that will reference the transactionId value from the Cleverbridge data Layer. In the Variable configuration, it is important to set Type to Data Layer Variable, and use the exact name of the field in Cleverbridge as a Data Layer Variable Name.

You can then reference it in tags and triggers using the variable name, {{cleverbridgeTransactionId}}.

Cleverbridge events

Cleverbridge supports a comprehensive set of events that span the entire checkout flow — from the moment a customer opens the checkout page to the successful completion of a purchase. These events make it possible to capture every key interaction and send accurate, structured data to your analytics, advertising, attribution, or marketing automation tools. The list of events depends on the checkout model you’re using.

Events in Checkout 2.0

Event	Triggered when
begin_checkout	Customer opens Checkout 2.0 for the first time.
page_view	Customer views any step in the checkout flow. Fires on initial load and each step change.
add_to_cart	Customer adds a recommended product to the cart. The event fires immediately when the customer clicks the Add button, before the page reloads. Also emits select_promotion for the chosen recommendation.
select_promotion	A recommendation/promotion is selected and added to the cart. Emitted together with add_to_cart.
remove_from_cart	Customer removes a line item from the cart. The event fires immediately when the customer clicks the Remove button, before the page reloads.
add_payment_info	Customer completes all required payment fields, or selects a payment method with no input fields (for example, wire transfer). Fires as soon as the method selection or entered data becomes valid.
purchase	Customer clicks Buy now and the system successfully generates purchase ID with no validation errors. Fires exactly once per unique purchase ID.

Checkout 1.0

Event	Triggered when
initialize checkout	Any of the Checkout pages is loaded.
cartOpen	Customer opens the checkout for the first time.
checkout	Customer advances to the next step in the checkout flow.
removeFromCart	Customer removes a line item from the cart. The event fires immediately when the customer clicks the Remove button, before the page reloads.
addToCart	Customer adds a recommended product to the cart. The event fires immediately when the customer clicks the Add button, before the page reloads.
submitOrder	Customer clicks the Buy Now button. The event fires immediately when the customer clicks the button, before the page reloads. This event might be triggered before customer corrects the order and finalizes the order submission.
purchase	Order is submitted successfully (regardless of payment capture), and the customer reaches the confirmation page.

Data fields and examples for each event

Each event pushes a dedicated data object to the dataLayer. These typically include an event name and additional parameters describing the context, such as product details, transaction values, or payment information.

The exact objects and available fields depend on the checkout model you’re using:

Checkout 2.0

begin_checkout fields

Field	Type	Description
event	string	Event name. Always "begin_checkout".
ecommerce.currency	string	ISO 4217 currency code selected by the customer.
ecommerce.value	number	Order total (gross) at the time of the event.
ecommerce.items	array	Array of items currently in the cart.

ecommerce.items fields

Field	Type	Description
item_id	string	Product ID.
item_name	string	Product display name.
affiliation	string	Always "cleverbridge".
coupon	string	Applied coupon code, if any.
discount	number	Item-level discount (gross).
item_brand	string	Client account name.
item_category	string	Product category.
item_variant	string	Internal product name or variant.
price	number	Discounted item price (gross).
quantity	number	Quantity of the item.

Example

 dataLayer.push({
   event: "begin_checkout",
   ecommerce: {
     currency: "USD",
     value: 129.99,
     items: [
       {
         item_id: "12345",
         item_name: "Pro Suite Annual",
         affiliation: "cleverbridge",
         coupon: "FALL20",
         discount: 20.00,
         item_brand: "Acme Corp",
         item_category: "Software",
         item_variant: "Pro Suite",
         price: 129.99,
         quantity: 1
       }
     ]
   }
 });

A customer starts checkout, so we push a begin_checkout event to the data layer with the current cart details: currency is USD, the order total is 129.99, and the cart contains one item—Pro Suite Annual (ID 12345) from Acme Corp. The FALL20 coupon applies a 20.00 discount, and the item price shown is the discounted gross price. GTM can use this event to trigger analytics, conversion, and remarketing tags for the start of the checkout.

GTM can use this event to trigger analytics, conversion, and remarketing tags for the start of the checkout.*

page_view fields

Field	Type	Description
event	string	Event name. Always "page_view".
subscription_type	string	Subscription type (for example, "none", "auto_renew", or another configured value).
checkout_type	string	Checkout context (for example, "new" or "upgrade").
affiliation	string	Always "cleverbridge".
language	string	Selected language (ISO code).
transaction_interval	number	Subscription interval in months; 0 for one-time purchases.
currency	string	Selected currency (ISO 4217).
cart_id	string	Value of the &cart parameter, if present.
entry_url	string	Customer’s checkout entry URL.
page_name	string	Logical step identifier (for example, funnelName.templateSteps.progressStep).
session_id	string	Checkout session ID.
x-parameters	array	Array of custom key–value pairs provided via x-parameters.
country	string	Delivery country (ISO code).

Example

js
dataLayer.push({
  event: "page_view",
  subscription_type: "none",
  checkout_type: "new",
  affiliation: "cleverbridge",
  language: "en",
  transaction_interval: 0,
  currency: "USD",
  cart_id: "CART-9A7B",
  entry_url: "https://checkout.example.com/?pid=12345",
  page_name: "checkout.step.shipping",
  session_id: "sess_abc123",
  "x-parameters": [{ partner: "affiliate42" }, { campaign: "fall_launch" }],
  country: "US"
});

A customer views the shipping step of Checkout 2.0, so we push a page_view event to the data layer with contextual information about this session: the checkout type is new, the selected language is English, and the transaction is a one-time purchase (interval 0). The checkout is in USD, with the cart ID CART-9A7B and session ID sess_abc123. Additional parameters identify the affiliate partner (affiliate42) and campaign (fall_launch).

GTM can use this event to record funnel progression, measure engagement by step, and attribute the session to the correct campaign and partner.

add_to_cart fields

Field	Type	Description
event	string	Event name. Always "add_to_cart".
ecommerce.currency	string	ISO 4217 currency code.
ecommerce.value	number	Order total (gross) after the add.
ecommerce.items	array	Array with the added item (and optionally cart context).

commerce.items fields

Field	Type	Description
item_id	string	Product ID added from recommendations.
item_name	string	Product display name.
affiliation	string	Always "cleverbridge".
discount	number	Item-level discount (gross).
item_brand	string	Client account name.
item_category	string	Product category.
item_variant	string	Internal product name or variant.
price	number	Discounted item price (gross).
quantity	number	Quantity added.
index	number	Recommendation array index (position in the recommendation list).

Example

js
dataLayer.push({
  event: "add_to_cart",
  ecommerce: {
    currency: "EUR",
    value: 59.99,
    items: [
      {
        item_id: "67890",
        item_name: "Add-on Storage 100GB",
        affiliation: "cleverbridge",
        discount: 0,
        item_brand: "Acme Corp",
        item_category: "Add-on",
        item_variant: "Storage-100",
        price: 59.99,
        quantity: 1,
        index: 2
      }
    ]
  }
});

A customer adds a recommended product to the cart, so we push an add_to_cart event to the data layer with details about the item: the currency is EUR, the total cart value is 59.99, and the added product is Add-on Storage 100GB (ID 67890) from Acme Corp. The product has no discount, is priced at 59.99 gross, and appears as the second recommendation in the list (index 2).

At the same time, a select_promotion event is pushed to record that this item was selected from the recommendation module, identifying the promotion ID rec_002 and name Recommended Add-on. GTM can use these events together to track user interaction with recommendations, measure conversion effectiveness, and attribute sales to specific promotional placements.

select_promotion fields

Field	Type	Description
event	string	Event name. Always "select_promotion".
ecommerce.creative_name	string	(Optional) Creative name for the placement, such as banner or module title.
ecommerce.creative_slot	string	(Optional) Slot or position of the promotion, for example, "right_rail" or "footer_recommendation".
ecommerce.promotion_id	string	Unique identifier of the recommendation or promotion.
ecommerce.promotion_name	string	Display name of the recommendation or promotion.
ecommerce.items	array	Array containing the promoted or selected product.

ecommerce.items fields

Field	Type	Description
item_id	string	Product ID associated with the promotion.
item_name	string	Product display name.
affiliation	string	Always "cleverbridge".
discount	number	Item-level discount (gross), if any.
item_brand	string	Client account name.
item_category	string	Product category.
item_variant	string	Internal product name or variant.
price	number	Discounted item price (gross).
quantity	number	Quantity of the item.

Example

js
dataLayer.push({
  event: "select_promotion",
  ecommerce: {
    creative_name: "Sidebar Bundle",
    creative_slot: "right_rail",
    promotion_id: "rec_002",
    promotion_name: "Recommended Add-on",
    items: [
      {
        item_id: "67890",
        item_name: "Add-on Storage 100GB",
        affiliation: "cleverbridge",
        discount: 0,
        item_brand: "Acme Corp",
        item_category: "Add-on",
        item_variant: "Storage-100",
        price: 59.99,
        quantity: 1
      }
    ]
  }
});

A customer selects a recommended product displayed in the sidebar, so we push a select_promotion event to the data layer. It identifies the promotion as rec_002 with the name Recommended Add-on, and records contextual details such as placement (right_rail) and creative (Sidebar Bundle). The associated product is Add-on Storage 100GB (ID 67890) from Acme Corp, priced at 59.99 with no discount.

GTM can use this event to measure how customers interact with recommendations and evaluate promotion performance across placements.

remove_from_cart fields

Field	Type	Description
event	string	Event name. Always "remove_from_cart".
ecommerce.currency	string	ISO 4217 currency code.
ecommerce.value	number	Order total (gross) after the item is removed.
ecommerce.items	array	Array containing details of the removed item.

ecommerce.items fields

Field	Type	Description
item_id	string	Product ID removed from the cart.
item_name	string	Product display name.
affiliation	string	Always "cleverbridge".
discount	number	Item-level discount (gross).
item_brand	string	Client account name.
item_category	string	Product category.
item_variant	string	Internal product name or variant.
price	number	Discounted item price (gross).
quantity	number	Quantity removed.
index	number	Running number or UI position of the removed item.

Example

js
dataLayer.push({
  event: "remove_from_cart",
  ecommerce: {
    currency: "GBP",
    value: 0,
    items: [
      {
        item_id: "67890",
        item_name: "Add-on Storage 100GB",
        affiliation: "cleverbridge",
        discount: 0,
        item_brand: "Acme Corp",
        item_category: "Add-on",
        item_variant: "Storage-100",
        price: 59.99,
        quantity: 1,
        index: 1
      }
    ]
  }
});

A customer removes a product from the cart, so we push a remove_from_cart event to the data layer. The event contains the item details—Add-on Storage 100GB (ID 67890) from Acme Corp, priced at 59.99 in GBP—and indicates it was the first item in the list (index 1).

GTM can use this event to track cart adjustments, update remarketing audiences, and analyze abandonment behavior.

add_payment_info fields

Field	Type	Description
event	string	Event name. Always "add_payment_info".
ecommerce.currency	string	ISO 4217 currency code.
ecommerce.value	number	Order total (gross) when payment details are completed or a payment option is selected.
ecommerce.items	array	Array containing all items in the cart at the time of the event.

ecommerce.items fields

Field	Type	Description
item_id	string	Product ID.
item_name	string	Product display name.
affiliation	string	Always "cleverbridge".
discount	number	Item-level discount (gross).
item_brand	string	Client account name.
item_category	string	Product category.
item_variant	string	Internal product name or variant.
price	number	Discounted item price (gross).
quantity	number	Quantity of the item.

Example

js
dataLayer.push({
  event: "add_payment_info",
  ecommerce: {
    currency: "USD",
    value: 129.99,
    items: [
      {
        item_id: "12345",
        item_name: "Pro Suite Annual",
        affiliation: "cleverbridge",
        discount: 20.00,
        item_brand: "Acme Corp",
        item_category: "Software",
        item_variant: "Pro Suite",
        price: 129.99,
        quantity: 1
      }
    ]
  }
});

A customer completes their payment information on the checkout page, so we push an add_payment_info event to the data layer. The event includes details of the order in USD, with a total value of 129.99 and one product—Pro Suite Annual (ID 12345) from Acme Corp—with a 20.00 discount applied.

GTM can use this event to trigger analytics or conversion tags that record payment intent or checkout progression.

purchase fields

Field	Type	Description
event	string	Event name. Always "purchase".
ecommerce.transaction_id	string	Unique reference or transaction ID for the purchase.
ecommerce.value	number	Order total (gross).
ecommerce.tax	number	Total tax amount.
ecommerce.shipping	number	Shipping cost, or 0 if not applicable.
ecommerce.currency	string	ISO 4217 currency code used for the purchase.
ecommerce.items	array	Array containing all purchased items.

ecommerce.items fields

Field	Type	Description
item_id	string	Product ID.
item_name	string	Product display name.
affiliation	string	Always "cleverbridge".
discount	number	Item-level discount (gross).
item_brand	string	Client account name.
item_category	string	Product category.
item_variant	string	Internal product name or variant.
price	number	Final item price (gross).
quantity	number	Quantity purchased.

Example

js
dataLayer.push({
  event: "purchase",
  ecommerce: {
    transaction_id: "CB-REF-001122",
    value: 129.99,
    tax: 10.83,
    shipping: 0,
    currency: "USD",
    items: [
      {
        item_id: "12345",
        item_name: "Pro Suite Annual",
        affiliation: "cleverbridge",
        discount: 20.00,
        item_brand: "Acme Corp",
        item_category: "Software",
        item_variant: "Pro Suite",
        price: 129.99,
        quantity: 1
      }
    ]
  }
});

A customer successfully completes a purchase, so we push a purchase event to the data layer. The event records the transaction ID CB-REF-001122, a total order value of 129.99 USD, and includes tax of 10.83 with no shipping cost. The purchased item is Pro Suite Annual (ID 12345) from Acme Corp, discounted by 20.00.

GTM can use this event to record conversions, trigger remarketing tags, and send detailed order data to analytics and advertising platforms.

Checkout 1.0

This is the initial data object that is created by Checkout 1.0 on each page load. It does not contain details of an event.

As you can see from the example, this object has all the fields that can be needed at different Checkout pages. If the value is irrelevant, it will stay empty.

Example

js
dataLayer = [
  {
    transactionId: '51142586',
    transactionAffiliation: 'cleverbridge',
    transactionTotal: 53.95,
    transactionTax: 8.61,
    transactionShipping: 0,
    transactionCurrency: 'EUR',
    transactionProducts: [
      {
        id: '2417',
        sku: 'SW-ANTIMW-2Y',
        category: 'Software',
        name: 'Anti-Malware+%5b2+Years%5d',
        price: '53.95',
        quantity: '1'
      }
    ],
    customerCurrency: 'EUR',
    languageCountry: 'en-DE',
    coupons: 'OFF50',
    cleverbridgePage: 'confirmation.successInstantDelivery',
    paymentStatus: 'paid',
    random: 'rmgP9A3fUMNxANgeuHi8',
    configParameterName: 'default',
    paymentType: 'CCA_VIS',
    'x-parameter': [
      {
        promotionCode: 'SUMMER2025',
        customerSegment: 'returning_customer'
      }
    ]

Looking at this object, GMT can learn that order 51142586 for one software product — “Anti-Malware [2 Years]” (SKU: “SW-ANTIMW-2Y”, product id-2417) priced €53.95 (tax €8.61, shipping €0; currency EUR) was completed with immediate payment approval. The payment was completed (paid) using credit card – Visa (CCA_VIS). A coupon OFF50 was used; the customer’s locale was English (Germany) (en-DE).

GTM also sees a promo code SUMMER2025 and segment returning_customer under custom fields.

The following values are exposed in the dataLayer and available for use in Google Tag Manager variables and triggers.

Field	Type	Description
transactionId	string	Purchase reference ID for the order.
transactionAffiliation	string	Origin label for the purchase (for example, store or channel).
transactionTotal	number	Total transaction amount.
transactionTax	number	Tax portion of the transaction (for example, VAT).
transactionShipping	number	Shipping cost for the order.
transactionCurrency	string	ISO currency code used for the transaction.
transactionProducts	array	Line items for the order (see product item keys below). See transactionProducts
customerCurrency	string	Shopper’s display or selected currency (may match the transaction currency).
languageCountry	string	Shopper locale in language–country format.
coupons	string	Applied coupon code, if any.
cleverbridgePage	string	Checkout page identifier See cleverbridgePage
paymentStatus	string	Payment status for the order See paymentStatus
random	string	Session-scoped random hash for de-duplication.
configParameterName	string	Active checkout configuration value (from the cfg parameter).
paymentType	string	Payment method code, as described in Payment Result
x-parameter	array	Custom x-parameters passed through checkout.

TransactionProducts array

TransactionProducts is an array of string items for the order. Each entry describes a single product in the cart using the keys below (e.g., ID, SKU, name, category, unit price, and quantity).

Field	Type	Description
id	string	Cleverbridge product ID.
sku	string	Your internal SKU.
category	string	Product category.
name	string	Product name (URL-encoded if applicable).
price	string	Unit price (gross or net, depending on your setup).
quantity	string	Quantity of the line item.

clevebridgePage

The dataLayer.cleverbridgePage value identifies the checkout outcome on the confirmation page, including statuses for a second payment attempt (confirmationpp). Possible values are:

Value	Explanation
confirmation.reject	The payment was rejected on the confirmation page; the order did not complete.
confirmation.pending	Instant processing wasn’t possible; the transaction is queued and will be processed as soon as possible.
confirmation.successOfflinePayment	The order completed with an offline payment method (for example, wire transfer); payment will be made later. This is similar to paymentStatus = waiting for payment.
confirmation.successInstantDelivery	The order completed with immediate payment approval; goods/services can be delivered right away—equivalent to paymentStatus = paid.
confirmationpp.reject	After the first attempt failed or wasn’t processed instantly, the second payment attempt was rejected.
confirmationpp.pending	After a failed or non-instant first attempt, the second payment attempt is queued for processing as soon as possible.
confirmationpp.successInstantDelivery	After a failed or non-instant first attempt, the second payment attempt succeeded with immediate approval.
confirmationpp.successOfflinePayment	After a failed or non-instant first attempt, the second payment will be completed offline (for example, wire transfer).

paymentStatus

To determine if the order was paid, can use the paymentStatus field. Possible values are:

Value	Meaning
paid	The order was successfully paid.
waiting for payment	The customer chose an offline payment option (for example, wire transfer) and is expected to wire the money soon.
quote	The customer generated a price quote request that can be turned into a paid order later.
test purchase	This was a test order using one of the Cleverbridge test credit cards.

dataLayer.push({
  'event': 'cartOpen',
  'ecommerce': {
    'currencyCode': 'EUR',
    'add': {
      'actionField': {
        'affiliation': 'cleverbridge',
        'step': 1
      },
      'products': [{
        'id': '2417',
        'name': 'Anti-Malware+%5b2+Years%5d',
        'price': '53.95',
        'brand': 'brandValue',
        'category': 'categoryValue',
        'variant': 'variantValue',
        'quantity': 1,
        'list': 'listName'
      }],
      'impressions': [{
        'id': '71028',
        'name': 'Recommended Professional',
        'price': '12.95',
        'category': 'Consumer Support',
        'variant': 'variantValue',
        'position': 1,
        'list': 'listName'
      }]
    }
  }
});

dataLayer.push({
  'event': 'checkout',
  'ecommerce': {
    'currencyCode': 'EUR',
    'checkout': {
      'actionField': {
        'step': 1
      },
      'products': [{
        'id': '2417',
        'name': 'Anti-Malware+%5b2+Years%5d',
        'price': '53.95',
        'brand': 'brandValue',
        'category': 'categoryValue',
        'variant': 'variantValue',
        'quantity': 1,
        'list': 'listName'
      }],
      'impressions': [{
        'id': '71028',
        'name': 'Recommended Professional',
        'price': '12.95',
        'category': 'Consumer Support',
        'variant': 'variantValue',
        'position': 1,
        'list': 'listName'
      }]
    }
  }
});

The step field indicates the step of the checkout process where the customer is currently active. Depending on your design and region, your checkout process may contain multiple steps (cart page, billing details, review page, etc.).

dataLayer.push({
  'event': 'removeFromCart',
  'ecommerce': {
    'currencyCode': 'EUR',
    'remove': {
      'actionField': {
        'list': 'listName'
      },
      'products': [{
        'id': '2417',
        'name': 'Anti-Malware+%5b2+Years%5d',
        'price': '53.95',
        'brand': 'brandValue',
        'category': 'categoryValue',
        'variant': 'variantValue',
        'quantity': 1,
        'list': 'listName'
      }]
    }
  }
});

dataLayer.push({
  'event': 'addToCart',
  'ecommerce': {
    'currencyCode': 'EUR',
    'add': {
      'actionField': {
        'list': 'listName'
      },
      'products': [{
        'id': '2417',
        'name': 'Anti-Malware+%5b2+Years%5d',
        'price': '53.95',
        'brand': 'brandValue',
        'category': 'categoryValue',
        'variant': 'variantValue',
        'quantity': 1,
        'list': 'listName'
      }]
    }
  }
});

dataLayer.push({
  'event': 'submitOrder',
  'paymentMethod': 'CCA_VIS'
});

dataLayer.push({
  'event': 'purchase',
  'ecommerce': {
    'currencyCode': 'EUR',
    'purchase': {
      'actionField': {
        'id': '171513018',
        'affiliation': 'cleverbridge',
        'revenue': '53.95',
        'tax': '8.61',
        'shipping': '0',
        'coupon': ''
      },
      'products': [{
        'id': '2417',
        'name': 'Anti-Malware+%5b2+Years%5d',
        'price': '53.95',
        'brand': 'brandValue',
        'category': 'categoryValue',
        'variant': 'variantValue',
        'quantity': 1,
        'list': 'listName'
      }]
    }
  }
});

How to trigger GTM tags with events

To trigger a tag when a certain ecommerce event occurs, create a new GTM trigger with the Custom Event type. Under Event Name, add one of the event names. For more information, see Custom event trigger.

Example

The following is an example of a GTM trigger that only activates when a customer places a purchase.

If you have specific questions related to the Cleverbridge Google Tag Manager implementation, or if you want to implement a certain use case, contact our Tracking team.

Did you find this doc useful?