Tracking Backbone.js eCommerce Transactions with Google Analytics

BackboneHeader

Today’s post is a guest post from Josh Moe. After taking my Google Analytics training class this fall, Josh has been diving deep into the technical aspects of Google Analytics for his clients, with excellent results. When Josh told me about a problem he solved for tracking backbone.js websites, I was impressed. The student had become the master! 

While building web applications with Backbone.js serves a purpose, tracking user activity with Google Analytics on these applications can be challenging.

For those of you unfamiliar with backbone.js, it is an application development framework designed to bring efficiency and scalability to JavaScript applications. With backbone, you can create an entire functional application within a single page of a website.

The problem with tracking analytics on single pages apps is that the page load event only happens one-time, when the first page is loaded. After that, there is no differentiation between each page you view on the screen.

As a result, your Google Analytics reports will look something like this:

Bad data

This guide will outline how to collect all standard visitor data, as well as eCommerce transactions using Universal Analytics. If you do not need the eCommerce functionality, I recommend looking here for the basic tracking implementation.

Step One: Tracking Code Installation with Modifications

As usual, grab the Google Analytics tracking code from the admin section of your account and place immediately before the closing <head> tag. However, you will need to delete the last line ga(‘send’, ‘pageview’); from the standard code snippet (we will be placing that elsewhere on the site towards the end).

Next, you will need to add custom javascript to create the eCommerce function:

[HTML]

ga(function() { ga(‘require,’ ‘ecommerce’); });

[/HTML]

The final tracking snippet will look like this:

[HTML]

<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-1’, ‘auto’);
ga(function() {
ga(‘require’, ‘ecommerce’);
});

</script>

[/HTML]

Step Two: Defining eCommerce Transactions

The next step in the process is to define your purchase metrics so the correct transaction data is pushed into Google Analytics upon purchase. You will need to find the “view” for the Thank You page; this is where your code will be placed.

Here is the code:

[HTML] ga(‘ecommerce:addTransaction’, {
‘id’: this.model.get(“OrderID”),
‘revenue’: giveObj.get(“Total”)
});

var tmpQty = parseInt(giveObj.get(“Give”).quantity);

//push info to google analytics
ga(‘ecommerce:addItem’, {
‘name’: ‘Item name’,
‘price’: giveObj.get(“Give”).price,
‘quantity’: tmpQty
});

if(giveObj.get(“Membership”).quantity > 0) {
ga(‘ecommerce:addItem’, {
‘name’: ‘Personal Membership’,
‘price’: giveObj.get(“Membership”).price,
‘quantity’: 1
});
}

ga(‘ecommerce:send’);

[/HTML]

The “giveObj” is the object that tracks what the user is buying. Here is how the cart is setup in backbone:

[HTML] var CartModel = Backbone.Model.extend({
defaults: {
Give: {
quantity: 1,
price: 49.99
},
Membership: {
quantity: 0,
price: 49.99
},
Total: 0
}
});

giveObj = new CartModel();

[/HTML]

Note: This particular client is selling subscription based memberships, so the only metrics we defined were the “gift,” price, and quantity. The “gift” is a $49.99 membership, and users have the option of buying themselves a membership for an additional; $49.99. For more complex stores, you will need to define the metrics for each product being sold.

Step Three: Sending the Pageview

Now you will need the pageview snippet that was deleted in step one. This will send all the data into Google Analytics. Go to the section of code where Backbone changes the view between pages. From here, place this slightly modified snippet:
[HTML]

ga(‘send’, ‘pageview’, {page: “/” + view});

[/HTML]

The modification will strip the “#” in the URL used to differentiate pages, and will also report your views as their own individual pages in Google Analytics, which provides clean data for each page.

Step Four: Configuring eCommerce and Goals in Google Analytics

Login to your Google Analytics account, go to Admin > Ecommerce Settings. Enable eCommerce by turning it “on.” This will ensure transaction data is reported in the GA interface.

Admin Screen

Enable E-Commerce

Once the eCommerce functionality is enabled, head over to the goals section of the admin screen. A simple “Checkout Complete” goal should suffice here.

Goal step 1

You will want to use the destination type so the “Thank You” page can be defined as a conversion.

Goal step 2

Goal step 3

From here, you can set the destination URL, and setup the conversion funnel. Since the eCommerce code reports the transaction value, it can be left “off” when dealing with the goals.

Once the goals are complete, use the developer tools and the Google Analytics Debugger to test your code. Everything should be ready to go at this point. Make sure to let us know if you have any questions or issues!

About the Author

Josh serves as Marketing Assistant for Valtira, a Minneapolis-based web development company. He contributes to the organization's own marketing efforts, as well as their clients online marketing. Josh's areas of focus include digital marketing strategy and web analytics. You can connect with Josh on LinkedIn.