GA4 through GTM (In-App Checkout)

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

Scope

In-App Checkout does not include a built-in integration with Google Analytics 4 (GA4) or Google Tag Manager (GTM). Use Chargebee.js for this integration.

Chargebee.js offers two ways to support analytics integration within checkout:

• Callbacks for custom analytics integrations: Use callbacks triggered by checkout events to implement custom analytics integrations.
• GA/GTM integration: Chargebee.js also provides native integration for Google Analytics 4 (GA4) and Google Tag Manager (GTM).

Install GTM tag

Initialize and install GTM on your website by performing steps 1 and 2 of this guide by Google.

Enable GTM integration in Chargebee.js

You can integrate Chargebee with GTM via a Drop-In Script or the API.

A. Using Drop-In Script

Set 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 a new GTM container or select an existing one.

After selecting your GTM container, follow the steps below to create Google tags, publish the GTM container, and apply the changes to Chargebee-hosted pages. You can then track data in Google Analytics 4 (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 earlier.
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 earlier.
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 earlier. 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 earlier. 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 the Submit button in the top-right corner of the screen.
3. Select the Publish option.
4. Click Publish to publish the container.

You have now integrated Google Analytics 4 with Chargebee-hosted pages through Google Tag Manager.

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.