GA4 for In-App Checkout and Portal

Chargebee supports Google Analytics 4 (GA4) by sending checkout and portal events to GA. You can customize your GA4 data collection to meet your business needs using Chargebee's built-in GA integration or custom GA integration. By analyzing user behavior, you can optimize customer experiences, improve conversion rates, and drive growth.

Setting up GA4 for the first time

Follow these steps to set up analytics data collection on your website:

Prerequisites

1. Set up a GA4 account and then a GA4 property. Option 1: Setting up analytics data collection for the first time. Option 2: Migrating from UA to GA4. Learn more.

2. Add the Google tag script: Add the Google tag to your web pages to begin seeing data in your new Google Analytics 4 property. Follow the steps under add the Google tag directly to your web pages on this page. See the video below as a reference to get the Google tag script:

   

3. Go to Settings > Configure Chargebee > Checkout & Self Server Portal.

4. To track and measure purchase events in Chargebee, select the Configuration tab and add your domain under the Add Domain option under Advanced Settings.

   

Setting up GA integration

After completing the prerequisites, use Chargebee's built-in GA event tracking or your own custom GA integration to send events to GA using Chargebee JS callbacks.

Built-in GA Integration

When enabled, Chargebee triggers events to GA based on page interactions in the Chargebee Checkout or Portal.

You can integrate using a drop-in script or API.

A. Using Drop-in Script

Enable the data-cb-ga-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-ga-enabled="true">
</script>

<script src="https://js.chargebee.com/v2/chargebee.js"
data-cb-site="bigshopper-test" data-cb-ga-enabled="true">
</script>

B. Using API

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

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

Limitations of built-in GA integration

• Built-in GA support is limited to checkout and portal pages. Modal-type action pages, such as Pay Now or Extend Subscription, are not supported.
• If checkout or portal is launched via Chargebee emails (e.g., accept quote email or cart abandonment notification), built-in tracking will not work because Chargebee JS is not loaded.
• If checkout or portal is opened in a new tab/window, GA integration will not work because Chargebee JS is not loaded.

Custom GA Integration

To address the limitations of built-in GA integration, set up GA event tracking using Chargebee JS callbacks.

Refer to the following pages for guidance:

• Chargebee JS drop-in code reference.
• Chargebee JS API-based integration reference.
• Help pages for sending data to GA using gtag.js.

You can combine customized event tracking with built-in tracking to extend functionality. For example, track successful checkouts by passing information to your site via query parameters in the redirect URL in your plans.

Track Chargebee Checkout and Portal Events

Events passed to GTM/GA

The table below lists the events fired when the GA/GTM integration enabled:

Purchase Event Parameters

This table lists the additional parameters passed as part of the purchase event:

Each array element for items[] is composed of the following:

Add GA4 to a Site with Universal Analytics(UA)

Add GA4 to your existing UA setup to enhance the tracking and analytical capabilities of your website.

Prerequisite

You should have at least an Edit role for your GA account.

Steps to Migrate

Follow the below steps to add GA4 to a site with UA.

1. In the UA property interface, click Admin.

2. Under the property column, select the property that you'd like to migrate and click GA4 setup assistant. If you're doing this for the first time, you can either create a new GA4 Analytics property or connect your existing UA property to the GA4 property.

   

3. Click Create property.

Learn more about adding a Google Analytics 4 property (to a site that already has Analytics).

How to get GA4 Measurement ID

You can use the Measurement ID to send data to a specific web data stream.

Follow the steps below to get your GA4 Measurement ID.

1. Login to your GA4 analytics account.

2. Navigate to the Admin section.

3. Under the property section, Click Data streams.

   

4. Select the data stream that you wish to track(likely to be your website). Then in the upper right corner, you can see your measurement ID. Learn more about G-ID.

   

5. Click View tag instructions > Install manually and replace the existing GA script with this one.

   

Dual Tagging for Google Analytics

If you wish to track both UA and GA4 properties, then update the existing script of your analyitcs to add the new Google tag('G-XXXXXXXXXX') on each page of your website from the JavaScript snippet for your account along with the existing script for your website.

Example:

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-X"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-XXXXXXXXX-X');
  gtag('config', 'G-XXXXXXXXXX');
</script>

How to Migrate UA Goals to GA4 Conversions

1. Under GA4 property Click Setup Assistant.

   

2. In the Setup Assistant, scroll down to Property Settings.

3. Select Setup Conversions.

   

4. Click > Actions Import from Universal Analytics. Note that, this option will appear if you are already connected to your UA ID and you have Goals set up under UA property.

Learn more about setting up conversions.

Analyze Data in GA4

After you have configured GA4 tracking for Chargebee Checkout and Portal, you can analyze the data in your GA4 account. You can view reports related to customer behavior, subscription trends, and revenue metrics, among others.