Docs

Support
Home Billing Payments Receivables RevRec Retention
Billing
Home
Billing
Payments
Receivables
RevRec
Retention
API Reference
Release Notes
Tutorials
Frontend Capabilities
API Changelog
API Reference
Release Notes
Tutorials
Frontend Capabilities
API Changelog

GA4 through GTM (Full Page Checkout) 

You can integrate Google Analytics 4 (GA4) with Chargebee-hosted pages through Google Tag Manager (GTM).

Integration Options 

You can integrate GTM for Full Page Checkout via the following integration methods:

  • Using Hosted Pages API or Payment Link
  • Using Chargebee.js

Prerequisite 

Make sure you have a GTM account and a container before proceeding with the setup.

Follow these steps to create an account and container if you haven't yet. Skip these steps if you already have a GTM account and a container.

When you create a new account, you will walk through the steps to set up a new container.

  1. Go to Google Tag Manager .

  2. Select the Accounts tab > Create Account.

  3. Enter an Account Name and select the Country for the account.

  4. Enter a descriptive Container name and select the Target Platform.

  5. Click Create to create a container and agree to the Terms of Service.

Browser tracking blockers
Ad-blockers or privacy-enablement software installed on your customers' browser can prevent tracking data from being sent.

Before you enable and configure tracking, follow the steps mentioned below to get your GTM ID from your Google Tag Manager account. This ID is used to enable Tracking in your Chargebee site.

  1. Login to your Google Tag Manager account .
  2. Select the Workspace tab.
  3. Your GTM ID is at the top of the page, in the format " GTM-XXXXX."
  4. Copy the GTM ID and keep it safe for future use.

Once you have the GTM ID, follow these steps:

  1. In your Chargebee site, go to Settings > Configure Chargebee > Checkout & Self-Serve Portal.

  2. Select the Configuration tab and click Enable under the Tracking section (if not enabled already).

  3. Click the arrow pointing down for Google Tag Manager, enter the GTM ID retrieved from your Google Tag Manager account and click Apply.

  4. Click Publish.

Once configured, load the Full Page Checkout to start tracking the events.

Integrating GTM via Chargebee.js 

You can integrate Chargebee with GTM via a Drop-in script or API.

Before proceeding to the steps for integrating via these methods, initialize and install GTM on your website by performing steps 1 and 2 of this Google guide .

Information

If you are setting up GTM for the first time, here are some considerations  before you install GTM.

Let us see how you can use each method to integrate GTM:

A. Using Drop-in Script 

Enable the data-cb-gtm-enabled attribute to true when invoking Chargebee JS in the page headers of your site.

<script src="https://js.chargebee.com/v2/chargebee.js"
data-cb-site="you-chargebee-subdomain" data-cb-gtm-enabled="true">
</script>

Replace your-chargebee-subdomain in the code snippets on this page with your Chargebee site subdomain names.

For example, if your Chargebee site is bigshopper-test.chargebee.com, then replace your-chargebee-subdomain with bigshopper-test.

B. Using API 

Pass the enableGTMTracking parameter as true when initializing the Chargebee instance.

var chargebeeInstance = Chargebee.init({
    site: "your-chargebee-subdomain",
    enableGTMTracking: true
});

Set up GTM for GA4 Tracking 

Prerequiste 

  1. Sign in to your GTM account .
  2. Create an account or choose the appropriate GTM container.
    Once you have selected your GTM container, follow these steps to create the Google tags, and publish the GTM container to make the changes live on the Chargebee-hosted pages and watch data in GA4.

Custom Event Trigger 

  1. Click Triggers > New.

  2. Click Trigger Configuration and choose the Custom Event trigger type.

  3. Enter the event name as cb_* and check Use regex matching.

  4. Name the trigger, say CB Event Trigger.

  5. Click Save.

Google Analytics Configuration Tag 

GA4 Configuration tag loads Google Analytics for your Google Analytics 4 property.

  1. Click Tags > New.
  2. Click Tag Configuration and choose Google Analytics: GA4 Configuration.
  3. Enter your GA4 measurement ID.
  4. Click Triggering and choose the CB Event Trigger created before.
  5. Name the tag, say, Acme CB-GA4-Tag.
  6. Click Save.

