Tracking with Google Analytics

In this article, we look at using Google Analytics for tracking your customer information and (optionally) reporting purchase information back to your Google Analytics account.

There are 2 types of code GA may have provided you:

  • gtag.js (Google’s current code)
  • analytics.js (Google’s historic code)

We’ll break this article up into 2 sections. The first will look at Google’s current gtag.js code and where you place this within ThriveCart. We’ve also included an example purchase event script that you can use to track sales into your GA account. Whilst it’s been possible to get this from Google/write it yourself, we’ve also included an example to make things copy/paste and as simple as possible for you.

The second part of the article will look at Google’s older analytics.js script which works slightly differently and how to set things up if you’re using that code.

1. Google eCommerce tracking (gtag.js)

Your gtag.js tracking code is obtained from your GA dashboard under your admin > property > tracking info > tracking code area.

Example of this code is as below (note that you need to replace “YOURPROPERTYIDHERE” with your own tracking ID as highlighted in the above image).

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=YOURPROPERTYIDHERE"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'YOURPROPERTYIDHERE', { // Paste your property ID here from the example gtag script - note it ALSO goes above!

  'linker': {
    'domains': ['mydomain.com', 'myaccount.thrivecart.com'], // Change these to point to your multiple domains
    'accept_incoming': true
  }

});
</script>

This script then needs to be added to your product’s tracking script area within ThriveCart.

This can be found under your Product settings > Checkout > Tracking area. You’ll want to check the box to enable scripts, and then add this code to the first box that says “Paste tracking code to add to all of this product’s pages”.

It’s worth remembering that if you have upsells/downsells in your funnel, then the scripts added to this field will also be loaded automatically for those other products in your funnel. You do not need to duplicate tracking scripts in your upsell/downsell products.

Now, your checkout visitor details will be passed through to Google Analytics.

Enabling Ecommerce tracking in Google Analytics

Under your GA dashboard, in the admin > view > ecommerce settings area, you’ll want to enable ecommerce.

We’ve also written an example script that will send your customer purchase information to your GA dashboard.

This script needs to be placed in the same field as the existing gtag.js script and placed beneath it, not in the paste tracking code to add only if the customer purchases the xxx product field. You only need to paste this script once for your entire funnel. You do not need to paste it multiple times for multiple products in the funnel.

The script we have written for you is:

<script>
(function() {
    if(typeof _thrive_order === 'undefined') return;

    var items = [];

    if(typeof _thrive_order.order.product !== 'undefined') { // Product block
        items.push({
            'id': _thrive_order.order.product.id,
            'name': _thrive_order.order.product.name,
            'quantity': _thrive_order.order.product.quantity,
            'price': _thrive_order.order.product.total_readable
        });
    }

    if(typeof _thrive_order.order.bump !== 'undefined') { // Bump block
        items.push({
            'id': _thrive_order.order.bump.id,
            'name': _thrive_order.order.bump.name,
            'quantity': _thrive_order.order.bump.quantity,
            'price': _thrive_order.order.bump.total_readable
        });
    }

    var f = function(type) {
        if(typeof _thrive_order.order[type] !== 'undefined') {
            for(var x in _thrive_order.order[type]) {
                if(!_thrive_order.order[type].hasOwnProperty(x)) continue;
                items.push({
                    'id': _thrive_order.order[type][x].id,
                    'name': _thrive_order.order[type][x].name,
                    'quantity': _thrive_order.order[type][x].quantity,
                    'price': _thrive_order.order[type][x].total_readable
                });
            }
        }
    };

    f('upsells'); // Handle all upsells
    f('downsells'); // Handle all downsells

    gtag('event', 'purchase', {
      'transaction_id': _thrive_order.order.invoice_id,
      'value': _thrive_order.order.total_readable,
      'currency': _thrive_order.order.currency,
      'tax': _thrive_order.order.tax_readable,
      'shipping': _thrive_order.order.shipping,
      'items': items
    });
})();
</script>

Now, with this additional script added to your product settings, both your visitor/customer information will be passed back to Google Analytics and if they purchase, details of the order will also be passed through.

Please note that there can be a ~15 minute or so delay before your Analytics account reports this information. From our own testing, they don’t appear to report things immediately.

If you’re wanting to pass order information after the order completes, then this is possible. Remember you will need to use a ThriveCart hosted success page so that these codes are loaded and data send to Google Analytics. If you use a custom success page, then you may find that your customer is redirected before these codes have a chance to load.

If you are wanting to use purchase tracking events and your own success page you will need to embed purchase code on your own page. ThriveCart provides details about your customer’s order via the query string, so it is possible to load specific scripts based on your customer’s purchases (if your funnel has multiple products). You’ll need to write your own code as advised by Google’s developer area.

 

2. Google eCommerce tracking (analytics.js)

Google’s analytics.js is their older tracking script code which many users may be using from when this was their main tracking code.

The analytics.js script will look like the following (UA-XXXXX-Y would be replaced with your own tracking ID):

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

