Setting Up the Angulartics Plugin for AngularJS

This article shows how to add tracking and analytics to AngularJS applications using the jKoolCloud Angulartics plugin.

Single-page applications built with AngularJS present a challenge for tracking and analytics. The jKoolCloud Angulartics plugin makes this easy.

npm install tnt4j-angulatics-plugin --save

<script src="js/angulartics-tnt4j.js"></script>

This simple tutorial is based on Google’s PhoneCat tutorial; it extends the AngularJS tutorial by adding Angulartics—analytics for AngularJS applications.

• Node.JS
• Bower

If you don’t have these, simply follow the instructions in the AngularJS Tutorial.

Setup Steps

Step 1 — Clone the tutorial app

git clone --depth=14 https://github.com/angular/angular-phonecat.git

Step 2 — Install dependencies

npm install
bower install

Step 3 — Install Angulartics

(Install Angulartics for the project.)

Step 4 — Add the TNT4J Angulartics script

Place angulartics-tnt4j.js in your scripts directory: ./js.

Step 5 — Edit index.html to include Angulartics scripts

From the project root, cd angular-phonecat/app, then add these script tags to index.html:

<script src="js/angulartics-tnt4j.js"></script>
<script src="bower_components/angulartics/dist/angulartics.min.js"></script>

Step 6 — Declare dependencies in app.js

From angular-phonecat/app, cd js and edit app.js to add angulartics-tnt4j and angulartics as dependencies to the existing Angular app.

Step 7 — Run TNT4J-Streams

Start the TNT4J-Streams application using the configuration provided in this folder.
Ensure your jKoolCloud tokens are configured in tnt4j.properties.

Step 8 — Allow CORS access

• Edit package.json to set the start command:

  "start": "http-server -a 0.0.0.0 -p 8000 --cors",

• Allow CORS in your browser (e.g., in Chrome, add a CORS plugin/extension).

Step 9 — Start the web server and verify

Run the included web server:

npm start

Open http://localhost:8000/app/ in your browser.
Now all Angular routed pages are tracked.

Step 10 — Track image clicks (example)

To track every image click, edit phone-detail.html and add the attributes to the <img> tag:

<ul class="phone-thumbs">
  <li ng-repeat="img in phone.images">
    <img ng-src="{{img}}"
         ng-click="setImage(img)"
         analytics-on="click"
         analytics-event="Image View">
  </li>
</ul>