Angulartics | Web analytics for AngularJS applications

Installation

Download Angulartics and the Angulartics plugin for your vendor. Note: All plugins list Angulartics as a dependency, so they will be downloaded together.

$ bower install angulartics-google-analytics --save

Load the relevant files in your applications html (or include them in your build script).

<script src="/bower_components/angulartics/dist/angulartics.min.js"></script>
<script src="/bower_components/angulartics-google-analytics/dist/angulartics-ga.min.js"></script>

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

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

// 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>

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.

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' });