Angularytics: The solution to tracking page views and events in a SPA with AngularJS

posted in: AngularJS | 19

TL;DR: Check out the Angularytics GitHub repo and quick bootstrap here

Hey,

We need Analytics to improve our app. However, most analytics (Like Google Analytics) aren’t yet fully prepared for Single Page Apps (SPA). Google Analytics tracks page views once your browser refreshes the page, which in old pages meant changing the URL. Now, with AngularJS, we never refresh the page. We have a complete WebApp which changes URLs, changes resources, but never does a refresh. So, the question is how can we track page views and events now?

That’s why I’ve created Angularytics. Angularytics makes it easy to track page views and events. For now, it works with a console logger and with Google Analytics.

In order to configure this to automatically track page views, all you need to do is the following:

Withi this, every time the URL changes in your SPA, Google is going to track this page view. Just 5 lines of code and you have this working in your SPA.

Now, if you want to track events, you can do this by either using the trackEvent filter or the Angularytics service. The track event method signature is the same as the one in Google Analytics and can be checked by clicking here

Let’s see how we can use the filter. Imagine we want to track an event when a user clicks on certain button that actually calls a function in the scope.

Pretty easy, right?

Now, let’s see how we can do this in a service:

This is it :). What do you think about this? I’d love your feedback :).

If you want to learn how to add an extra event handler like KissMetrics or for further information, please check on GitHub by clicking here.

Share!FacebookTwitterRedditGoogle+LinkedInbufferEmailflattr
  • Гранкин Андрей

    Thats great! I use same approach in my SPA earlier, when it was written without AngularJS. Now i implemented my app with angularjs and plan to add GA tracking, but now i will use Angularytics. Thanks

    • Martin Gontovnikas

      Awesome :). Let me know how this works out for you

  • Siyfion

    Such a shame that it forces you to also include lodash / underscore in your application though. :

    • Matt Lavoie

      lodash is pretty small and, though I could live without it, why would you want to? Its great!

      • Siyfion

        Quite simple; I already include SugarJS, why on earth do would I want to force my users to download yet *another* utility library, slowing down loading times and increasing dependencies for no real gain?

        • TheJeebus

          I had never heard of SugarJS before, so I checked it out. Looks nice, but why is it almost infinitely slower than both lodash and underscore?

          • Siyfion

            Really? What methods are you using to benchmark it against lodash and Underscore? Using the most recent version I’ve not noticed it to be any slower…

          • TheJeebus

            Perhaps I was exaggerating, but the map function looks super slow:
            http://jsperf.com/underscore-vs-lodash-vs-sugar

          • Siyfion

            I’m not 100% sure what version of SugarJS is being tested there, but yeah, it does seem to be quite a long way behind in .map() performance (although 700k ops/sec is still probably fast enough for most people’s needs!).

          • TheJeebus

            1.3.9, the latest.

          • TheJeebus

            What I find interesting here is, that according to Sugar’s docs, it won’t override the native map function. And since most modern browsers are ES5 compliant, it’s possible that it’s testing the browsers native map function, not Sugar’s. Which then conjures the question, why the f@#! it’s slower?

          • Siyfion

            True, interesting point there… Not sure why though!?

    • Martin Gontovnikas

      It doesn’t require it anymore :D

  • JPN

    I am using Tooltip & Typeahead from Angular-Twitter Bootstrap (http://angular-ui.github.io/bootstrap/).

    Now when I implemented Angularytics, both Tooltip & Typeahead are not working.
    Any idea why this is blocking them.

    • Martin Gontovnikas

      To be honest no idea. Any error in the console?

  • Marc

    Thanks a lot. Great script. I only have one problem: I get the following message in the Browser console: ReferenceError: ga is not defined.

    The init script for Google Analytics is within the head Tag.

    Any ideas?

    All I did so far is added the angularytics module and config and added the js file (also into index.html).

    Thanks in advance for your help.
    Marc

    • http://fordinteractive.com/ Andy Ford

      Did you ever find a solution to this? I’m having the same problem. My Google Analytics code doesn’t expose a ‘ga’ var, just ‘_gaq’

      • Martin Gontovnikas

        Hey, You can find the solution here: https://github.com/mgonto/angularytics/issues/18

        Basically, if you have ga and you just have _gaq, you need to change the Handler from GoogleUniversal to Google

        • http://fordinteractive.com/ Andy Ford

          Ah I see. Thank you, Martin!