AngularJS and analytics - separating concerns

Question

Consider the following: multiple (manually bootstrapped) AngularJS applications on each page of a web application. Web analytics tracking (Adobe Omniture/SiteCatalyst, in this case) needs to be added to each application. However, I want to keep the analytics code completely separate from the rest of the AngularJS application - able to remove it at a moment's notice.

What would be the best way of going about this? I've considered the following:

• Write JQuery code to interrogate the DOM and submit the SiteCatalyst calls (will work, but not very AngularJS-ey)
• Find some way of extending the AngularJS controllers and wrapping methods with the extra analytics code. This will probably also involve adding $watch code for scope variables.
• Some other way of intercepting AngularJS events, similar to what can be done with HTTP interceptors.

Answer 1

This is what I would do:

1) Define a controller at the root of the application called: "AnalyticsCatcherController" (or something like that), that controller would be responsible for catching all the events that you want to track, something like this:

  .controller('AnalyticsCatcherController', ['$scope', function($scope) {
    $scope.$on('HitMainLink', function() {
      ...
    });
    $scope.$on('FbSharedClick', function() {
      ...
    });
  }]);

2) And then you just $emit your custom events from the actions of your directives, like this: $emit('FbSharedClick').

In this way if you want to remove the analytics you just need to get rid of the "AnalyticsCatcherController". If you want to use another tracking system: all the logic would be in the "AnalyticsCatcherController", completely separated from the logic of your app. It's true that those events would still be emitted even if you remove the controller, so what? They wouldn't have any real performance impact, further more: you could be using those events for other purposes, so you don't have to see them as part of your Analytics tracking system.