Bigcommerce and Google Analytics

For Visitor and Sales Tracking

BigCommerce has built in support for Google Analytics which includes the tracking of sales. Being able to see sales details within Google Analytics is very powerful. This enables you to analyse things like which sources are revenue generators or which parts of the website perform well at converting customers.

We offer several BigCommerce Packages which includes an Analytics package for setting this up.

Video Tutorial for adding Google Analytics to Bigcommerce

This video is here to assist in the instructions from this article. It is based on using the Universal Analytics code.

Set Up Your Google Analytics Account

If you don't have a Google Analytics Account for your website yet, then this is the time to create one. Follow the instructions to create a new account for your website. At some point you will reach the page where it asks you to insert the tracking code. That's where this all begins.

If you already have an account then select the Admin tab, ensure your looking at the right Account and Property, then select Tracking Info->Tracking Code. We should all now be at the same place.

Google Analytics Tracking code using gtag

In late 2017 Google started telling people to add tracking code based on a new tag called gtag. This new tag is not compatible with the previous tracking code, so if you want to use it you will need to make sure any other Google Analytics tracking you do is also updated.

Their documentation explains how this new gtag will consolidate their systems and over time it will be the tag that new features are added to. The old tracking code will still be supported for a long time, but eventually you will be missing out.

The supplied BigCommerce transaction tracking code will not work with the gtag (see next section for instructions on implementing the old school way). This section provides a solution that does support the gtag.

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

  // var wsa_adwords_id = 'AW-XXXXXXXXXX'; // for use later
  // gtag('config', wsa_adwords_id); // AdWords Remarketing Tracking
</script>
<!-- 
Web Site Advantage: Google Analytics Tracking - gtag [v1.0] 
https://websiteadvantage.com.au/Bigcommerce
Copyright (C) 2017 Web Site Advantage
-->
<script>
    var wsa_purchase = {
        'event_category': 'ecommerce', 
        'items': []
    };

    function trackEcommerce() {
    this._addTrans = addTrans;
    this._addItem = addItems;
    this._trackTrans = trackTrans;
    }
    function addTrans(orderID,store,total,tax,shipping,city,state,country) {
        wsa_purchase.transaction_id = orderID;
        wsa_purchase.affiliation = store;
        wsa_purchase.value = total;
        wsa_purchase.city = city; 
        wsa_purchase.state = state; 
        wsa_purchase.country = country;
        wsa_purchase.tax = tax;
        wsa_purchase.shipping = shipping;
    }
    function addItems(orderID,sku,product,variation,price,qty) {
        wsa_purchase.items.push({
            'id': orderID,
            'sku': sku,
            'name': product,
            'category': variation,
            'price': price,
            'quantity': qty
        }); 
    }
    function trackTrans() {
        gtag('event', 'purchase', wsa_purchase);
    }
    var pageTracker = new trackEcommerce();    
</script>

Take the code above and copy it into your favourite text editor so we can edit it.

Support this work
I'd like to buy Tony a...

The Tracking code you see in Google Analytics should look just like the start of the code above. Take the "Tracking ID" (like UA-XXXXXXXX-X) and use it to replace the bits I have highlighted in red.

I've enabled "link attribution" by default. This enhances how Google Analytics can report on clicks on links.

The above example also provides commented out code that can be used to enable AdWords tracking via the gtag. We have a package that implements advanced AdWords tracking to support Dynamic Remarketing.

  1. Login to your BigCommerce Administration
  2. Click Advanced Settings
  3. Select Web Analytics
  4. Switch to the Google Analytics tab (if it is not there select the check box to enable it)
  5. Insert your modified Tracking Code in the text box
  6. Click Save

Next you need to enable the E-commerce reports in Google Analytics. Go to Admin->E-commerce Settings and enable E-commerce (but not the Enhanced option).

In Google Analytics you should be able to instantly see traffic via the Real-Time tab. When you get orders you can also see sales in the Conversions->Ecommerce section.

Then check out my BigCommerce SEO Checklist for tips on how to further configure Google Analytics.

Please provide feedback if you have any issues or to tell me it worked perfectly.

Modifying the Tracking Code for BigCommerce (old style)

If you wish to stick to the old Google Analytics tracking code, then these instructions will help you set up transation tracking.

The following code is based on the the BigCommerce article called Setting Up 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','//www.google-analytics.com/analytics.js','ga');
    ga('create', 'UA-XXXXXXXX-X', 'auto');
    // ga('require', 'linkid');
    // ga('require', 'displayfeatures'); 
    ga('send', 'pageview');
    ga('require', 'ecommerce', 'ecommerce.js');
    function trackEcommerce() {
    this._addTrans = addTrans;
    this._addItem = addItems;
    this._trackTrans = trackTrans;
    }
    function addTrans(orderID,store,total,tax,shipping,city,state,country) {
    ga('ecommerce:addTransaction', {
        'id': orderID,
        'affiliation': store,
        'revenue': total,
        'tax': tax,
        'shipping': shipping,
        'city': city,
        'state': state,
        'country': country
    });
    }
    function addItems(orderID,sku,product,variation,price,qty) {
    ga('ecommerce:addItem', {
        'id': orderID,
        'sku': sku,
        'name': product,
        'category': variation,
        'price': price,
        'quantity': qty
    });
    }
    function trackTrans() {
        ga('ecommerce:send');
    }
    var pageTracker = new trackEcommerce();
</script>
	

Take the code above and copy it into your favourite text editor so we can edit it.

The Tracking code you see in Google Analytics should look just like the start of the code above. Find the create line in the Analytics version and copy it's values into your local copy. That should replace the code I have highlighted in red.

I've added a few extra lines in our code which are shown in Blue and are commented out. If you wish to enable them then remove the // at the start of each line. This is what they do:

The linkid line is to enable Enhanced Link Attribution . This enables Analytics to not only detect page level links but also which link on the page caused a click. This enhancement improves the Behavior->In-Page Analytics report.

Support this work
I'd like to buy Tony a...

The displayfeatures line enables you to track Demographics and Interests of users as well as enables AdWords Remarketing. Note that to use this you need to make sure you have a Privacy Policy that tells people what you are doing. So only include it if you comply to the requirements.

Then follow these steps:

  1. Login to your BigCommerce Administration
  2. Click Advanced Settings
  3. Select Web Analytics
  4. Switch to the Google Analytics tab (if it is not there select the check box to enable it)
  5. Insert your modified Tracking Code in the text box
  6. Click Save

Next you need to enable the E-commerce reports in Google Analytics. Go to Admin->E-commerce Settings and enable E-commerce (but not the Enhanced option).

Google Referral fix

If you use the PayPal Express Checkout payment method or any other payment system that works from outside your store, then you will have sales attribution issues because the external host (e.g. paypal.com) will take the credit for your sales (Tracking True Referrals when using PayPal). This is especially annoying if you want to see the value of any paid advertising.

To minimise this effect you can add paypal.com to the Referral Exclusion List under Admin->Tracking Info->Referral Exclusion List.

Also make sure you have set your PayPal account to Auto Return so that Analytics can pick up the completed sale.