angularjs - 分析角度应用程序的最佳方法是什么？

Question

我想在我的 Angular 应用程序中实现分析，例如用户使用最多的功能和最少使用的功能。用户访问最多的页面。

我听说过谷歌分析。

任何人都可以提供任何参考来实现任何示例应用程序的角度应用程序的分析。

Answer 1

你可以使用Angularytics。对我来说，实现起来非常简单且功能强大。

首先，您应该在 index.html 文件中添加一个脚本来注入谷歌分析数据：

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

然后配置您的应用程序以启用谷歌分析：

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

Answer 2

我曾经为此写过一个指令。在我的 package.json 中，我包含了 Angulartics。这是我的指令，也许它会引导你或其他人朝着一个好的方向前进：

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

在我看来，我这样使用它：

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