This script is placed in your Product settings > Checkout > Tracking area. It’s placed in the “Paste tracking code to add to all of this product’s pages” field.

It’s worth remembering that if you have upsells/downsells in your funnel, then the scripts added to this field will also be loaded automatically for those other products in your funnel. You do not need to duplicate tracking scripts in your upsell/downsell products.

Now, your visitor’s information will be passed to your Google Analytics account when they view your checkout pages.

If you’re wanting to pass their order information back to Google after they’ve purchased, then this is possible and to help we’ve also written the purchase event scripts for you (to save you time).

Enabling Ecommerce tracking in Google Analytics

Under your GA dashboard, in the admin > view > ecommerce settings area, you’ll want to enable ecommerce.

We’ve also written example scripts that will send your customer purchase information to your GA dashboard.

These scripts are placed in the “Paste tracking code to add only if the customer purchases xxx” fields. See screenshot example below.

You can find the different codes you can use for the different product types below.

If the customer purchases the main product field (to track the purchase of your main product).

<script>
(function() {
  ga('require', 'ecommerce');
  ga('ecommerce:addTransaction', {
    'id': _thrive_order.order.id,
    'revenue': _thrive_order.order.total,
    'tax': _thrive_order.order.tax,
    'currency': _thrive_order.order.currency
  });
  ga('ecommerce:addItem', {
    'id': _thrive_order.order.id,
    'name': _thrive_order.order.product.name,
    'sku': _thrive_order.order.product.id,
    'price': _thrive_order.order.product.total,
    'quantity': _thrive_order.order.product.quantity
  });
  ga('ecommerce:send');
})();
</script>

If the customer purchases the bump field, to track the purchase of your bump offer.

<script>
(function() {
  ga('require', 'ecommerce');

  ga('ecommerce:addTransaction', {
    'id': _thrive_order.order.id,
    'revenue': _thrive_order.order.total,
    'tax': _thrive_order.order.tax,
    'currency': _thrive_order.order.currency
  });

  ga('ecommerce:addItem', {
    'id': _thrive_order.order.id,
    'name': _thrive_order.order.bump.name,
    'sku': _thrive_order.order.product.id,
    'price': _thrive_order.order.bump.total,
    'quantity': '1'
  });

  ga('ecommerce:send');
})();
</script>

If the customer purchases this upsell field, to track the purchase of each one of your upsells. Note! You must replace ‘UPSELL_ID_HERE’ in the code with the ID of your upsell, which is the number at the very end of the URL that you go to when editing the upsell.

<script>
(function() {
  ga('require', 'ecommerce');

  ga('ecommerce:addTransaction', {
    'id': _thrive_order.order.id,
    'revenue': _thrive_order.order.total,
    'tax': _thrive_order.order.tax,
    'currency': _thrive_order.order.currency
  });

 (function(upsell_id) {
   ga('ecommerce:addItem', {
    'id': _thrive_order.order.id,
    'name': _thrive_order.order.upsells[upsell_id].name,
    'sku': _thrive_order.order.upsells[upsell_id].id,
    'price': _thrive_order.order.upsells[upsell_id].total,
    'quantity': _thrive_order.order.upsells[upsell_id].quantity
 });
 })(UPSELL_ID_HERE); // Replace with your upsell ID!

  ga('ecommerce:send');
})();
</script>

If the customer purchases this downsell field to track the purchase of each one of your downsells. Note! You must replace ‘DOWNSELL_ID_HERE’ in the code with the ID of your downsell, which is the number at the very end of the URL that you go to when editing the downsell.

<script>
(function() {
  ga('require', 'ecommerce');

  ga('ecommerce:addTransaction', {
    'id': _thrive_order.order.id,
    'revenue': _thrive_order.order.total,
    'tax': _thrive_order.order.tax,
    'currency': _thrive_order.order.currency
  });
 (function(downsell_id) {
   ga('ecommerce:addItem', {
    'id': _thrive_order.order.id,
     'name': _thrive_order.order.downsells[downsell_id].name,
    'sku': _thrive_order.order.downsells[downsell_id].id,
    'price': _thrive_order.order.downsells[downsell_id].total,
    'quantity': _thrive_order.order.downsells[downsell_id].quantity
 });
 })(DOWNSELL_ID_HERE); // Replace with your downsell ID!

  ga('ecommerce:send');
})();
</script>

Please note that there can be a ~15 minute or so delay before your Analytics account reports this information. From our own testing, they don’t appear to report things immediately.

If you’re wanting to pass order information after the order completes, then this is possible. Remember you will need to use a ThriveCart hosted success page so that these codes are loaded and data send to Google Analytics. If you use a custom success page, then you may find that your customer is redirected before these codes have a chance to load.

If you are wanting to use purchase tracking events and your own success page you will need to embed purchase code on your own page. ThriveCart provides details about your customer’s order via the query string, so it is possible to load specific scripts based on your customer’s purchases (if your funnel has multiple products). You’ll need to write your own code as advised by Google’s developer area.

Related Articles