Docs

Support

Getting Started

Implementing Chargebee

Product Catalog

Subscriptions

Customers

Invoices, Credit Notes and Quotes

Site Configuration

Reports and Analytics

Integrations

Data Privacy & Security

Articles & FAQ

Data Operations

Universal Analytics for In-app Checkout & Portal

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

Using Google Tag Manager (GTM)?
If you're using Google Tag Manager, we have a separate integration with it. Use that instead, and never both.

Prerequisites

Set up a GA account and then a GA property .
Set up the GA tag on your site. The video below shows how to get the GA tag JS.
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.

Note

This built-in integration is for tracking customer interactions with Chargebee checkout and portal. Backend operations such as subscription renewals do not trigger any events to GA.

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>

Note

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

Eg. If your Chargebee site is bigshopper-test.chargebee.com, then replace your-chargebee-subdomain with bigshopper-test.

B. Using API

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

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

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.

Avoid duplicate tracking
If you implement checkout success tracking on the plan redirect pages, you must not use built-in GA tracking as it would lead to duplication of checkout success events.

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.

Event Category	Event Action	Triggered when...
ecommerce (this category events are only triggered for in-app checkout and not for in-app portal)	`begin_checkout`	The first screen of checkout appears showing the cart.
	`purchase`	A successful paid checkout happens and a subscription is created or changed. This event has additional parameters as part of it. Note: This event is only sent when the domain where the checkout is invoked has been allow-listed. If not allow-listed, then the `generate_lead` event is sent in lieu of `purchase`.
`engagement`	`generate_lead`	A subscription has been created with a trial period and no payment has been made. Additionally, this event is triggered in lieu of the `purchase` event if the domain where the checkout is invoked has not been whitelisted.
`cb-checkout`	`cart_screen`	The first screen of checkout appears showing the cart.
	`add_account_info`	The screen for entering the account details of the customer appears.
	`add_billing_address`	The screen for entering the billing address appears.
	`edit_shipping_address`	The shipping address entry screen appears. Also when the edit screen for shipping address appears.
	`add_payment_method`	The screen for entering the payment method details appears.
	`add_subscription_cf_info`	The screen for entering any custom fields is shown.
	`review_screen`	The summary screen for the sign-up is shown.
	`edit_order_screen`	When the order is edited.
	`edit_account_info`	When the account information edit screen is shown.
	`edit_subscription_cf_info`	When the custom field edit screen is displayed.
	`edit_payment_method`	When the payment method edit screen appears.
	`thankyou_screen`	When the final screen appears that prompts the user to close the window or redirects them to the redirect URL.
`cb-portal`	`login`	The login screen appears.
	`home`	the "Manage Subscriptions" screen appears.
	`sub_details`	a subscription details page is displayed
	`portal_edit_shipping_address`	the edit shipping address screen is displayed.
	`portal_choose_payment_method`	the choose payment method screen is displayed
	`portal_add_payment_method`	the add a payment method screen is displayed
	`portal_view_payment_method`	a particular payment method is viewed
	`portal_payment_methods`	the payment method lists screen is viewed
	`portal_edit_subscription_cf`	custom field edit screen is displayed
	`edit_subscription`	the change subscription screen is displayed.
	`add_addons`	the screen for adding addons to a subscription is displayed
	`estimate_display_screen`	the new order estimate screen is displayed
	`account_details`	the details of the customer account are displayed
	`portal_edit_account`	the edit account screen is displayed
	`portal_address`	the billing/shipping address screen is displayed.
	`portal_edit_billing_address`	the billing address edit screen is displayed
	`portal_edit_shipping_address`	the shipping address edit screen is displayed
	`sub_cancel`	the subscription cancel screen is displayed

Purchase Event Parameters

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

Parameter	Description
`transaction_id`	The unique id generated by Chargebee for the checkout or portal session.
`value`	The invoice total. This is the invoiced amount after discounts and taxes.
`currency`	The currency code (ISO 4217 format) for the invoice.
`tax`	Total tax amount for this invoice.
`items`	Array of products (plan and addons) ordered via checkout. Each array element is composed of the following:
	Parameter	Description
	`id`	The id of the plan or addon.
	`name`	Again, the id of the plan or addon.
	`list_name`	Always set to `Chargebee checkout`.
	`category`	Either `plan` or `addon` depending on the product type.
	`price`	The value depends on the pricing model of the plan/addon. Here's how: For per unit pricing model: the unit price of the plan or addon is set as the parameter value. For flat fee: the catalog price for the plan or addon is set here. For volume: the unit price of the tier the quantity falls under is set. For tiered and stairstep: the average unit price of the plan or addon, determined as (catalog price ÷ quantity) is set.
	`quantity`	The quantity of the product purchased. It is set to `1` when the pricing model is flat fee.

Was this article helpful?