Google Analytics 的一些用法介绍

神奇的是,仅需这么几行代码,就达成了Angular应用中记录页面访问状况的功能。

在追踪用户交互方面,GoogleAnalytics还可以做更多的事情,其中非常重要的一种是针对异常的追踪,这让大家可以通过GoogleAnalytics来追踪应用程序中出现的错误和异常。在本文中大家就不赘述这一点了,但大家鼓励读者自行探索。

用户辨别

隐私是一项权利,而不是奢侈品

还有的时候用户可能不期望我们的行为遭到追踪,而GoogleAnalytics也允许如此的需要。因此也存在让用户不被追踪的选项。

... optOut(){ window['ga-disable-UA-139883813-1']=true; } ...

类似地,大家可以用相同的方法来记录除去页面访问以外的活动,比如某个界面的查询次数或者时长等等。只须像上面的代码那样用hitCallBack()就可以在有需要采集的数据的时候让应用程序作出反应,这里大家做的事情只是把一个变量的值设为true,但事实上hitCallBack()中可以实行任何代码。

追踪用户交互活动

怎么样记录用户在一个应用中不同部分的访问,这是一个难题。从功能上来看,单页应用中的路由对应了传统多页面应用中各个页面之间的跳转,因此大家需要记录访问路由。要做到这一点尽管不算容易,但仍然是可以达成的。在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;}}); } } );

作者:AshwinSathian选题:lujun9972译者:HankChow校对:wxy

--AshwinSathian

本文由LCTT原创编译,linux中国荣誉推出

GoogleAnalytics还可以通过应用程序追踪用户在社交媒体上的互动。其中一种场景就是在应用中放置类似Facebook的点赞按钮,下面大家来看看怎么用GoogleAnalytics来追踪这一行为。

... fbLikeParams={ socialNetwork: 'Facebook', socialAction: 'Like', socialTarget: 'https://facebook.com/mypage' }; ... fbLike(){ ga('send','social',this.fbLikeParams); }

第一需要有一个追踪ID(trackingID)。在开始撰写业务代码之前,要先筹备好一个追踪ID,通过这个唯一的标识,GoogleAnalytics才能辨别出某个点击或者某个页面访问是源于哪一个应用。

如此,只须用到了页面路由,就会向GoogleAnalytics发送一条页面访问记录,在GoogleAnalytics的在线控制台中可以看到这部分记录。

如此就已经成功地在应用程序中初始化了一个GoogleAnalytics的追踪器了。因为追踪器的初始化是在OnInit()函数中实行的,因此每当应用程序启动,追踪器就会启动。

在单页应用中记录页面访问状况

最后,大家还获悉GoogleAnalytics为用户提供了保护隐私的功能,特别是用户的一些隐私数据并无需参与到统计当中的时候。而用户也可以选择完全不遭到GoogleAnalytics的追踪。除此以外,GoogleAnalytics还可以做到不少其它的事情,这就需要大家继续不断探索了。

目前看下这段代码事实上做了哪些。正如前面说到,当大家向GoogleAnalytics发送数据的时候,GoogleAnalytics就会记录下来。因此大家可以向send()办法传递不一样的参数,以区别不一样的事件,比如两个不同按钮的点击记录。

1、架构发送的数据负载,其中包括以下字段:

socialNetwork–交互发生的社交媒体,比如Facebook、Twitter等等 socialAction–发生的交互种类,比如点赞、发表推文、推荐等等 socialTarget–交互的目的URL,通常是社交媒体账号的主页

追踪ID拿到了,就可以开始撰写业务代码了。

添加analytics.js脚本

一般来讲,有不少的办法可以解决这个问题,在这里大家只讨论其中的一种办法。下面我会用Angular来写出对应的达成,假如你用的是React,有关的使用方法和定义也不会有太大的差别。下面就开始吧。

筹备好应用程序

2、对象架构完成之后,下一步就是将params对象作为请求负载发送到GoogleAnalytics,而这一步是通过事件绑定将showInterest()绑定在按钮上达成的。这也是用GoogleAnalytics追踪中最常见的发送事件办法。

GoogleAnalytics除去可以记录不少用户的操作和交互活动以外,这一节还将介绍一个不太容易见到的功能,就是可以控制是不是对用户的身份进行追踪。

Cookies

因为这个例子中是要统计点击了“有兴趣”按钮的用户数,因此大家把eventValue的值定为1。

via:https://opensourceforu.com/2019/10/all-that-you-can-do-with-谷歌-analytics-and-more/

第一创建一个应用程序的追踪器。在App.component.ts中实行以下两个步骤:

声明一个名为ga,种类为any的全局变量; 将下面一行代码加入到ngInInit()中。 ga('create',<你的追踪ID>,'auto');

