Question

我想在我的角度应用程序中实现分析，比如用户最常使用哪个功能，哪个功能最少使用。用户最常访问的是哪个页面。

我听说过google-analytics。

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

Answer 1

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

首先，您应该在index.html文件中添加脚本以注入Google Analytics数据：

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

然后配置您的应用以启用Google Analytics：

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

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

2 个答案: