CODEWITHSUNDEEP
angularjsgoogle-analyticsmeasurement-protocol
Sunil Madan
Sunil Madan

Reputation: 447

What is the best way for analytics of an angular application?

I want to implement analytics in my angular application, like which feature is being used most by the user and which is being used least. Which page is being visited most by the user.

I heard about google-analytics.

Can anyone provide any reference to implement analytics of an angular app of any sample app for the same.

Upvotes: 1

Views: 1250

Answers (2)

Matheno
Matheno

Reputation: 4142

I wrote a directive for that once. In my package.json I've included Angulartics. Here is my directive, maybe it'll guide you, or someone else, in a good direction:

angular.module('app.utils')
    .directive('appGoogleAnalytics', appGoogleAnalytics);

/* @ngInject */
function appGoogleAnalytics(common) {

    var $log       = common.$log,
        $analytics = common.$analytics;

    var directive = {
            scope: {
                //event               : '@gaEvent',
                pageTrack           : '@gaPageTrack',
                watchSource         : '=gaWatchSource',
                watchMatch          : '=gaWatchMatch'
            },
            link                    : link
        }; 

    return directive;

    /* @ngInject */
    function link(scope, element, attrs, ngModel) {                   

        // Use a supplied object or else use the primitive type value
        var watchMatch = scope.watchMatch || attrs.gaWatchMatch;

        // Convert string boolean to a boolean type
        if(watchMatch && (watchMatch === 'true' || watchMatch === 'false')){
            watchMatch = watchMatch === 'true';
        }

        switch(attrs.gaEvent) {
            case 'click':
            case 'blur':
            case 'focus':
                element.bind(attrs.gaEvent, function () {
                    _pageTrack();
                });
                break;
            case 'load':
                _pageTrack();
                break;
        }

        scope.$watch('watchSource', function(value){

            // 1. In case the user supplied a watchMatch to which the watchSource must match
            // then use that to determine if you need to track an url
            // ONLY use to match an object, string, integer.
            // With a boolean check in case you check for a TRUE value it will still work
            // In case you supply a watchMatch with a FALSE value it will NOT!
            // In that case (you want to track when a property is false on your scope
            // use a [!] prefix in front of matchSource --> ga-match-source="!obj.property"
            // and don't not add a watchMatch
            if(watchMatch && watchMatch === value){
                _pageTrack();
                return;
            }

            if(watchMatch) return;

            // 2. In case no match source is supplied we use 3 defaults : 
            // - check if a boolean is true
            // - check if string is not ''
            // - check if property is not null
            if((typeof value === 'boolean' && value === true) ||
               (typeof value === 'string'  && value !== '') ||
               (typeof value === 'number'  && value !== 0) ||
               (typeof value === 'object'  && value !== null)){
                    _pageTrack();
                    return;
            }
        });

        function _pageTrack(){
            //$log.debug('pageTrackUrl ' + scope.pageTrack);
            $analytics.pageTrack(scope.pageTrack);
        }
    }
}

In my view I use it like this:

<form name="myForm"
      novalidate
      app-google-analytics
      ga-page-track="/my/page"
      ga-watch-source="accordion.isOpen">

Upvotes: 0

xSaber
xSaber

Reputation: 384

You could use Angularytics. Quite simple to implement and powerful enough, as for me.

First you should add a script to your index.html file to inject google analytics data:

<script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
         (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
         m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
         })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
         ga('create', 'UA-65559604-1', 'auto');
         ga('send', 'pageview');
</script>

Then configure your app to enable google analytics:

angular.module('sample-app', ['angularytics'])
  .config(function(AngularyticsProvider) {
    AngularyticsProvider.setEventHandlers(['Console', 'GoogleUniversal']);
  }).run(function(Angularytics) {
    Angularytics.init();
  });

Upvotes: 2

Related Questions