Docs

Support
Home Billing Payments Receivables RevRec Retention
Billing
Home
Billing
Payments
Receivables
RevRec
Retention
API Reference
Release Notes
Tutorials
Frontend Capabilities
API Changelog
API Reference
Release Notes
Tutorials
Frontend Capabilities
API Changelog

Integrate UA through GTM 

Introduction 

Google Tag Manager  (GTM) helps you centrally manage the analytics and measurement tags on your sites using a web-based UI, reducing the coding effort required to deploy tag configurations.

If you manage Google Analytics (GA) tags via GTM, then this page will help you setup Chargebee checkout and portal tracking in GA via GTM.

Scope 

Please note that in-app layout of Checkout functionality does not inherently include a built-in integration with Google Analytics (GA) or Google Tag Manager (GTM). Instead, we leverage Chargebee.js to facilitate this capability.

Chargebee.js offers two primary functionalities to support analytics integration within the Checkout process:

  • Callbacks for Custom Analytics Integrations: You can utilize callbacks triggered by various events during checkout to implement custom analytics integrations tailored to specific needs.
  • GA/GTM Integration: Chargebee.js also provides native integration capabilities specifically designed for Google Analytics (GA) and Google Tag Manager (GTM).

To harness analytics capabilities within our in-app layout of Checkout, developers can leverage Chargebee.js to create a seamless and tailored analytics experience for their applications.

See also

1. Prerequisites 

Prior to setting up GTM tracking on your website, you must have your Google Analytics (GA) account and property set up and configured.

  1. Set up a GA account and then a GA property .
  2. If you wish to track and measure purchase events also, then:

Browser tracking blockers
Ad-blockers or privacy-enablement software installed on your customers' browser can prevent tracking data from being sent.

2. Install GTM Tag 

Initialize and install GTM on your website: do this by performing steps 1 and 2 of this guide  by Google.

See also

Considerations before you install GTM , if you are setting up GTM for the first time.

3. Enable GTM Integration in Chargebee.js 

Note
GTM integration is for recording customer interactions with Chargebee checkout and portal. Backend operations such as subscription renewals do not trigger any events to GTM.

You may integrate Chargebee with GTM via drop-in script or API.

A. Using Drop-in Script 

Enable the data-cb-gtm-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-gtm-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 Chargebee API 

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

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

4. Configure GTM 

A. Non-ecommerce GA events 

This subsection explains how to configure GTM so that events are tracked at GA properly. This does not include any transaction or product data. To also track transaction and product information, include the steps in the next subsection as well.

1. Data layer variables

  1. In the GTM left navigation, click Variables.
  2. In the User-Defined Variables section, click New.
  3. Click Variable Configuration and select Data Layer Variable.
  4. Under Data Layer Variable Name enter cbAction.
  5. Name the variable, say CB Event - Action.
  6. Click Save.

Perform the above steps again to create yet another data layer variable. This time, enter the Data Layer Variable Name as cbCategory and name the variable, say CB Event - Category.

2. Google Analytics Settings variable

  1. In the GTM left navigation, click Variables.
  2. In the User-Defined Variables section, click New.
  3. Click Variable Configuration and under Utilities, select Google Analytics Settings.
  4. Enter your Google Analytics Tracking ID .
  5. Name the variable, say Acme GA Settings.
  6. Click Save.

3. Custom event trigger

  1. Click Triggers > New.
  2. Click Trigger Configuration and choose the Custom Event trigger type.
  3. Enter the Event name as cb_* and check Use regex matching.
  4. Name the trigger, say CB Event Trigger.
  5. Click Save.

4. Google Analytics tag

  1. Click Tags > New.
  2. Click Tag Configuration and choose Google Analytics: Universal Analytics.
  3. Under Track Type select Event.
  4. Enter the Event Tracking Parameters as follows:
    • For Category click the variable picker and choose CB Event - Category data layer variable created before.
    • For Action click the variable picker and choose CB Event - Action data layer variable created before.
  5. Under Google Analytics Settings, choose the Acme GA Settings variable created earlier.
  6. Click Triggering and choose the CB Event Trigger created before.
  7. Name the tag, say Acme CB-GA Tag.
  8. Click Save.

B. Ecommerce GA Events 

Section A covered the basic setup for tracking non-ecommerce GA events. This section helps you perform additional GTM configuration required for tracking ecommerce events.

Prerequisite
Ensure that you perform step 2 of the prerequisites also for GA ecommerce events to work.

1. Update GA settings variable

  1. Click Variables and click on the Google Analytics Settings variable created earlier (named Acme GA Settings in our example).
  2. Edit the Variable Configuration and click on More Settings > Ecommerce > Check Enable Enhanced Ecommerce Features > Also check Use data layer.
  3. Click Save.

2. Custom event trigger

  1. Click Triggers > New.
  2. Click Trigger Configuration and choose the Custom Event trigger type.
  3. Enter the Event name as chargebee_ecommerce.
  4. Name the trigger, say CB Ecommerce Event Trigger.
  5. Click Save.

3. Google Analytics tag

  1. Click Tags > New.
  2. Click Tag Configuration and choose Google Analytics: Universal Analytics.
  3. Under Track Type select Event.
  4. Enter the Event Tracking Parameters as follows:
    • Category: ecommerce.
    • Action: purchase.
  5. Under Google Analytics Settings, choose the Acme GA Settings variable created earlier.
  6. Click Triggering and choose the CB Ecommerce Event Trigger created before.
  7. Name the tag, say Acme CB-GA Ecommerce Tag.
  8. Click Save.

5. Preview and publish changes 

  1. On the top right hand side of the screen, click on Preview to enable GTM's preview mode . Use this mode to test and debug your tag configuration.
  2. Finally, when done, click on Submit on the top right hand side of the screen to push the changes to your sites.
Information

Whenever you make changes to the GTM configuration, ensure that you reload your site, ignoring cached content (i.e. hard refresh). The keyboard shortcuts are:

Mac: ⌘ + Shift + R

Windows/Linux: Ctrl + F5 or Ctrl + Shift + R

6. Watch data in Google Analytics 

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. See, checking your tag setup in Google Analytics .

Setting up Goals in GA 

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

Limitations 

  • Built-in GTM 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 GTM integration will not work because Chargebee.js is not loaded.

Events passed to GTM/GA 

The table below lists the events fired when the GTM integration is enabled.

Event Category Event Action Triggered When
ecommerce
(Note: 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 whitelisted, 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 allow-listed.
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. Learn more about redirect URL while creating plans
cb-portal login Login screen appears.
home Manage Subscriptions screen appears.
sub_details Subscription details page is displayed.
portal_edit_shipping_address Edit shipping address screen is displayed.
portal_choose_payment_method Choose payment method screen is displayed.
portal_add_payment_method 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 for items is composed of the following:

Parameter Description
id The id of the plan or addon.
name Name 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 a flat fee.
Was this article helpful?
Loading…