GA4 through GTM (In-app Checkout) 

Integration of Google Analytics 4 (GA4) with Chargebee-hosted pages can be done through Google Tag Manager (GTM).

Scope 

Please note that in-app layout of Checkout functionality does not inherently include a built-in integration with Google Analytics 4 (GA4) or Google Tag Manager (GTM). Instead, we leverage Chargebee.js to facilitate this capability.

Chargebee.js offers two primary functionalities to support analytics integration within the Checkout process:

• Callbacks for Custom Analytics Integrations: You can utilize callbacks triggered by various events during checkout to implement custom analytics integrations tailored to specific needs.
• GA/GTM Integration: Chargebee.js also provides native integration capabilities specifically designed for Google Analytics 4 (GA4) and Google Tag Manager (GTM).

To harness analytics capabilities within our in-app layout of Checkout, developers can leverage Chargebee.js to create a seamless and tailored analytics experience for their applications.

Install GTM Tag 

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

Enable GTM Integration in Chargebee.js 

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

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

• The list of events passed to GA/GTM.
• Limitations of the GTM integration.

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 button in the top right corner of the screen.
3. Select Publish option.
4. Click Publish button 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.