Google Analytics for In-app Checkout & Portal 

Chargebee JS provides built-in support for Google Analytics (GA) by sending checkout and portal events  to GA.

Prerequisites 

1. Set up a GA account and then a GA property .

2. Set up the GA tag  on your site. The video below shows how to get the GA tag JS.

3. If you wish to track and measure purchase events also, then:

   • Allow list your domain in Chargebee.
   • Enable ecommerce reporting  in GA.

Setting Up GA Integration 

Once the above prerequisites are met, you can use the built-in GA event tracking in Chargebee.js (explained next) and/or build your own implementation to send events to GA using Chargebee.js callbacks. Let's see how each can be done.

Built-in GA Integration 

When enabled, Chargebee fires events to GA based on page events on Chargebee checkout/portal.

You may integrate via 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="you-chargebee-subdomain" 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

• If you use Google's analytics.js  on your site, then ecommerce events will not be sent by the built-in GA integration. You must have gtag.js  instead.
• Built-in GA support is only available for checkout and portal pages and not for any other forms of modal-type action pages in Chargebee such as Pay Now or Extend Subscription.
• If checkout or portal is launched by customers via Chargebee emails sent to them such as an accept quote email or a cart abandonment notification, built-in tracking will not work because Chargebee.js is not loaded in such cases.
• If in-app checkout or portal is opened in a new tab/window, the GA integration will not work because Chargebee.js is not loaded.

Custom GA Integration 

To overcome the limitations of the built-in GA integration, you may choose to set up the GA event tracking using Chargebee.js callbacks.

The following pages should help you set this up:

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

Customized event tracking can be used along with built-in tracking to extend the latter's functionality.

Checkout sessions lacking Chargebee.js

There are cases where Chargebee.js is not loaded on the page where checkout happens. For example, this could be when

• when you launch checkout on a new tab or window.
• a customer launches checkout via Chargebee emails sent to them such as an accept quote email or a cart abandonment notification.

For such cases, there is no way to track each step of the checkout. However, you can track a successful checkout by passing information to your site in the query parameters of the plan redirect URL.

Checking the GA tag 

You can test your GA tag by checking real-time reports. Also, remember that it takes 24-48 hours to process non-real-time reports.

Setting up Goals in GA 

The video below shows how to track purchase events by creating goals  in GA.

Events passed to GA by built-in integration 

The table below lists the GA events that are fired by the built-in GA integration.

Purchase Event Parameters 

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