Google Analytics Ecommerce + Business Catalyst

Business Catalyst is our CMS of choice for website projects. Its built in reporting is pretty great, but augmenting those with Google Analytics has its own advantages:

Goal Flow and Funnel Visualization
Remarketing
Third party campaign tracking

This is a technical guide on doing just that. It also includes some code using the new liquid template tags.

Datas!

If you want to also track Ecommerce transactions in your Google Analytics property there are some changes you need to make to the default tracking code.

1. Domain linking

At least for the near future, sites on Business Catalyst run over three domains: the primary domain, the secure, ecommerce handling, domain - something like: yourdomain.worldsecuresystems.com - and the system assigned domain.

In order for Google Analytics to follow a customer session as they progress from one to the other, you need to link the domains. An updated bit of Google Analytics code using the Universal Analytics Web Tracking api might look like:

<script>
var hosts = ['www.yoursite.com.au', 'yoursite.worldsecuresystems.com', 'yoursite.businesscatalyst.com']
  , currHost = hosts.indexOf(window.location.host)
  , linkHosts = [];
hosts.forEach(function (e, i, a) {
  if (i !== currHost) {
    linkHosts.push(e);
  }
});
(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-1', 'auto', {'allowLinker': true});
ga('require', 'linker');
ga('require', 'ecommerce');
ga('linker:autoLink', linkHosts);
ga('send', 'pageview');
</script>

What have I added?

var hosts = ['www.yoursite.com.au', 'yoursite.worldsecuresystems.com', 'yoursite.businesscatalyst.com']
  , currHost = hosts.indexOf(window.location.host)
  , linkHosts = [];
hosts.forEach(function (e, i, a) {
  if (i !== currHost) {
    linkHosts.push(e);
  }
});

Change yoursite to use your domains.

This defines the domains in use on the website, and uses the current in-use domain to determine which other domains should be linked by Google Analytics later. This is followed by the standard analytics loading script.

ga('create', 'UA-XXXXXXXX-1', 'auto', {'allowLinker': true});

Change UA-XXXXXXXX-1 to your site ID.

Instead of creating the Google Analytics object with default options, I am telling it to allow domain linking.

ga('require', 'linker');
ga('require', 'ecommerce');
ga('linker:autoLink', linkHosts);

The domain linking and ecommerce tracking options are plugins that use the 'require' methods above. Once loaded, the linker plugin will use the linkHosts defined to create the linkages between domains.

As recommended, I include this script block in the <head> of the site templates.

2. Ecommerce

To track an ecommerce transaction, I will add some code to the 'Receipt' template using the new Liquid rendering engine syntax. In the Business Catalyst admin interface navigate to:

Site Manager > Module Templates > Online Shop Layouts > Receipt - Buy

Or edit the file:

/Layouts/OnlineShop/order_receipt-XX.html

Update XX with your layout country code, e.g. AU

This is where customers are taken once a transaction has been processed, and Business Catalyst provides us with some data we can pass on to Google Analytics. Add the following to the bottom of the layout:

<script>
    {% if paymentStatus contains 'Succ' -%}
        {% assign grand_total = amount | convert: "number" -%}
        {% assign total_less_shipping = amountExceptShipping | convert: "number" -%}
        ga('ecommerce:addTransaction', {
            'id': '{{ orderId }}',
            'affiliation': '',
            'revenue': '{{ grand_total }}',
            'shipping': '{{ grand_total | minus: total_less_shipping }}',
            'tax': ''
        });
      ga('ecommerce:send');
    {% endif -%}
</script>

Transaction data will now be sent to Google Analytics!

Datas!

Note: At the time of writing it was not possible to retrieve product/other information to send to Google Analytics ecommerce tracking.