Sammy.js with google analytics in knockout app

Question

I am using knockout with sammy.js for my web application. And I am trying to add google analytics to it. I quickly found the following plugin to implement page tracking.

I followed the steps and my page looks like this:

<script src="jquery, knockout, other things, sammy, sammy.googleanalytics"></script> // I list them this way just to save space here

My main javascript file looks like this:

Sammy(function(){
    this.use(Sammy.GoogleAnalytics);

    // all my routes
    this.get('#!route1', function(){

    });
}).run();

And then follows 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', 'myTrackingNumber', 'myURL');
ga('send', 'pageview');

When I run the application and navigate through different routes, I see not errors in the console, but I also see no communication to google analytics server: nothing like this http://www.google-analytics.com/__utm.gif? is shown in network tab in chrome (even during the page load).

Viewing example page in sammy.js/google-analitcs I see that their GA code is different. Also I see that the latest commit to the plugin is like 4 years ago, so most probably it is outdated.

How can I make my GA work with knockout and sammy?

Answer 1

Your Google analytics snippet is using Analytics.js which is

a new way to measure how users interact with your website. It is similar to the previous tracking code, ga.js, but offers more flexibility for developers to customize their implementations.

So the API has been changed since the ga.js which was used by the sammy-google-analytics plugin.

When you are using the Analytics.j you need to use the new ga function instead of the old pageTracker object.

Luckily the plugin is very simple and there is only two places where you need to change it use the new API:

(function ($) {

  Sammy = Sammy || {};

  // A simple plugin that pings Google Analytics tracker
  // every time a route is triggered
  //
  // === Arguments
  //
  // +trackerAccessor+:: an accessor for the Google Analytics ga function.  
  // Defaults to the default function defined by the analytics.js snippet, 
  // or pass your own tracker accessor function if you
  // have a custom install
  Sammy.GoogleAnalytics = function (app, trackerAccessor) {
      var _trackerAccessor = 
            trackerAccessor || function () { return window.ga; },
        shouldTrack = true;

      this.helpers({
          noTrack: function () {
              disableTracking();
          }
      });

      this.bind('event-context-after', function () {
          if (typeof _trackerAccessor != 'undefined' && _trackerAccessor() 
                     && shouldTrack) {
              console.log('tracking', this.path);
              _trackerAccessor()('send', 'pageview', this.path);
          }
          enableTracking();
      });

      function disableTracking() {
          shouldTrack = false;
      }

      function enableTracking() {
          shouldTrack = true;
      }
  };
})(jQuery);

The rest of the plugin should work the same as described in its documentation:.