我正在使用 AngularJS 作为前端设置一个新应用程序。客户端的一切都是通过 HTML5 pushstate 完成的，我希望能够在 Google Analytics 中跟踪我的页面浏览量。
问问题
119408 次
21 回答
242
如果您ng-view在 Angular 应用程序中使用，您可以监听$viewContentLoaded事件并将跟踪事件推送到 Google Analytics。
假设您已在主 index.html 文件中设置了跟踪代码，名称为var _gaq并且 MyCtrl 是您在ng-controller指令中定义的内容。
function MyCtrl($scope, $location, $window) {
$scope.$on('$viewContentLoaded', function(event) {
$window._gaq.push(['_trackPageView', $location.url()]);
});
}
更新： 对于新版本的谷歌分析使用这个
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 Analytics 不会将其计为新页面加载。幸运的是，有一种方法可以手动告诉 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']);
更新：
您应该将新的 Universal Google Analytics 跟踪代码用于：
$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()});
};
另外一个提示是谷歌分析不会在本地主机上触发。因此，如果您在 localhost 上进行测试，请使用以下内容而不是默认创建（完整文档）
ga('create', 'UA-XXXX-Y', {'cookieDomain': 'none'});
于 2013-08-12T22:28:24.627 回答
11
我创建了一个服务 + 过滤器，可以帮助你们解决这个问题，如果您将来选择添加它们，也许还可以帮助其他一些提供商。
查看https://github.com/mgonto/angularytics，让我知道这对你有什么影响。
于 2013-06-04T05:11:18.010 回答
10
合并 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()
});
});
}
]);
将第三个参数设置为对象（而不仅仅是 $location.path()）并使用 $routeChangeSuccess 而不是 $stateChangeSuccess 就可以了。
希望这可以帮助。
于 2014-08-13T15:58:01.730 回答
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 回答
5
最好的方法是使用谷歌标签管理器根据历史监听器触发你的谷歌分析标签。这些内置在 GTM 界面中，可以轻松跟踪客户端 HTML5 交互。
启用内置的历史变量并创建触发器以根据历史更改触发事件。
于 2015-03-30T16:42:17.043 回答
5
我发现该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。
于 2018-05-27T14:51:54.197 回答
4
如果有人想使用指令来实现，请在 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()]);
});
}
};
});
于 2013-06-26T22:27:12.403 回答
4
对于那些使用 AngularUI Router 而不是 ngRoute 的人，可以使用以下代码来跟踪页面浏览量。
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 'set' 确保为 Google 实时分析选择路线。否则，对 GA 的后续调用将不会显示在实时面板中。
$scope.$on('$routeChangeSuccess', function() {
$window.ga('set', 'page', $location.url());
$window.ga('send', 'pageview');
});
Google 通常强烈建议使用这种方法，而不是在“发送”中传递第三个参数。 https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications
于 2016-04-01T15:06:09.930 回答
3
创建单页应用程序的开发人员可以使用autotrack，其中包括一个urlChangeTracker插件，可以为您处理本指南中列出的所有重要注意事项。有关使用和安装说明，请参阅autotrack 文档。
于 2016-08-07T17:24:33.083 回答
3
我在 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 并拨打电话：
Analytics.set('&uid', user.id);
于 2016-12-15T13:57:53.700 回答
2
我正在使用 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);
});
这样我可以跟踪不同的状态。也许有人会发现它很有用。
于 2014-07-16T13:34:22.930 回答
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.html而不是许多页面profile/1是profile/2和profile/3。我现在可以处理报告以查看有多少人正在查看用户配置文件。
如果有人对为什么这在分析中是不好的做法有任何异议，我会很高兴听到这个消息。使用 Google Analytics 很新，所以不太确定这是否是最好的方法。
于 2016-02-29T06:49:12.853 回答
1
我建议使用 Segment 分析库并遵循我们的Angular 快速入门指南。您将能够使用单个 API 跟踪页面访问和用户行为操作。如果您有 SPA，则可以允许RouterOutlet组件在页面呈现时处理并用于ngOnInit调用page调用。下面的示例显示了您可以执行此操作的一种方法：
@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 多个目的地），而无需编写任何额外的代码，您可以通过 Segment 来打开和关闭不同的目的地。
于 2019-02-21T22:49:56.910 回答
0
与佩德罗洛佩兹的回答更加融合，
我将此添加到我的 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()
});
}
);
}
]);
于 2014-11-21T12:29:25.933 回答
-3
如果您正在寻找对 Google Analytics 新跟踪代码的完全控制，您可以使用我自己的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 回答