GoogleAnalytics（GA）是我们听说过甚至或多或少使用过的流行的用户活动跟踪工具，但它的用途不仅限于跟踪页面访问量。作为一个有用且流行的工具，它已经获得了很大的知名度，因此下面我们将解释如何在各种Angular和React单页应用程序中使用GoogleAnalytics。这篇文章源于以下问题：HowtotrackpagevisitsinaSinglePageApplication?一般来说，解决这个问题的方法有很多，这里我们只讨论其中的一种。下面我将使用Angular来编写相应的实现。如果你使用的是React，相关的用法和概念不会有太大区别。让我们开始吧。准备工作该应用程序首先需要有一个跟踪IDtrackingID。在开始编写业务代码之前，您必须先准备一个跟踪ID。通过这个唯一标识符，GoogleAnalytics可以识别某个点击或某个页面访问来自哪个应用程序。按照以下步骤操作：访问https://analytics.google.com；提交指定信息完成注册并确保可以用于web应用，因为我们开发的是web应用；同意相关条款并生成trackingID；保存跟踪ID。有了跟踪ID后，您就可以开始编写业务代码了。添加analytics.js脚本Google已经完成了我们在插入之前需要做的所有事情，所以这是我们的工作。但是我们要做的也很简单，只需要在应用的index.html中添加如下脚本即可：现在让我们看看GoogleAnalytics是如何初始化的应用程序。创建一个跟踪器首先创建一个应用程序跟踪器。在app.component.ts中执行以下两步：声明一个名为ga的全局变量，类型为any（需要在Typescript中指定变量类型）；将以下代码行添加到ngInInit()。ga('create',<您的跟踪ID>,'auto');这已在应用程序中成功初始化了一个GoogleAnalytics跟踪器。由于跟踪器的初始化是在OnInit()函数中执行的，因此只要应用程序启动，跟踪器就会启动。在单页应用中记录页面访问，我们需要实现的是记录route-visits。如何记录用户对应用不同部分的访问是一个难点。从功能上来说，单页应用中的路由对应传统多页应用中页面间的跳转，所以我们需要记录访问路由。做到这一点并非微不足道，但它仍然是可以实现的。将以下代码片段添加到app.component.ts的ngOnInit()函数中：import{Router,NavigationEnd}from'@angular/router';...constructor(publicrouter:Router){}...this.router。events.subscribe(event=>{if(eventinstanceofNavigationEnd){ga('set','page',event.urlAfterRedirects);ga('send',{hitType:'pageview',hitCallback:()=>{this.pageViewSent=true;}});}});令人惊奇的是，只需要几行代码就可以实现Angular应用中记录页面访问的功能。这段代码实际上做了以下事情：从AngularRouter中导入Router和NavigationEnd；通过构造函数将Router添加到组件中；然后订阅路由事件，即AngularRouter发送的所有事件；只要创建了一个NavigationEnd事件实例，路线和目的地就被记录为一次页面访问。这样，无论何时使用页面路由，页面访问记录都会发送到GoogleAnalytics，可以在GoogleAnalytics在线控制台中看到。同样，我们可以用同样的方法来记录页面访问以外的活动，比如某个界面的浏览次数或时长等等。只要像上面的代码一样使用hitCallBack()，就可以让应用程序在有数据需要采集的时候做出响应。我们这里所做的只是将一个变量的值设置为true，但实际上hitCallBack()可以执行任何代码。跟踪用户交互除了页面访问，GoogleAnalytics通常用于跟踪用户交互，例如按钮的点击。“提交按钮被用户点击了多少次？”，“产品说明书是否经常被审核？”这些是Web应用程序产品审查会议中的常见问题。本节我们将介绍如何实现这些数据的统计。按钮点击想象一个场景，需要统计应用中某个按钮或链接被点击的次数，这是一个与注册等关键动作关系最密切的数据指标。举个例子：假设应用中有一个“Interested”按钮，用来显示即将进行的活动，你想通过统计这个按钮被点击的次数来估计有多少用户对此感兴趣。那么我们可以使用下面的代码来实现这个功能：...params={eventCategory:'Button',eventAction:'Click',eventLabel:'Showinterest',eventValue:1};showInterest(){ga('send','event',this.params);}...现在让我们看看这段代码实际做了什么。如前所述，当我们向GoogleAnalytics发送数据时，GoogleAnalytics会对其进行记录。所以我们可以给send()方法传递不同的参数来区分不同的事件，比如两个不同按钮的点击记录。1.首先我们定义一个params对象，它包含以下字段：eventCategory——发生交互的对象，对应一个按钮（button）eventAction——发生交互的类型，对应一次点击eventLabel——交互动作的标识，对应按钮的内容，即“interested”eventValue——与发生的每个事件实例关联的值由于本??例是统计点击“interested”按钮的用户数，所以我们将eventValue的值设置为1。2.对象构造完成后，下一步就是将params对象作为请求payload发送给GoogleAnalytics，这一步是通过事件绑定将showInterest()绑定到按钮上来实现的。这也是使用GoogleAnalytics进行跟踪时最常用的发送事件的方法。此时，GoogleAnalytics可以通过记录按钮点击次数来统计感兴趣的用户数。跟踪社交活动GoogleAnalytics还可以通过该应用程序跟踪用户在社交媒体上的互动。一种这样的情况是在您的应用程序中放置一个类似Facebook的点赞按钮，所以让我们看看如何使用GoogleAnalytics跟踪此行为。...fbLikeParams={socialNetwork:'Facebook',socialAction:'Like',socialTarget:'https://facebook.com/mypage'};...fbLike(){ga('send','social',this.fbLikeParams);}如果您觉得这段代码很眼熟，那是因为它实际上与上面计算“感兴趣”按钮点击次数的代码非常相似。下面继续看每一步的内容：1.构造要发送的数据负载，包括以下字段：socialNetwork–发生交互的社交媒体，如Facebook、Twitter等socialAction–发生的交互，例如点赞、发推文、分享等。socialTarget–交互的目标URL，通常是社交媒体帐户的主页2.下一步是添加一个功能来发送整个交互记录。与统计按钮点击次数相比，这里send()的使用方式有所不同。另外，我们还需要将这个函数绑定到已有的点赞按钮上。在跟踪用户交互方面，GoogleAnalytics可以做更多的事情，其中??最重要的一项是跟踪异常，它允许我们通过GoogleAnalytics跟踪应用程序中发生的错误和异常。本文不赘述，鼓励读者自行探索。用户识别隐私是一种权利，而不是一种奢侈。GoogleAnalytics除了记录很多用户的操作和交互之外，还会在这一部分引入一个不太常见的功能，那就是控制用户的身份是否被跟踪。.CookiesGoogleAnalytics跟踪用户活动的方式是基于Cookies的，所以我们可以自定义Cookies的名称和一些其他内容，请看下面的代码：trackingID='UA-139883813-1';cookieParams={cookieName:'myGACookie',cookieDomain:window.location.hostname,cookieExpires:604800};...ngOnInit(){ga('create',this.trackingID,this.cookieParams);...}在上面的代码中，我们设置了name,domain以及GoogleAnalyticscookie的过期时间，这使我们能够区分来自不同网站或网络应用程序的cookie。因此，我们需要为我们自己的应用程序的GoogleAnalytics跟踪器cookie设置自定义ID1，而不是自动生成的随机ID。IP匿名化在某些场景下，我们可能不需要知道应用的流量来自哪里。例如，对于按钮点击跟踪器，我们只需要关心按钮的点击次数，而不是点击器的位置。在这种场景下，GoogleAnalytics允许我们在不获取用户IP地址的情况下，只跟踪用户的操作行为。ipParams={anonymizeIp:true};...ngOnInit(){...ga('set',this.ipParams);...}在上面的代码中，我们将GoogleAnalytics跟踪器的abibymizeIp参数设置为true。这样，用户的IP地址就不会被GoogleAnalytics跟踪，从而让用户知道他们的隐私受到保护。不被跟踪有时用户可能不希望他们的行为被跟踪，而GoogleAnalytics也允许这样的需求。因此，还可以选择不跟踪用户。...optOut(){window['ga-disable-UA-139883813-1']=true;}...optOut()是一个自定义函数，可以在页面中禁用GoogleAnalytics跟踪，我们可以使用这个功能在按钮或复选框上绑定事件，以便用户可以选择是否由GoogleAnalytics跟踪。在本文中，我们讨论了将GoogleAnalytics集成到单页应用程序中的痛点，并探索了相关的解决方案。我们还学习了如何在单页应用程序中跟踪页面访问和用户交互，例如按钮点击、社交媒体活动等。最后我们还了解到，GoogleAnalytics为用户提供了隐私保护功能，尤其是当用户的一些隐私数据不需要参与统计时。用户还可以选择完全不被GoogleAnalytics跟踪。除此之外，GoogleAnalytics还能做很多其他的事情，这需要我们继续去探索。
