Set up Google Analytics 4 in Google Tag Manager

As Google is sunsetting their Google Universal in the near future, you will need to switch to Google Analytics 4 (GA4) if you wish to track events in your Cleverbridge checkout pages via Google Tag Manager (GTM).

Cleverbrige offers two ways to implement GA4 via GTM:

As a managed solution: Cleverbridge offers different options to configure GTM GA4 on our checkout pages. Contact your Client Success Manager to find out which option is most adapted to your needs.
As a self-service option: You can configure and maintain your GTM GA4 on your own. Go ahead and import our standard GA4 configuration in just 3 steps:

1. 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 Client Experience.

2. Log in to your GTM account

For more information, go to tagmanager.google.com.

3. Import the Cleverbridge Container

To import the Cleverbridge container, do as follows:

Click Admin on the upper left corner of the navigation menu. The side navigation menu appears.
Click Import Container.
Click Choose container file and select the available file provided by Cleverbirdge.
Click Existing to select the workspace where you want to import the container.
Select Merge and click Overwrite conflicting tags triggers, and variables appearing directly below.
Click Confirm to execute the import.

Important

We strongly recommend you execute the import via the Cleverbridge import container we’ll provide upon request as our individually created triggers ensure a GDPR-compliant use. Once the import is complete, you can adjust the configuration, which must be released by Cleverbridge afterwards.

If you have specific questions related to the GA4 configuration in the Cleverbridge Google Tag Manager, contact Client Experience..

GA4 Events and Data Layer

GA4 tracking offers a set of standard GA4 events and dataLayer structure. You can use these events as GTM tag triggers. For more information, see About the Cleverbridge data Layer.

Currently, the following events are available for GTM integration:

view_cart

This event is triggered when the customer 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. enters the checkout process for the first time.

dataLayer.push({
  event: "view_cart",
  ecommerce: {
    currency: "USD",
    value: 7.77,
    items: [
    {
      item_id: "12345",
      item_name: "Anti-Malware",
      affiliation: "cleverbridge",
      coupon: "CYBER_WEEK",
      discount: 2.22,
      item_brand: "brandValue",
      item_category: "categoryValue",
      item_variant: "variantValue",
      price: 9.99,
      quantity: 1
    }
    ]
  }
});

begin_checkout

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

dataLayer.push({
  event: "begin_checkout",
  ecommerce: {
    currency: "USD",
    value: 7.77,
    coupon: "CYBER_MONDAY",
    items: [{
      item_id: "54321",
      item_name: "Shieldware_ Antivirus",
      affiliation: "cleverbridge",
      coupon: "CYBER_MONDAY",
      discount: 2.22,
      item_brand: "brandValue",
      item_category: "categoryValue",
      item_variant: "variantValue",
      price: 11.99,
      quantity: 1
    }]
  }
});

add_to_cart

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

dataLayer.push({
  event: "add_to_cart",
  ecommerce: {
    currency: "USD",
    value: 7.77,
    items: [
    {
      item_id: "43215",
      item_name: "Shieldware VPN",
      affiliation: "cleverbridge",
      coupon: "CYBER_MONDAY",
      discount: 2.22,
      index: 0,
      item_brand: "brandValue",
      item_category: "categoryValue",
      item_variant: "variantValue",
      price: 9.99,
      quantity: 1
    }
    ]
  }
});

remove_from_cart

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: "remove_from_cart",
  ecommerce: {
    currency: "USD",
    value: 7.77,
    items: [
    {
      item_id: "12345",
      item_name: "Shieldware_ Antivirus",
      affiliation: "cleverbridge",
      coupon: "CYBER_MONDAY",
      discount: 2.22,
      index: 0,
      item_brand: "brandValue",
      item_category: "categoryValue",
      item_variant: "variantValue",
      price: 9.99,
      quantity: 1
    }
    ]
  }
});

add_payment_info

This event is triggered when the customer adds their personal data and payment 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. information in the checkout process and the review page The review page contains summary information about the purchase a customer is about to make. appears.

The event occurs as soon as the customer clicks the Review your data button and before the page reloads. For more information on the review page flow, see Create a Flow without a Review Page.

Important

If your checkout process does not include a review page, the add_payment_info event is not triggered automatically.

