Google Tag Manager 

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.

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:
   • Allow-list your domain in Chargebee.
   • Enable ecommerce reporting  in GA.

2. Install GTM Tag 

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

3. Enable GTM Integration in Chargebee.js 

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>

B. Using API 

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

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

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.

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.

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.

Purchase Event Parameters 

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