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

posted in: AngularJS | 22

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!Share on FacebookTweet about this on TwitterShare on RedditShare on Google+Share on LinkedInBuffer this pageEmail this to someoneFlattr the author