AngularJSを使用したGoogleアナリティクスのページビューの追跡

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

ng-viewAngularアプリで使用している場合は、$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()]);
  });
}

更新： google-analyticsの新しいバージョンでは、これを使用してください

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

新しいビューがに読み込まれると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']);

更新：

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

$window.ga('send', 'pageview', {page: $location.url()});

app.run(function ($rootScope, $location) {
    $rootScope.$on('$routeChangeSuccess', function(){
        ga('send', 'pageview', $location.path());
    });
});

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

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

さらに、1つのヒントは、Googleアナリティクスがlocalhostで起動しないことです。したがって、ローカルホストでテストする場合は、デフォルトのcreateの代わりに以下を使用してください（完全なドキュメント）

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

私はこれであなたたちを助けることができるサービス+フィルターを作成しました、そして将来あなたがそれらを追加することを選択した場合には多分他のいくつかのプロバイダーでも同様です。

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

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を使用するとうまくいきました。

お役に立てれば。

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

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

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

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

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

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に置き換えます。

誰かがディレクティブを使用して実装したい場合は、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()]);
      });
    }
  };
});

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

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

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

GAの「セット」を使用して、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

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

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

単一ページのアプリケーションを作成する開発者は、使用することができる自動追跡含み、urlChangeTrackerをそのハンドルあなたのために、このガイドに記載されている重要な検討事項のすべてのプラグインを。使用方法とインストール手順については、autotrackのドキュメントを参照してください。

AngluarJSをhtml5モードで使用しています。次の解決策が最も信頼できるものであることがわかりました：

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

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

このようにして、さまざまな状態を追跡できます。多分誰かがそれを便利だと思うでしょう。

個人的には、現在のパスではなくテンプレート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を使用するのはかなり新しいので、これが最善のアプローチであるかどうかはあまりわかりません。

セグメント分析ライブラリを使用し、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以上の宛先をサポート）を試すことに興味がある場合、スイッチを押すだけで異なる宛先をオン/オフに切り替えることができます。🙂

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

これを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()
          });
        }
      );
    }
  ]);

Googleアナリティクスの新しいトラッキングコードを完全に制御する必要がある場合は、私の独自のAngular-GAを使用できます。

gaインジェクションを介して利用できるため、テストが簡単です。すべてのrouteChangeでパスを設定することを除いて、それは魔法を使いません。ここでもページビューを送信する必要があります。

app.run(function ($rootScope, $location, ga) {
    $rootScope.$on('$routeChangeSuccess', function(){
        ga('send', 'pageview');
    });
});

さらにga、次のように、複数の分析関数をイベントにバインドできるディレクティブがあります。

<a href="#" ga="[['set', 'metric1', 10], ['send', 'event', 'player', 'play', video.id]]"></a>