web-dev-qa-db-ja.com

AngularJSを使用したGoogle Analyticsページビューの追跡

フロントエンドとしてAngularJSを使用して新しいアプリをセットアップしています。クライアント側のすべてがHTML5 pushstateで行われ、Googleアナリティクスでページビューを追跡できるようにしたいと思います。

google-analyticsangularjs
220
dj2

Angularアプリでng-viewを使用している場合は、$viewContentLoadedイベントをリッスンし、トラッキングイベントをGoogleアナリティクスにプッシュできます。

メインのindex.htmlファイルにvar _gaqという名前でトラッキングコードを設定し、MyCtrlがng-controllerディレクティブで定義したものであると仮定します。

function MyCtrl($scope, $location, $window) {
  $scope.$on('$viewContentLoaded', function(event) {
    $window._gaq.Push(['_trackPageView', $location.url()]);
  });
}

PDATE： google-analyticsの新しいバージョンではこれを使用

function MyCtrl($scope, $location, $window) {
  $scope.$on('$viewContentLoaded', function(event) {
    $window.ga('send', 'pageview', { page: $location.url() });
  });
}
240
dj2

AngularJSに新しいビューが読み込まれると、Googleアナリティクスはそれを新しいページの読み込みとしてカウントしません。幸いなことに、手動でGAに新しいページビューとしてURLを記録するように指示する方法があります。

_gaq.Push(['_trackPageview', '<url>']);は仕事をしますが、AngularJSでそれをバインドする方法は？

使用できるサービスは次のとおりです。

(function(angular) { 

  angular.module('analytics', ['ng']).service('analytics', [
    '$rootScope', '$window', '$location', function($rootScope, $window, $location) {
      var track = function() {
        $window._gaq.Push(['_trackPageview', $location.path()]);
      };
      $rootScope.$on('$viewContentLoaded', track);
    }
  ]);

}(window.angular));

角度モジュールを定義するとき、次のように分析モジュールを含めます。

angular.module('myappname', ['analytics']);

UPDATE：

新しいユニバーサルGoogleアナリティクストラッキングコードは次のもので使用する必要があります。

$window.ga('send', 'pageview', {page: $location.url()});
57
Haralan Dobrev
app.run(function ($rootScope, $location) {
    $rootScope.$on('$routeChangeSuccess', function(){
        ga('send', 'pageview', $location.path());
    });
});
48
dpineda

簡単に追加できます。新しいanalytics.jsを使用している場合：

var track = function() {     
 ga('send', 'pageview', {'page': $location.path()});                
};

さらに、Googleアナリティクスがlocalhostで起動しないというヒントもあります。したがって、localhostでテストする場合は、デフォルトのcreate（ full documentation ）の代わりに次を使用します

ga('create', 'UA-XXXX-Y', {'cookieDomain': 'none'});
40
wynnwu

これをサポートするサービスとフィルターを作成しました。将来追加することを選択した場合は、おそらく他のプロバイダーでも使用できます。

https://github.com/mgonto/angularytics をチェックして、これがどのように機能するか教えてください。

11
mgonto

Wynnwuとdpinedaの回答をマージすることが、私にとってはうまくいきました。

angular.module('app', [])
  .run(['$rootScope', '$location', '$window',
    function($rootScope, $location, $window) {
      $rootScope.$on('$routeChangeSuccess',
        function(event) {
          if (!$window.ga) {
            return;
          }
          $window.ga('send', 'pageview', {
            page: $location.path()
          });
        });
    }
  ]);

3番目のパラメーターを（$ location.path（）だけでなく）オブジェクトとして設定し、$ stateChangeSuccessの代わりに$ routeChangeSuccessを使用すると、うまくいきました。

お役に立てれば。

10
Pedro Lopez

上記のアプローチを使用して、githubで簡単な例を作成しました。

https://github.com/isamuelson/angularjs-googleanalytics

7
IBootstrap

これを行う最良の方法は、Googleタグマネージャーを使用して、履歴リスナーに基づいてGoogleアナリティクスタグを呼び出すことです。これらはGTMインターフェースに組み込まれており、クライアント側のHTML5インタラクションを簡単に追跡できます。

