跟踪Angular2中的Google Analytics页面浏览量 [英] Tracking Google Analytics Page Views in Angular2

问题描述

我使用Angular 2建立了一个新网站作为前端。由于所有事情都是通过推送状态完成的，所以没有页面加载通常会触发Google Analytics代码向Google服务器发送页面视图。

如何手动发送页面查看事件给谷歌，以便我可以跟踪我的网站用户正在查看什么？

解决方案

我设法通过订阅在路由器上进行更改，检查路由是否真的发生了变化（我有时在某些路由上收到多个事件），然后将新路径发送给Google。

app.component.ts

 从'...'导入{...}; 
 
 //将ga函数声明为环境
 declare var ga：Function; 
 
 @Component（{...}）
 
导出类AppComponent {
 private currentRoute：string; 
 
构造函数（_router：Router）{
 //使用内置`distinctUntilChanged`特性的Rx来处理URL更改c / o @ dloomb的回答
 router.events.distinctUntilChanged（（前一个：any，current：any）=> {
 //订阅任何URL更改的`NavigationEnd`事件
 if（当前instanceof NavigationEnd）{
 return previous.url = == current.url; 
} 
 return true; 
}）。subscribe（（x：any）=> {
 ga（'set'，'page'， x.url）; 
 ga（'send'，'pageview'）
}）; 
} 
} 
} 
  

您还需要包含在加载您的angular2应用程序之前，您的主索引文件中包含Google分析代码，以便全局 ga 对象存在，但您不想发送初始视图两次。为了做到这一点，从GA脚本中删除以下行：
$ b $ p index.html

 < script> 
（函数（i，s，o，g，r，a，m）{...}）（窗口，文档，'script'，'https：//www.google-analytics.com/analytics的.js'， 'GA'）; 
 
 ga（'create'，'UA-XXXXXXXX-X'，'auto'）; 
 //删除此行以避免发送第一个页面视图两次。 
 // ga（'send'，'pageview'）; 
 
< / script> 
 <！ -  
在ga后载入您的ng2应用程序。 
这种延期脚本加载方式并不能保证这会发生
，但是您可以使用Promise或适用于您的特定项目。 
  - > 
< script defer type =text / javascriptsrc =/ app.js>< / script> 
  

---

使用第三方库 strong>

作为自己实现GA的替代方案，图书馆 Angulartics2 也是实现GA跟踪的流行工具，并且也与其他分析供应商集成。

I have built a new site using Angular 2 as the front-end. As everything is done via push state, there are no page loads which typically trigger the Google Analytics code to send a page view to Google's servers.

How can I manually send page view events to Google so that I can track what users of my site are viewing?

解决方案

I managed to get this working by subscribing to changes on the router, checking that the route had actually changed (I was getting multiple events on some routes at times) and then sending the new path to Google.

app.component.ts

import { ... } from '...';

// Declare ga function as ambient
declare var ga:Function;

@Component({ ... })

export class AppComponent {
    private currentRoute:string;

    constructor(_router:Router) {
        // Using Rx's built in `distinctUntilChanged ` feature to handle url change c/o @dloomb's answer
        router.events.distinctUntilChanged((previous: any, current: any) => {
            // Subscribe to any `NavigationEnd` events where the url has changed
            if(current instanceof NavigationEnd) {
                return previous.url === current.url;
            }
            return true;
        }).subscribe((x: any) => {
            ga('set', 'page', x.url);
            ga('send', 'pageview')
        });
      }
    }
}

You also need to include the google analytics code in your main index file before loading your angular2 app so that the global ga object exists, but you don't want to send the initial view twice. In order to do this, remove the following line from the GA script

index.html

<script>
  (function(i,s,o,g,r,a,m){...})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXXX-X', 'auto');
  // Remove this line to avoid sending the first page view twice.
  //ga('send', 'pageview');

</script>
<!-- 
    Load your ng2 app after ga. 
    This style of deferred script loading doesn't guarantee this will happen
    but you can use Promise's or what works for your particular project. 
-->
<script defer type="text/javascript" src="/app.js"></script>

---

Using a third party library

As an alternative to implementing GA yourself, the library Angulartics2 is also a popular tool for implementing GA tracking and also integrates with other analytics vendors as well.

这篇关于跟踪Angular2中的Google Analytics页面浏览量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！