AngularJS をフロントエンドとして使用して新しいアプリをセットアップしています。クライアント側のすべては HTML5 プッシュステートで行われ、Google アナリティクスでページ ビューを追跡できるようにしたいと考えています。
質問する
119408 次
21 に答える
242
ng-viewAngular アプリで使用している場合は、イベントをリッスンして$viewContentLoaded、追跡イベントを Google アナリティクスにプッシュできます。
メインの index.html ファイルに追跡コードを設定し、var _gaqMyCtrlという名前で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() });
});
}
于 2012-05-23T05:01:29.273 に答える
58
に新しいビューが読み込まれると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 モジュールを定義するときは、次のように分析モジュールを含めます。
angular.module('myappname', ['analytics']);
更新：
新しいユニバーサル Google アナリティクス トラッキング コードは、次のように使用する必要があります。
$window.ga('send', 'pageview', {page: $location.url()});
于 2012-09-04T11:44:51.700 に答える
49
app.run(function ($rootScope, $location) {
$rootScope.$on('$routeChangeSuccess', function(){
ga('send', 'pageview', $location.path());
});
});
于 2013-10-17T03:41:57.787 に答える
40
早速追加です。新しい analytics.js を使用している場合は、次のようになります。
var track = function() {
ga('send', 'pageview', {'page': $location.path()});
};
さらに 1 つのヒントとして、Google アナリティクスは localhost では起動しないということです。したがって、localhost でテストしている場合は、デフォルトの create の代わりに以下を使用してください (完全なドキュメント) 。
ga('create', 'UA-XXXX-Y', {'cookieDomain': 'none'});
于 2013-08-12T22:28:24.627 に答える
7
上記のアプローチを使用して、githubで簡単な例を作成しました。
于 2012-12-27T19:23:49.590 に答える
5
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
}
]);
于 2014-10-20T18:39:42.490 に答える
4
ngRoute の代わりに AngularUI Router を使用している場合は、次のコードを使用してページ ビューを追跡できます。
app.run(function ($rootScope) {
$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
ga('set', 'page', toState.url);
ga('send', 'pageview');
});
});
于 2016-05-25T14:35:07.297 に答える
3
ui-router を使用している場合は、次のように $stateChangeSuccess イベントをサブスクライブできます。
$rootScope.$on('$stateChangeSuccess', function (event) {
$window.ga('send', 'pageview', $location.path());
});
完全な動作例については、このブログ投稿を参照してください
于 2016-01-24T05:52:49.387 に答える
3
GA の「設定」を使用して、ルートが Google リアルタイム分析用に確実に選択されるようにします。そうしないと、GA への後続の呼び出しがリアルタイム パネルに表示されません。
$scope.$on('$routeChangeSuccess', function() {
$window.ga('set', 'page', $location.url());
$window.ga('send', 'pageview');
});
Google は、「send」で 3 番目のパラメータを渡す代わりに、一般的にこのアプローチを強くお勧めします。 https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications
于 2016-04-01T15:06:09.930 に答える
3
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 を挿入して呼び出しを行うことができます。
Analytics.set('&uid', user.id);
于 2016-12-15T13:57:53.700 に答える
1
個人的には、現在のパスではなく、テンプレートの URL を使用して分析をセットアップするのが好きです。これは主に、アプリケーションにmessage/:idやなどの多くのカスタム パスがあるためprofile/:idです。これらのパスを送信すると、分析内で非常に多くのページが表示され、ユーザーが最もアクセスしているページを確認するのが難しくなります。
$rootScope.$on('$viewContentLoaded', function(event) {
$window.ga('send', 'pageview', {
page: $route.current.templateUrl.replace("views", "")
});
});
多くのページが、 、user-profile.htmlではなく、 、 などの分析内でクリーンなページビューを取得できるようになりました。レポートを処理して、ユーザー プロファイルを閲覧している人数を確認できるようになりました。message.htmlprofile/1profile/2profile/3
なぜこれがアナリティクスの悪い慣行なのかについて異議がある場合は、喜んでお知らせします。Google アナリティクスを使用するのは初めてなので、これが最善のアプローチかどうかはわかりません。
于 2016-02-29T06:49:12.853 に答える
0
ペドロ・ロペスの答えとさらに融合し、
これを ngGoogleAnalytis モジュールに追加しました (多くのアプリで再利用しています):
var base = $('base').attr('href').replace(/\/$/, "");
この場合、インデックス リンクにタグがあります。
<base href="/store/">
angular.js v1.3 で html5 モードを使用する場合に便利です。
(base タグがスラッシュ / で終わらない場合は、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()
});
}
);
}
]);
于 2014-11-21T12:29:25.933 に答える
-3
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>
于 2013-12-21T17:09:57.500 に答える