組み込みのHistory変数を有効にし、履歴の変更に基づいてイベントを起動するトリガーを作成します。

4
user2236721

誰かがディレクティブを使用して実装したい場合は、index.htmlでdivを識別（または作成）します（bodyタグのすぐ下、または同じDOMレベル）

<div class="google-analytics"/>

そして、次のコードをディレクティブに追加します

myApp.directive('googleAnalytics', function ( $location, $window ) {
  return {
    scope: true,
    link: function (scope) {
      scope.$on( '$routeChangeSuccess', function () {
        $window._gaq.Push(['_trackPageview', $location.path()]);
      });
    }
  };
});
4
coderman

gtag()関数ではなく、ga()関数が機能していることがわかりました。

Index.htmlファイルの<head>セクション内：

<script async src="https://www.googletagmanager.com/gtag/js?id=TrackingId"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.Push(arguments);}
  gtag('js', new Date());
  gtag('config', 'TrackingId');
</script>

AngularJSコード内：

app.run(function ($rootScope, $location) {
  $rootScope.$on('$routeChangeSuccess', function() {
    gtag('config', 'TrackingId', {'page_path': $location.path()});
  });
});

TrackingIdを独自の追跡IDに置き換えます。

3
Brent Washburne

Ui-routerを使用している場合、次のように$ stateChangeSuccessイベントにサブスクライブできます。

$rootScope.$on('$stateChangeSuccess', function (event) {
    $window.ga('send', 'pageview', $location.path());
});

完全な動作例については、 このブログ投稿 を参照してください

3
Jason

GA 'set'を使用して、Googleリアルタイム分析用のルートが確実に選択されるようにします。それ以外の場合、GAへの後続の呼び出しはリアルタイムパネルに表示されません。

$scope.$on('$routeChangeSuccess', function() {
    $window.ga('set', 'page', $location.url());
    $window.ga('send', 'pageview');
});

Googleは一般に、「送信」で3番目のパラメータを渡すのではなく、このアプローチを強く推奨します。 https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications

3
fuzzysearch

私はhtml5モードでAngluarJSを使用しています。私は次のソリューションが最も信頼性が高いと判断しました。

angular-google-analytics ライブラリを使用します。次のようなもので初期化します。

//Do this in module that is always initialized on your webapp    
angular.module('core').config(["AnalyticsProvider",
  function (AnalyticsProvider) {
    AnalyticsProvider.setAccount(YOUR_GOOGLE_ANALYTICS_TRACKING_CODE);

    //Ignoring first page load because of HTML5 route mode to ensure that page view is called only when you explicitly call for pageview event
    AnalyticsProvider.ignoreFirstPageLoad(true);
  }
]);

その後、$ stateChangeSuccess 'にリスナーを追加し、trackPageイベントを送信します。

angular.module('core').run(['$rootScope', '$location', 'Analytics', 
    function($rootScope, $location, Analytics) {
        $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams, options) {
            try {
                Analytics.trackPage($location.url());
            }
            catch(err) {
              //user browser is disabling tracking
            }
        });
    }
]);

ユーザーを初期化したら、いつでもアナリティクスを挿入して電話をかけることができます：

Analytics.set('&uid', user.id);
3
Maleta

index.htmlで、gaスニペットをコピーして貼り付けますが、行ga('send', 'pageview');を削除します

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<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-XXXXXXXX-X');
</script>

私はそれにそれ自身のファクトリーファイルであるmy-google-analytics.jsを自己注入で与えるのが好きです：

angular.module('myApp')
  .factory('myGoogleAnalytics', [
    '$rootScope', '$window', '$location', 
    function ($rootScope, $window, $location) {

      var myGoogleAnalytics = {};

      /**
       * Set the page to the current location path
       * and then send a pageview to log path change.
       */
      myGoogleAnalytics.sendPageview = function() {
        if ($window.ga) {
          $window.ga('set', 'page', $location.path());
          $window.ga('send', 'pageview');
        }
      }

      // subscribe to events
      $rootScope.$on('$viewContentLoaded', myGoogleAnalytics.sendPageview);

      return myGoogleAnalytics;
    }
  ])
  .run([
    'myGoogleAnalytics', 
    function(myGoogleAnalytics) {
        // inject self
    }
  ]);
