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

Prerequisites

Create a new GTM container or select an existing one.

Integrating GTM via hosted pages API or payment link

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

Get your GTM ID from your Google Tag Manager account

1. Log in 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.

Enable and configure tracking in your Chargebee site

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.

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="your-chargebee-subdomain" data-cb-gtm-enabled="true">
</script>

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

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

Prerequisite

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

The 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 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 another data layer variable. This time, enter the Data Layer Variable Name as cbCategory and name the variable, say CB Event - Category.

Create 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 earlier, 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.

Create 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 earlier, Acme CB-GA4-Tag in our example.

4. In the event name, enter purchase.

5. In the event parameters, give the parameter name as items, and in the value, select the ecommerce 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 the 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.

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.