Docs
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.
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:
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.
When enabled, Chargebee fires events to GA based on page events on Chargebee checkout/portal.
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>
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
});
See also: The list of events passed to GA using the built-in integration.
Limitations of built-in 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:
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
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.
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.
The video below shows how to track purchase
events by creating goals in GA.
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 |
|
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 |
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 |
This table lists the additional parameters passed as part of the purchase event.
Parameter |
Description |
|
---|---|---|
|
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. |
|
|
Always set to Chargebee checkout . |
|
category |
Either |
|
price |
The value depends on the pricing model of the plan/addon. Here's how:
|
|
quantity |
The quantity of the product purchased. It is set to |