3
ilovett

私はui-routerを使用していますが、コードは次のようになります。

$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams){
  /* Google analytics */
  var path = toState.url;
  for(var i in toParams){
    path = path.replace(':' + i, toParams[i]);
  }
  /* global ga */
  ga('send', 'pageview', path);
});

これにより、さまざまな状態を追跡できます。たぶん誰かがそれを役に立つと思うでしょう。

2
Miha Eržen

シングルページアプリケーションを作成する開発者は autotrack を使用できます。これには、このガイドに記載されているすべての重要な考慮事項を処理する rlChangeTracker プラグインが含まれます。使用方法とインストール手順については、 autotrack documentation をご覧ください。

2
Abou-Emish

NgRouteの代わりにAngularUI Routerを使用している場合は、次のコードを使用してページビューを追跡できます。

app.run(function ($rootScope) {
    $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
        ga('set', 'page', toState.url);
        ga('send', 'pageview');
    });
});
1
Kevin M

個人的には、現在のパスの代わりにテンプレートURLを使用して分析を設定します。これは主に、アプリケーションにmessage/:idやprofile/:idなどのカスタムパスが多数あるためです。これらのパスを送信する場合、アナリティクス内で表示されるページが非常に多くなるため、ユーザーが最もアクセスしているページを確認するのは非常に困難です。

$rootScope.$on('$viewContentLoaded', function(event) {
    $window.ga('send', 'pageview', {
        page: $route.current.templateUrl.replace("views", "")
    });
});

多くのページがuser-profile.html、message.html、profile/1である代わりに、profile/2やprofile/3などの分析内でクリーンなページビューを取得できるようになりました。レポートを処理して、ユーザープロファイルを表示しているユーザーの数を確認できるようになりました。

なぜこれがアナリティクス内の悪い慣行であるかについて誰かが異議を唱えているなら、私はそれについて聞いてうれしいです。 Google Analyticsを使用するのはまったく新しいので、これが最善のアプローチであるかどうかはあまりわかりません。

1
Fizzix

セグメント分析ライブラリを使用し、 Angularクイックスタートガイド に従うことをお勧めします。単一のAPIで、ページへのアクセスを追跡し、ユーザーの行動を追跡できます。 SPAがある場合は、ページがレンダリングされるときにRouterOutletコンポーネントに処理を許可し、ngOnInitを使用してpage呼び出しを呼び出すことができます。以下の例は、これを行うことができる1つの方法を示しています。

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  ngOnInit() {
    window.analytics.page('Home');
  }
}

私は https://github.com/segmentio/analytics-angular のメンテナーです。セグメントを使用すると、追加のコードを記述することなく、複数の分析ツール（250以上の宛先をサポート）を試してみたい場合、スイッチを押すだけで異なる宛先をオン/オフに切り替えることができます。 ????

1
William

ペドロ・ロペスの答えとさらに融合し、

これを私のngGoogleAnalytisモジュールに追加しました（多くのアプリで再利用しています）：

var base = $('base').attr('href').replace(/\/$/, "");

この場合、インデックスリンクにタグがあります。

  <base href="/store/">

angular.js v1.3でhtml5モードを使用するときに便利です

（ベースタグがスラッシュ/で終わっていない場合、replace（）関数呼び出しを削除します）

angular.module("ngGoogleAnalytics", []).run(['$rootScope', '$location', '$window',
    function($rootScope, $location, $window) {
      $rootScope.$on('$routeChangeSuccess',
        function(event) {
          if (!$window.ga) { return; }
          var base = $('base').attr('href').replace(/\/$/, "");

          $window.ga('send', 'pageview', {
            page: base + $location.path()
          });
        }
      );
    }
  ]);
0
Felipe Sousa Iketani