Non-ecommerce GA events 

This subsection explains how to configure GTM so that events are tracked in GA4 properly. This does not include any transaction or product data. To track transactions, product information, and tracking ecommerce events, implement the steps in the next subsection as well.

Data Layer Variables

  1. In the GTM left navigation, click Variables.
  2. In the User-Defined Variables section, click New.
  3. Click Variable Configuration and select Data Layer Variable.
  4. Under Data Layer Variable Name enter cbAction.
  5. Name the variable, say CB Event - Action.
  6. Click Save.

Perform the above steps again to create yet another data layer variable. This time, enter the Data Layer Variable Name as cbCategory and name the variable, say CB Event - Category.

Creating a GA4 Event Tag

Adding these events to your website or mobile app helps you measure additional features and behavior as well as generate useful reports.

  1. Click Tags > New.
  2. Click Tag Configuration and choose Google Analytics: GA4 Event
  3. Select the configuration tag created at first, Acme CB-GA4-Tag in our example.
  4. In the variables, select CB Event - Action
  5. Click Triggering and choose the CB Event Trigger created before.
  6. Name the tag, say, Acme CB-GA4 event.
  7. Click Save.

Ecommerce GA Events 

The first section covered the basic setup for tracking non-ecommerce GA events. This section helps you set up additional GTM configurations required for tracking ecommerce events.

Prerequisite

  • Add your domain under Settings > Configure Chargebee > Checkout and Self-Serve Portal > Advanced Settings > Add domains in Chargebee to track and measure purchase events.

Custom Ecommerce Event Trigger

  1. Click Triggers > New.
  2. Click Trigger Configuration and select the Custom Event trigger type.
  3. Enter the Event name as chargebee_ecommerce.
  4. Name the trigger, say CB Ecommerce Event Trigger.
  5. Click Save.

Data Layer Variable

  1. In the GTM left navigation, click Variables.
  2. In the User-Defined Variables section, click New.
  3. Click Variable Configuration and select Data Layer Variable.
  4. Under Data Layer Variable Name enter ecommerce.purchase.products.
  5. Name the variable, say GA4 ecommerce data layer.
  6. Click Save.

Creating a GA4 Event Tag for Ecommerce Events

  1. Click Tags > New.
  2. Click Tag Configuration and choose Google Analytics: GA4 Event
  3. Select the configuration tag created at first, Acme CB-GA4-Tag in our example.
  4. In the event name, give purchase.
  5. In the event parameters, give the parameter name as items, and in the value, select the e-commerce data layer variable created before. In our example, GA4 ecommerce data layer
  6. Click on More Settings > Ecommerce > Check Send Ecommerce data > Also select Data Layer from the dropdown for Data Source.
  7. Click Triggering and choose the CB Ecommerce Event Trigger created before. In our example, CB Ecommerce Event Trigger.
  8. Name the tag, say, Acme CB-GA4 Ecommerce Tag.
  9. Click Save.

Publish the Google Tag Manager Container 

Once you have created the tag, publish the GTM container to make the changes live on the Chargebee-hosted pages.

To publish the GTM container, follow these steps::

  1. Go to the "Overview" section of your GTM account.
  2. Click Submit on the top right corner of the screen.
  3. Select Publish option.
  4. Click Publish to publish the container.

You have now successfully integrated Google Analytics 4 with Chargebee-hosted pages through Google Tag Manager. You can now track visitor behavior and user engagement on your website to gain valuable insights into user behavior and make data-driven decisions.

Information

Whenever you make changes to the GTM configuration, ensure that you reload your site, ignoring cached content (i.e. hard refresh). The keyboard shortcuts are:
Mac: ⌘ + Shift + R
Windows/Linux: Ctrl + F5 or Ctrl + Shift + R

Watch Data in GA4 

You can test your GA tag by checking real-time reports. Remember that it takes 24-48 hours to process non-real-time reports. Refer to, checking your tag setup in Google Analytics .

Limitations 

Learn more about the limitations of GA4 tracking.

Events passed to GTM/GA 

Learn more about the events passed to GTM/GA.

Was this article helpful?
Loading…