AAngulartics | Web analytics for AngularJS applications

Vendor-agnostic & extensible

Avoid dealing with vendor-specific code. If your provider of choice is not among the existing plugins, just write your own.

Ready to use

Google Analytics, Kissmetrics, Mixpanel, Chartbeat and Segment.io are supported out of the box.

Google Analytics Kissmetrics Mixpanel Chartbeat Segment.io

1-line setup

Just add Angulartics to your app dependencies and you'll get automatic pageview tracking for your application routes.

Installation

In your application dependencies, inject Angulartics and the Angulartics plugin for your vendor.

angular.module('myApp', ['angulartics', 'angulartics.google.analytics'])

Make sure you delete any automatic tracking line from your vendor snippet code!


// Google Analytics example
ga('send', 'pageview'); // <---- delete this line!

Virtual pageviews

Angulartics does automatic virtual pageview tracking by default, meaning the entire user navigation across the different routes of your application is tracked. You can turn it off with virtualPageviews(false).

module.config(function ($analyticsProvider) {
  // turn off automatic tracking
  $analyticsProvider.virtualPageviews(false);

Declarative event tracking

The simplest way to do event tracking is by adding the attributes analytics-on and analytics-event to the element. Think of it as: on 'click', track event 'name'.

<a href="file.pdf" analytics-on="click" analytics-event="Download">Download</a>
Depending on your analytics provider, the analytics-event attribute is automatically mapped to its respective vendor field. For example, with Google Analytics, the event is used for the 'action' parameter.

Inferred values

analytics-on always needs to be present, because it is the attribute that enables event tracking for the element. All other attributes will be inferred if omitted.

<!-- infers analytics-event from the element inner text -->
<a href="file.pdf" analytics-on="click">Download</a>

<!-- infers the analytics-on value from the element type; for anchor is 'click' -->
<a href="file.pdf" analytics-on>Download</a>

<!-- same as adding analytics-event="Step 3" -->
<input type="submit" value="Step 3" analytics-on>

Additional parameters

Each vendor has its own set of tracking properties. For example, Google Analytics have category and label. You can set these properties with analytics- attributes.

<button analytics-on analytics-event="Play" analytics-category="Videos" analytics-label="Gone with the Wind">Play<button>

Scroll tracking

In the same way you can track an action by catching any valid DOM event (click, hover, etc), you can also track any element that appears into the viewport while scrolling the page. To achieve this, Angulartics uses jQuery Waypoints and provides you with a scrollby event that you can use for analytics-on.

First, you need to include the plugin script named angulartics-scroll.js, and inject angulartics.scroll into your module.

angular.module('myApp', [..., 'angulartics.scroll'])
<section id="features" analytics-on="scrollby">

Remember what we learned about inferred values: in the example above we didn't specify an event name so in this case the id attribute ("features") will be used.

jQuery Waypoints have a set of options to customize its behavior; you can specify any of them by adding scrollby-* attributes. For more information you can take a look at this sample.


Using the API

In order to track pageviews and events from within your application logic, inject $analytics and invoke either the pageTrack() or eventTrack() methods.

module.controller('SampleCtrl', function ($analytics) {
  $analytics.pageTrack('/my/url');
  $analytics.eventTrack('eventName');
  $analytics.eventTrack('eventName', {  category: 'category', label: 'label' });
Vendor Page Tracking support Event Tracking support Script Module
Google Analytics Yes Yes angulartics-google-analytics.js angulartics.google.analytics Sample
Kissmetrics Yes (via event tracking) Yes angulartics-kissmetrics.js angulartics.kissmetrics Sample
Mixpanel Yes (via event tracking) Yes angulartics-mixpanel.js angulartics.mixpanel Sample
Chartbeat Yes No angulartics-chartbeat.js angulartics.chartbeat Sample
Segment.io Yes Yes angulartics-segmentio.js angulartics.segment.io Sample

What about you?

You have an analytics vendor of choice and there's no Angulartics plugin for it? Please feel free to write your implementation and PR'it on GitHub. It'll be most welcomed!