Add Google Analytics to Backbone JS

Backbone.js is known for its minimalistic approach and doesn't offer built-in support for analytics. However, you can manually integrate GA into your application. Here's how to do it, step by step.

Let's dive in!

1. Integrating Google Analytics
   1. Set up Google Analytics
   2. Add GA Tracking Code
   3. Track Page Views
   4. Track Events
   5. Testing and Deployment
   6. (Optional) Create New Properties
2. Final Thoughts

Before we dig in I want to show you something. I promise it's worth it...

Google Analytics is great, but also complex and a bit clunky. If you just want a straightforward dashboard with the insights you need, GA is not a great place to start. Additionally, Google doesn't care about privacy and GA requires an annoying cookie banner.

That's why I built Simple Analytics, a privacy-friendly and simple analytics tool - no personal data, no cookies, just the insights you need in a straightforward dashboard.

Here is how it looks vs GA. Feel free to check our live analytics to get an idea for your project. (It is free btw)

All right, enough about us. Now let's get into answering your question!

Integrating Google Analytics

Set up Google Analytics

• Log into your GA profile (or create one, if you haven't already)
• Create a GA property for your app.
• Inspect the property and note down your Measurement ID. You will need it later.

Add GA Tracking Code

In your Backbone.js application, include the GA tracking code. This is added in the main HTML file:

<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'YOUR_MEASUREMENT_ID');
</script>

Track Page Views

Backbone.js applications often use the Backbone Router for navigation. You can listen to route changes and trigger GA pageview tracking accordingly:

1. Modify Your Router: In your Backbone Router, add a method to handle page view tracking:

       var Backbone = require('backbone');
   
    var MyRouter = Backbone.Router.extend({
      routes: {
        '': 'home',
        'about': 'aboutPage',
        // other routes...
      },
   
      initialize: function() {
        this.on('route', this.trackPageView);
      },
   
      trackPageView: function() {
        var path = Backbone.history.getFragment();
        gtag('config', 'YOUR_MEASUREMENT_ID', {'page_path': '/' + path});
      },
   
      // Route handlers...
    });
    

2. Call the Tracking Function: Ensure that the trackPageView function is called whenever a route changes.

Track Events

For tracking specific user interactions like button clicks or form submissions, you can use the gtag function directly in your view events:

var MyView = Backbone.View.extend({
  events: {
    'click #myButton': 'onButtonClick'
  },

  onButtonClick: function() {
    gtag('event', 'click', {
      'event_category': 'button',
      'event_label': 'MyButtonLabel'
    });
  },

  // Other view methods...
});

Testing and Deployment

Deploy your updated application and monitor the Google Analytics dashboard to ensure data is being captured. You can also use tools like the Google Analytics Debugger for Chrome for debugging.

(Optional) Create New Properties

To track multiple apps, create more GA properties and use the corresponding Measurement IDs. This prevents GA from conflating the data.

Final Thoughts

Adding Google Analytics to your app can give you great insights. However, ask yourself: is Google Analytics the right tool for you?

GA is an overpowered solution for straightforward analytics. If you're looking for a simple and intuitive dashboard with the insights you need, there are better alternatives. Yes, I’m talking about my own product (Simple Analytics), but there are others out there as well.

I hated using Google Analytics for my projects. It's clunky, there are hundreds of dashboards and it doesn't look appealing. Also Google doesn't care about privacy or ethics. That's why I decided to build my own and more intuitive web analytics tool.

If this resonates with you, feel free to give Simple Analytics a spin. You just need to add the script to your app and off you go. This takes about one minute- and there is a free version as well!

Enjoy!