Google Analytics 的一些用法介绍 _Google

文章插图

这篇文章源自这样一个问题：如何对单页应用中的页面访问进行跟踪？
-- Ashwin Sathian（作者）

google Analytics （GA）这个最流行的用户活动追踪工具我们或多或少都听说过甚至使用过，但它的用途并不仅仅限于对页面访问的追踪。作为一个既实用又流行的工具，它已经受到了广泛的欢迎，因此我们将要在下文中介绍如何在各种 Angular 和 React 单页应用中使用 Google Analytics 。
这篇文章源自这样一个问题：如何对单页应用中的页面访问进行跟踪？
通常来说，有很多的方法可以解决这个问题，在这里我们只讨论其中的一种方法。下面我会使用 Angular 来写出对应的实现，如果你使用的是 React ，相关的用法和概念也不会有太大的差别。接下来就开始吧。
准备好应用程序首先需要有一个追踪 ID(tracking ID) 。在开始编写业务代码之前，要先准备好一个追踪 ID ，通过这个唯一的标识， Google Analytics 才能识别出某个点击或者某个页面访问是来自于哪一个应用。
按照以下的步骤：

访问 https://analytics.google.com ；
提交指定信息以完成注册，并确保可用于 Web 应用，因为我们要开发的正是一个 Web 应用；
同意相关的条款，生成一个追踪 ID；
保存好追踪 ID 。

追踪 ID 拿到了，就可以开始编写业务代码了。
添加 analytics.js 脚本【Google Analytics 的一些用法介绍】Google 已经帮我们做好了接入之前需要做的所有事情，接下来就是我们的工作了。不过我们要做的也很简单，只需要把下面这段脚本添加到应用的 index.html 里，就可以了：
<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=https://www.isolves.com/it/wlyx/ssyq/2019-10-15/g;m.parentNode.insertBefore(a,m)})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');现在我们来看一下 Google Analytics 是如何在应用程序中初始化的。
创建追踪器首先创建一个应用程序的追踪器。在 App.component.ts 中执行以下两个步骤：

声明一个名为 ga ，类型为 any 的全局变量（在 Typescript 中需要制定变量类型）；
将下面一行代码加入到 ngInInit() 中。

ga('create', <你的追踪 ID>, 'auto');这样就已经成功地在应用程序中初始化了一个 Google Analytics 的追踪器了。由于追踪器的初始化是在 OnInit() 函数中执行的，因此每当应用程序启动，追踪器就会启动。
在单页应用中记录页面访问情况我们需要实现的是记录访问路由(route-visits) 。
如何记录用户在一个应用中不同部分的访问，这是一个难点。从功能上来看，单页应用中的路由对应了传统多页面应用中各个页面之间的跳转，因此我们需要记录访问路由。要做到这一点尽管不算简单，但仍然是可以实现的。在 app.component.ts 的 ngOnInit() 函数中添加以下的代码片段：
import { Router, NavigationEnd } from '@angular/router';...constructor(public router: Router) {}...this.router.events.subscribe( event => { if (event instanceof NavigationEnd) { ga('set', 'page', event.urlAfterRedirects); ga('send', { hitType: 'pageview', hitCallback: () => { this.pageViewSent = true; }}); } } );神奇的是，只需要这么几行代码，就实现了 Angular 应用中记录页面访问情况的功能。
这段代码实际上做了以下几件事情：

从 Angular Router 中导入了 Router、NavigationEnd；
通过构造函数中将 Router 添加到组件中；
然后订阅 router 事件，也就是由 Angular Router 发出的所有事件；
只要产生了一个 NavigationEnd 事件实例，就将路由和目标作为一个页面访问进行记录。

这样，只要使用到了页面路由，就会向 Google Analytics 发送一条页面访问记录，在 Google Analytics 的在线控制台中可以看到这些记录。
类似地，我们可以用相同的方式来记录除了页面访问之外的活动，例如某个界面的查看次数或者时长等等。只要像上面的代码那样使用 hitCallBack() 就可以在有需要收集的数据的时候让应用程序作出反应，这里我们做的事情仅仅是把一个变量的值设为 true ，但实际上 hitCallBack() 中可以执行任何代码。