Manage Third-Party Tracking Tools in Google Tag Manager

You can use Google Tag Manager (GTM) to manage third-party tracking tools and custom data integrations on your own. As a result, this tool gives you the freedom to trigger your tracking codes directly on the Cleverbridge checkout pages; no need to set up trackings in the Cleverbridge Commerce Assistant.

To integrate the Google Tag Manager with your Cleverbridge checkout pages, do the following:

1. Sign up for a GTM account

For more information, go to https://tagmanager.google.com/.

2. Enable the Data Layer required by GTM

Ask Cleverbridge to enable the Data Layer required by GTM on your checkout pages. To do so, contact the Client Experience team.

3. Set up your GTM tags

Set up your GTM tags using the Cleverbridge data Layer and Events. Learn more about the Cleverbridge dataLayer in the following sections, as well as the enhanced ecommerce events you can consume in your GTM tags:

About the Cleverbridge data Layer

The Cleverbridge dataLayer is added to every page of your checkout process when GTM is enabled. This dataLayer contains information about the cart, session, user, and transaction, all of which you can dynamically insert in your GTM tags. The dataLayer is activated upon every page load, but it can also contain additional information related to certain events. For more information, see .

Information available in the Data Layer on page load

The following information is available upon every page load of your checkout process if GTM is enabled for your account. The values are inserted dynamically, based on the current user session.

dataLayer = [{
  'transactionId': '51142586',  								// the purchaseClosed An order made by a customer and the records associated with it. reference ID
  'transactionAffiliation': 'cleverbridge',					    // source of the purchase
  'transactionTotal': 53.95,									// the total of the transaction revenue
  'transactionTax': 8.61,										// the VAT of the transaction
  'transactionShipping': 0, 									// the shipping cost of the transaction
  'transactionCurrency':  'EUR', 								// the transaction currency ID
  'transactionProducts': [{
    'id' : '2417',												// the Cleverbridge product ID
    'sku' : 'my internal sku',									// your internal SKU
    'category' : 'Software', 									// the product category
    'name' : 'Anti-Malware+%5b2+Years%5d',  					// the product name
    'price' : '53.95',  										// the product price, gross or net
    'quantity' : '1' 											// the product item quantity
  }],
  'customerCurrency':  'EUR',									// the transaction currency ID
  'languageCountry': 'en-DE',									// the customerClosed An individual or business purchasing your product or service by placing an order through Cleverbridge. The customer is the end user of this product, as they are not allowed to resell the purchased  products or services. ​
A customer is unique per client. If a customer purchases products or services from two different clients, there are 2 separate records of said customer.​’s locale
  'coupons' : 'OFF50',										    // coupon code (optional)
  'cleverbridgePage' : 'confirmation.successInstantDelivery',	// page name and detail
  'paymentStatus': 'paid ',									    // the status of the purchase (*)
  'random' : 'rmgP9A3fUMNxANgeuHi8',							// a unique hash per session
  'configParameterName' : 'default',							// the value of cfg= parameter
  'paymentType' : 'CCA_VIS ',									// the payment typeClosed Consolidates multiple payment methods into groups by the type of payment the customer uses, for example, Credit Card as a payment type that encompasses Visa Credit Card, Master Card Credit, Amex, in short: all credit cards. (*)
  'x-parameterClosed The x-parameter is a variable appended to a URL that allows grouping and tracking orders for later reporting purposes. It also enables you to pass through data that you want to capture in the order process. X-parameters can also be used to control design elements based on the value of the x-parameter.' : [{											// an array of custom x-parameters
    'x-parameter' : 'customValue'
  }]
}];

* paymentStatus — Possible values are paid, waiting for paymentClosed Exchange of money for goods and services in an acceptable amount to the customer where the payment amount has been agreed upon in advance. The customer can only pay with an accepted payment method. Each payment has an individual payment cost., quote, or test purchase.

* paymentType — For possible values, see Payment Result.

Note

Some fields may have empty values if dynamic values are not available on the current page. For example, a value for transactionId would not be available on the checkout page or review pageClosed The review page contains summary information about the purchase a customer is about to make. before the purchase is completed.

How to read the information in the Data Layer in GTM

To access the dataLayer values in your GTM tags, you must create a new user-defined variable in your GTM account for each field you want to track. For more information, see User-defined variables.

Important

When creating a new variable, be sure to select type Data Layer Variable in the Variable Configuration area.

Example

The following user-defined variable is called cleverbridgeTransactionId. If the variable is used, the user is able track the value of transactionId in the dataLayer.

To track the variable in GTM tags, the user inserts {{cleverbridgeTransactionId}}.

Events and the Cleverbridge data Layer

In certain situations, events containing additional data are added to the dataLayer. You can use these event occurrences as GTM tag triggers. Currently, the following events are available for GTM integration:

This event is triggered when the customer enters the checkout process for the first time.

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"
      }]
    }
  }
});

This event is triggered when the customer continues in the checkout process.

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"
      }]
    }
  }
});

Note

The field step 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.).

This event is triggered when a customer removes a product from the cart. The event occurs as soon as the customer clicks the Remove button and before the page reloads.

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'       
    }] 
  }
});

This event is triggered when a customer adds a recommended product to the cart. This occurs as soon as the customer clicks the Add button and before the page reloads.

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'       
      }]
    }
  }
});

This event is triggered when the customer clicks the Buy Now button. It occurs as soon as the customer clicks the button and before the page reloads.

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

Note

The fact that this event is triggered does not automatically mean that the customer orderClosed An agreement between a seller and a buyer to exchange goods and/or services for money. An order can: - contain multiple products and quantities; - have multiple financial transactions. A preorder authorization is considered an order. has been accepted. It is possible that the customer must first correct some validation errors before submitting again.

This event is triggered when an order is submitted successfully, with or without payment, and the customer reaches the confirmation pageClosed The confirmation page is displayed after a customer makes a purchase. The confirmation page contains the order confirmation and delivery information..

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' 
      }] 
    }
  }
});

Note

To determine if the order was paid or unpaid, you can use the dataLayer value for the paymentStatus field, which can contain the following values:

You can also gain additional insights by analyzing the dataLayer field cleverbridgePage. This can contain the following values on the confirmation page:

  • confirmation.reject -> the payment was rejected
  • confirmation.pending -> instant processing was not possible and the transaction is scheduled for processing as soon as possible
  • confirmation.successOfflinePayment -> same as paymentStatus = waiting for payment
  • confirmation.successInstantDelivery -> same as paymentStatus = paid

If the first payment attempt failed or was not processed instantly, Cleverbridge offers the customer a chance to choose a different payment optionClosed Set of payment choices displayed to the customer on the checkout page. Available payment options are based on the customer's GeoIP location and include different payment methods and types, for example: a Purchase order (PO) is a payment option we offer our B2B customers. POs are usually paid via the payment method of wire transfer. and try again. In this case, the dataLayer field cleverbridgePage can contain the following status:

  • confirmationpp.reject -> the second payment attempt was rejected
  • confirmationpp.pending -> the transaction is scheduled for processing as soon as possible
  • confirmationpp.successInstantDelivery -> the second payment attempt was successful
  • confirmationpp.successOfflinePayment -> the second payment will be completed offline (e.g. wire transfer)

How to trigger GTM tags with events

To only trigger a tag when a certain ecommerce event occurs, create a new GTM trigger with the type Custom Event. Under Event Name, add one of the events listed above. 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.