dataLayer.push({
  event: "add_payment_info",
  ecommerce: {
    currency: "USD",
    value: 7.77,
    coupon: "CYBER_MONDAY",
    items: [
    {
      item_id: "12345",
      item_name: "Shieldware_ Antivirus",
      affiliation: "cleverbridge",
      coupon: "CYBER_MONDAY",
      discount: 2.22,
      item_brand: "brandValue",
      item_category: "categoryValue",
      item_variant: "variantValue",
      price: 9.99,
      quantity: 1
    }
    ]
  }
});

purchase

This event is triggered when an order 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. is submitted successfully, and the customer reaches the confirmation page 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 An order made by a customer and the records associated with it.",
  ecommerce: {
    transaction_id: "2435",
    value: 25.42,
    tax: 4.90,
    shipping: 5.99,
    currency: "USD",
    coupon: "CYBER_MONDAY",
    items: [
    {
      item_id: "12345",
      item_name: "Shieldware Antivirus",
      affiliation: "cleverbridge",
      coupon: "CYBER_MONDAY",
      discount: 2.22,
      item_brand: "brandValue",
      item_category: "categoryValue",
      price: 9.99,
      quantity: 1
    },
    {
      item_id: "12346",
      item_name: "Shieldware VPN",
      affiliation: "cleverbridge",
      coupon: "CYBER_MONDAY",
      discount: 3.33,
      index: 1,
      item_brand: "brandValue",
      item_category: "categoryValue",
      item_variant: "variantValue",
      price: 20.99,
      promotion_id: "12345",
      promotion_name: "Cyber Week Sale",
      quantity: 1
    }]
  }
});

Note

To receive data on the status of the purchase, add the paymentStatus field to the dataLayer. Available values are as follows:

paid -> the order was successfully paid
waiting for payment -> the customer chose an offline payment Offline payment stands for a group of payment options that do not involve online transactions like direct debit, wire transfers, and checks. With the order confirmation, the customer receives a link with information on how to make the payment. Ordered products are delivered as soon as Cleverbridge receives payment confirmation from the payment provider. option (e.g. 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

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 option 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)

view_promotion

This event is triggered when a promotion appears directly on the page, or as a Don't Leave Layer (DLL) popup window during the checkout process. The promotion can also be a recommended product like a cross-sell or an up-sell.

dataLayer.push({
  event: "view_promotion",
  ecommerce: {
    promotion_id: "12345",
    promotion_name: "Cyber Week Sale",
    items: [
    {
      item_id: "12345",
      item_name: "Shieldware VPN",
      affiliation: "cleverbridge",
      coupon: "CYBER_MONDAY",
      discount: 2.22,
      item_brand: "brandValue",
      item_category: "categoryValue",
      item_variant: "variantValue",
      price: 9.99,
      quantity: 1
    }
    ]
  }
});

select_promotion

This event is triggered when the customer selects a promotion.

dataLayer.push({
  event: "select_promotion",
  ecommerce: {
    creative_name: "Summer Banner",
    creative_slot: "featured_app_1",
    promotion_id: "6543",
    promotion_name: "Cyber Week Sale",
    items: [
    {
      item_id: "12345",
      item_name: "Shieldware VPN",
      affiliation: "cleverbridge",
      coupon: "CYBER_MONDAY",
      discount: 2.22,
      item_brand: "brandValue",
      item_category: "categoryValue",
      item_variant: "variantValue",
      location_id: "ChGGJHFpAG2ahYAR_6128GcWENo",
      price: 9.99,
      quantity: 1
    }
    ]
  }
});

Custom Cleverbridge Events

init

This event is the first event triggered for initializing the dataLayer.

dontLeaveLayer

This event is triggered as the DLL appears during the checkout process either on the page or as a popup window.

dontLeaveLayerButtonClick

This event is triggered when customers click on the DLL page or popup window.

paymentMethodChange

This event is triggered when customers change their payment method Describes the actual payment method used by the customer to complete the purchase, for example, Visa, wire transfer, or SEPA Direct Debit. on the checkout page.

inputFieldCompleted

This event is triggered when customers fill all the fields on the checkout page.

submitOrder

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.

clickDownloadLink

This event is triggered when the customer clicks on the download link to retrieve the license key on the confirmation page.

Set up Google Analytics 4 in Google Tag Manager

1. Enable the Data Layer required by GTM

2. Log in to your GTM account

3. Import the Cleverbridge Container

Important

GA4 Events and Data Layer

Custom Cleverbridge Events

Sorry about that

Great!