3

ユーザーがアプリ内にいるときに構築された URL が一意であっても、ページビューを集計できるように、AngularJS SPA でangularticsとGoogle アナリティクスを使用しようとしています。ユーザーがページからページへ (および状態から状態へ) 移動するにつれて、URL は GUID を含めてそれ自体の上に構築され続けます。例については、以下を参照してください。

  1. ページ 1: localhost:9000/selectListing
  2. ページ 2: localhost:9000/34ea85a0-84db-4443-b40b-f7e0b6b0b096/selectFiles
  3. ページ 3: localhost:9000/34ea85a0-84db-4443-b40b-f7e0b6b0b096/addUser/ceb1639a-1ba4-4f09-a175-474bea0fe3bf

Google アナリティクスでこの情報を見ると、ユーザーがリアルタイム ページ ビューのリストの下にある selectFiles ページにいるたびに、一意の URL が表示されます。例えば：

  1. ローカルホスト:9000/34ea85a0-84db-4443-b40b-f7e0b6b0b096/selectFiles
  2. ローカルホスト:9000/0c006d26-bff4-43da-aaee-d332f92b05db/selectFiles

代わりに /selectFiles ページにユーザー数が表示されるように集計したいだけです

index.html ファイルの Google アナリティクス コードは次のとおりです。

if (window.location.host.indexOf('cats.kittens.com') >=0){
        (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-5555555-5', 'auto');
        $window.ga('send', 'pageview', { page: $location.url() });

app.js ファイルに実装したコードは次のとおりです。

angular.module('myApp', [
    'ui.router', 'ui.bootstrap', 'ui.bootstrap.tpls', 'ngTable', 'ngSanitize', 'angularFileUpload','angular.filter', 'angulartics', 'angulartics.google.analytics',
    ])
/* Angulartics configuration */
.config(['$analyticsProvider', function ($analyticsProvider) {
    $analyticsProvider.firstPageview(false); /* Records pages that don't use $state or $route */
    $analyticsProvider.withAutoBase(true);  /* Records full path */
}])
.config(['$stateProvider', '$urlRouterProvider', '$logProvider', function ($stateProvider, $urlRouterProvider, $logProvider) {
    'use strict';

    // global $log.debug setting
    $logProvider.debugEnabled(true);

}]);

Google アナリティクスと ui-router でこのソリューションを試しましたが、成功しませんでした: http://www.arnaldocapo.com/blog/post/google-analytics-and-angularjs-with-ui-router/72

他に試してみることができることを教えてください。前もって感謝します！

4

1 に答える 1

1

この問題を github でさらに数日間調査した後、解決策を見つけました。この実行ブロックを app.js ファイルに追加しました。

.run(['$rootScope', '$stateParams', '$analytics', '$location', '$log', function($rootScope, $stateParams, $analytics, $location, $log) {
    $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams) {
        var overrideStateParams = {};
        var flattener = null;
        if (toState.angulartics && toState.angulartics.flattenParams === true)
        {
            angular.forEach(toParams, function(v,k) {
                overrideStateParams[k] = ':' + k;
            });
        }
        else if (toState.angulartics && angular.isArray(toState.angulartics.flattenParams))
        {
            angular.forEach(toState.angulartics.flattenParams, function(flattenParam) {
                overrideStateParams[flattenParam] = ':' + flattenParam;
            });
        }
        else
        {
            // default is to not flatten
        }
        var url = location.host + decodeURIComponent(location.hash);
        url = url.replace(/#/, '/').replace(/\/+/g, '/').replace(/([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})/ig, 'GUID');
        $log.info(url);
        $analytics.pageTrack(url);
    });
}])

上記のコードでは、GUID を正規表現に置き換えていることに注意してください。一意の URL のニーズに合わせて正規表現を変更する必要がある場合があります。また、URL を切り詰める必要がある各状態に、次のコードを追加しました。

angulartics: { flattenParams: true }

状態ごとにルート構成ファイルに次のように実装します。

            .state('Kittens.meow', {
                url: '/meow',
                templateUrl: 'meow/hiss.html',
                angulartics: { flattenParams: true }
            })
于 2015-09-17T17:28:20.247 に答える