这篇文章来源于如此一个问题:怎么样对单页应用中的页面访问进行跟踪?

这段代码事实上做了以下几件事情:

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

假设应用程序中有一个“有兴趣”按钮,用于显示马上推出的活动,你期望通过统计这个按钮被点击的次数来推断有多少用户对此有兴趣。那样大家可以用以下的代码来达成这个功能:

... params={ eventCategory: 'Button' , eventAction: 'Click' , eventLabel: 'Showinterest' , eventValue: 1 }; showInterest(){ ga('send','event',this.params); } ...

2、下一步是增加一个函数来发送整个交互记录。和统计按钮点击数目时相比,这里用send()的方法有所不同。另外,大家还需要把这个函数绑定到已有些点赞按钮上。

至此,GoogleAnalytics就可以通过记录按钮的点击次数来统计有兴趣的用户数了。

追踪社交活动

这篇文章来源于如此一个问题:怎么样对单页应用中的页面访问进行跟踪?

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*newDate();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.谷歌-analytics.com/analytics.js','ga'); </script>

假如你感觉这段代码似曾相识,那是由于它确实跟上面统计“有兴趣”按钮点击次数的代码很相似。下面大家继续看其中每一步的内容:

目前大家来看一下GoogleAnalytics是怎么样在应用程序中初始化的。

创建追踪器

除去页面访问记录以外,GoogleAnalytics还常常被用于追踪用户的交互活动,比如某个按钮的点击状况。“提交按钮被用户点击了多少次?”,“商品手册会被常常查阅吗?”这部分都是Web应用程序的商品评审会议上的容易见到问题。这一节大家将会介绍怎么样达成这部分数据的统计。

按钮点击

大家需要达成的是记录访问路由(route-visits)。

在某些场景下,大家可能无需知晓应用程序的流量来自哪儿。比如对于一个按钮点击的追踪器,大家仅需关心按钮的点击量,而无需关心点击者的地点。在这种场景下,GoogleAnalytics允许大家只追踪用户的操作行为,而不获得到用户的IP地址。

ipParams={ anonymizeIp:true }; ... ngOnInit(){ ... ga('set',this.ipParams); ... }

在本文中,大家讨论了GoogleAnalytics集成到单页应用时的难题,并探索出了一种有关的解决方案。大家还获悉了怎么样在单页应用中追踪页面访问和用户交互,比如按钮点击、社交媒体活动等。

在上面这段代码中,大家将GoogleAnalytics追踪器的abibymizeIp参数设置为true。如此用户的IP地址就不会被GoogleAnalytics所追踪,这可以让用户知晓我们的隐私正在被保护。

不被跟踪

optOut()是一个自概念函数,它可以禁用页面中的GoogleAnalytics追踪,大家可以用按钮或复选框上得事件绑定来用这一个功能,如此用户就可以选择会不会被GoogleAnalytics追踪。

根据以下的步骤:

访问https://analytics.谷歌.com; 提交指定信息以完成注册,并确保可用于Web应用,由于大家要开发的正是一个Web应用; 赞同有关的条约,生成一个追踪ID; 保存好追踪ID。

在上面这段代码中,大家设置了GoogleAnalyticsCookies的名字、域与过期时间,这就让大家可以将不同网站或Web应用的Cookies区别开来。因此大家需要为大家我们的应用程序的GoogleAnalytics追踪器的Cookies设置一个自概念的标识1,而不是一个自动生成的随机标识。

IP匿名

GoogleAnalytics这个最火爆的用户活动追踪工具大家多少都听说过甚至用过,但它的作用并不只限于对页面访问的追踪。作为一个既实用又时尚的工具,它已经遭到了广泛的欢迎,因此大家将要在下文中介绍怎么样在各种Angular和React单页应用中用GoogleAnalytics。

1、第一大家概念了一个params对象,这个对象包含了以下几个字段:

eventCategory–交互发生的对象,这里对应的是按钮 eventAction–发生的交互的种类,这里对应的是点击 eventLabel–交互动作的标识,这里对应的是这个按钮的内容,也就是“有兴趣” eventValue–与每一个发生的事件实例有关联的值

设想如此一种场景,需要统计到应用程序中某个按钮或链接被点击的次数,这是一个和注册之类的重要动作关系最密切的数据指标。下面大家来举一个例子:

GoogleAnalytics追踪用户活动的方法是基于Cookies的,因此大家可以自概念Cookies的名字与一些其它的内容,请看下面这段代码:

trackingID= 'UA-139883813-1' ; cookieParams={ cookieName:'myGACookie', cookieDomain:window.location.hostname, cookieExpires:604800 }; ... ngOnInit(){ ga('create',this.trackingID,this.cookieParams); ... }