angularjs - 角度のあるアプリケーションを分析するための最良の方法は何ですか?

Question

どの機能がユーザーによって最も使用され、どの機能が最も使用されていないかなど、Angular アプリケーションに分析を実装したいと考えています。ユーザーが最もアクセスしているページ。

google-analytics について聞きました。

同じサンプルアプリのAngularアプリの分析を実装するための参照を誰でも提供できますか?

Answer 1

アンギュラリティクスを使用できます。私にとっては、実装が非常に簡単で、十分に強力です。

まず、スクリプトを index.html ファイルに追加して、Google アナリティクス データを挿入する必要があります。

<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 アナリティクスを有効にするようにアプリを構成します。

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