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.

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 

  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:

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

See also

See also: The list of events passed to GA using the built-in integration.

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:

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.

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?
Loading…