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:


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

The final tracking snippet will look like this:


<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>

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:

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');

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

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

giveObj = new CartModel();

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:


ga('send', 'pageview', {page: "/" + view});

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!

How to easily Integrate OptimizePress and MemberMouse for Killer Membership Sites

OptimizePressMemberMouseIntegration

While there are many ways to make money on your website, few of them involve complete control over the product you are selling. You can make great money through affiliate programs or advertising in the short term. But that money might disappear … [Continue reading]

The Importance of Setting Goals in Life

5-Year-Plan

  Where do you see yourself in 5 years? Such a cliche. You have surely heard that question in a business setting or on a job interview… … and thought it was complete bullshit. How could I possibly know where I will be in 5 … [Continue reading]

My Experience with OptimizePress: Hitting a Wall, Giving In and Finding Zen

OptimizePress Saved the Day Header

While my loyal readers and newsletter subscribers are probably aware that I have spent a great deal of the past 6 months working on a website/product/startup called Knowledge Land, it may be new to some of you. The vision behind Knowledge Land is to … [Continue reading]

Analytics for SEO: Time to Grow Up and Think Like an Executive

SEO-in-a-Not-Provided-World.png

In June of this year I presented at the SMX Advanced conference in Seattle about a topic that is near and dear to my heart: Dealing with the problem of (not provided) keywords in our web analytics tools. As someone who has taught Google Analytics … [Continue reading]

22 Reasons Why Your Website Sucks

Sucks

Authors note: These observations have been assembled based on 18 years as a web developer, Internet marketer, web analyst and project manager. All examples are fictional and meant to be intentionally humorous. The reality is that it’s freaking hard … [Continue reading]

Career Advice for Advancement #4: If You’re Not Growing, You’re Dying

Highway road going up

Being close to the generation of revenue is safest place to be in most organizations. While a few of us intuitively know that this is true - that making money for our companies will lead to increased job security, it’s not always clear why this is … [Continue reading]

2014 Google Analytics Summit Keynote and Product Announcements

Google-Analytics-Summit-Data-in-Action-2014.jpg

We are back for another year of the Google Analytics Summit. As we have done in 2012 and 2013, Jeffalytics will be live-blogging the keynote experience and sharing reactions as they happen. One thing to note is that this year not every announcement … [Continue reading]

Career Advice for Advancement #3: Perceptions Are Reality

Perception Reality

The first time I quit my job to start a new business, I was 24 years old and in over my head. I knew that if I kept on doing the right things, I would succeed, but it wasn’t always clear what the right things were. One of the pieces of advice that … [Continue reading]

Career Advice for Advancement #2: Always Live a Year Behind Your Means

Overloaded Piggy Bank

Note 1:  Giving financial advice is a sensitive subject, and I am not a licensed professional. As such, this post is meant to be demonstrative only and should not be considered as me giving you financial advice. Make sure that you consult a … [Continue reading]

True ROI Measurement for E-Commerce Websites Using AdWords, Google Analytics and Excel

True AdWords ROI

This past Saturday I gave a presentation at Measurecamp in London about the topic of ROI. This is something that has been at the top of my mind recently as I have been working on some projects to help paid search advertisers easily determine the … [Continue reading]