mirror of
https://github.com/LCTT/TranslateProject.git
synced 2025-01-25 23:11:02 +08:00
Xingyu.Wang
GitHub
commit
02f9ae90ea
@ -1,242 +0,0 @@
|
||||
[#]: collector: (lujun9972)
|
||||
[#]: translator: (HankChow)
|
||||
[#]: reviewer: ( )
|
||||
[#]: publisher: ( )
|
||||
[#]: url: ( )
|
||||
[#]: subject: (All That You Can Do with Google Analytics, and More)
|
||||
[#]: via: (https://opensourceforu.com/2019/10/all-that-you-can-do-with-google-analytics-and-more/)
|
||||
[#]: author: (Ashwin Sathian https://opensourceforu.com/author/ashwin-sathian/)
|
||||
|
||||
All That You Can Do with Google Analytics, and More
|
||||
======
|
||||
|
||||
[![][1]][2]
|
||||
|
||||
*We have all heard about or used Google Analytics (GA) – the most popular tool to track user activity such as, but not limited to, page visits. Its utility and popularity means that everybody wishes to use it. This article focuses on how to use it correctly in a world where single page Angular and React applications are becoming more popular by the day. *
|
||||
|
||||
A pertinent question is how does one track page visits in applications that have just one page?
|
||||
As always, there are ways around this and we will look at one such option in this article. While we will do the implementation in an Angular application, the usage and concepts aren’t very different if the app is in React. So, let’s get started!
|
||||
|
||||
**Getting the application ready**
|
||||
Getting a tracking ID: Before we write actual code, we need to get a tracking ID, the unique identifier that tells Google Analytics that data like a click or a page view is coming from a particular application.
|
||||
|
||||
To get this, we do the following:
|
||||
|
||||
1. Go to _<https://analytics.google.com>_.
|
||||
2. Sign up by entering the required details. Make sure the registration is for the Web – ours is a Web application, after all.
|
||||
3. Agree to the _Terms and Conditions_, and generate your tracking ID.
|
||||
4. Copy the ID, which will perhaps look something like ‘UA-ID-Y’.
|
||||
|
||||
|
||||
|
||||
Now that the ID is ready, let’s write some code.
|
||||
|
||||
**Adding _analytics.js_ script**
|
||||
While the team at Google has done all the hard work to get the Google Analytics tools ready for us to use, this is where we do our part – make it available to the application. This is simple – all that’s to be done is to add the following script to your application’s _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=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,’script’,’https://www.google-analytics.com/analytics.js’,’ga’);
|
||||
</script>
|
||||
```
|
||||
|
||||
With that out of the way, let’s see how we can initialise Google Analytics in the application.
|
||||
|
||||
**Creating the tracker**
|
||||
Let’s now set up the tracker for the application. For this, _open app.component.ts_ and perform the following steps:
|
||||
|
||||
1. Declare a global variable named ga, of type _any_ (remember, this is Typescript and you need to mention types).
|
||||
2. Insert the following line of code into _ngOnInit()_ of your component.
|
||||
|
||||
|
||||
|
||||
```
|
||||
ga(‘create’, YOUR_TRACKING_ID, ‘auto’);
|
||||
```
|
||||
|
||||
Congratulations! You have now successfully initiated a Google Analytics tracker in your application. Since the tracker initiation is made inside the _OnInit_ function, the tracker will get activated every time the application starts up.
|
||||
|
||||
**Recording page visits in the single page application**
|
||||
What we need to do is record route-visits.
|
||||
|
||||
Now comes the tricky bit – tracking the parts of your application visited by users. From a functional aspect, we know that routes are stand-ins for traditional pages in modern single page Web applications. It means we need to record route-visits. This is not easy, but we can still achieve this.
|
||||
In the _ngOnInit()_ function inside _app.component.ts_, add the following code snippet:
|
||||
|
||||
```
|
||||
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; }
|
||||
});
|
||||
}
|
||||
} );
|
||||
```
|
||||
|
||||
Believe it or not, those few lines of code have taken care of the ‘pageview’ recording issue in the Angular application.
|
||||
|
||||
Despite only a few lines of code, a fair bit is happening here:
|
||||
|
||||
1. Import Router and NavigationEnd from Angular Router.
|
||||
2. Add Router to the component through its constructor.
|
||||
3. Next, subscribe to router events; i.e., all events emitted by the Angular Router.
|
||||
4. Whenever there is an instance of a NavigationEnd event (emitted whenever the application navigates to a route), we set that destination/ route as a page and this sends a pageview.
|
||||
|
||||
|
||||
|
||||
Now, every time a routing occurs, a pageview is sent to Google Analytics. You can view this in the online Google Analytics dashboard.
|
||||
|
||||
Like pageviews, we can record a lot of other activities like screenview, timing, etc, using the same syntax. We can set the program to react in any way we want to for all such send activities, through the _hitCallback()_, as shown in the code snippet. Here we are setting a variable value to true, but any piece of code can be executed in _hitCallback_.
|
||||
|
||||
**Tracking user interactions**
|
||||
After pageviews, the most commonly tracked activities on Google Analytics are user interactions such as, but not limited to, button clicks. ‘How many times was the _Submit_ button clicked?’, ‘How often is the product brochure viewed?’ These are questions that are often asked in product review meetings for Web applications. In this section, we’ll look at this implementation using Google Analytics in the application.
|
||||
|
||||
**Button clicks:** Consider a case for which you wish to track the number of times a certain button/link in the application is clicked – a metric that is most associated with sign-ups, call-to-action buttons, etc. We’ll look at an example for this.
|
||||
|
||||
For this purpose, assume that you have a ‘Show Interest’ button in your application for an upcoming event. The organisers wish to keep track of how many people are interested in the event by tracking those clicking the button. The following code snippet facilitates this:
|
||||
|
||||
```
|
||||
…
|
||||
params = {
|
||||
eventCategory:
|
||||
‘Button’
|
||||
,
|
||||
eventAction:
|
||||
‘Click’
|
||||
,
|
||||
eventLabel:
|
||||
‘Show interest’
|
||||
,
|
||||
eventValue:
|
||||
1
|
||||
};
|
||||
|
||||
showInterest() {
|
||||
ga(‘send’, ‘event’, this.params);
|
||||
}
|
||||
…
|
||||
```
|
||||
|
||||
Let’s look at what is being done here. Google Analytics, as already discussed, records activities when we send the data to it. It is the parameters that we pass to this ‘send’ method that distinguish between various events like tracking clicks on two separate buttons.
|
||||
1\. First, we define a ‘params’ object that should have the following fields:
|
||||
|
||||
1. _eventCategory_ – An object with which interaction happens; in this case, a button.
|
||||
2. _eventAction_ – The type of interaction; in our case, a click.
|
||||
3. _eventLabel_ – An identifier for the interaction. In this case, we could call it Show Interest.
|
||||
4. _eventValue_ – Basically, the value you wish to associate with each instance of this event.
|
||||
|
||||
|
||||
|
||||
Since this example is measuring the number of people showing interest, we can set this value to 1.
|
||||
|
||||
2\. After constructing this object, the next part is pretty simple and one of the most commonly used methods as far as Google Analytics tracking goes – sending the event, with the ‘params’ object as a payload. We do this by using event binding on the button and attaching the _showInterest()_ button to it.
|
||||
|
||||
That’s it! Google Analytics (GA) will now track data of people expressing interest by clicking the button.
|
||||
|
||||
**Tracking social engagements:** Google Analytics also lets you track people’s interactions on social media through the application. One such case would be a Facebook-type ‘Like’ button for our brand’s page that we place in the application. Let’s look at how we can do this tracking using GA.
|
||||
|
||||
```
|
||||
…
|
||||
fbLikeParams = {
|
||||
socialNetwork:
|
||||
'Facebook',
|
||||
socialAction:
|
||||
'Like',
|
||||
socialTarget:
|
||||
'https://facebook.com/mypage'
|
||||
};
|
||||
…
|
||||
fbLike() {
|
||||
ga('send', 'social', this.fbLikeParams);
|
||||
}
|
||||
```
|
||||
|
||||
If that code looks familiar, it’s because it is very similar to the method by which we track button clicks. Let’s look at the steps:
|
||||
|
||||
1\. Construct the payload for sending data. This payload should have the following fields:
|
||||
|
||||
1. _socialNetwork_ – The network the interaction is happening with, e.g., Facebook, Twitter, etc.
|
||||
2. _socialAction_ – What sort of interaction is happening, e.g., Like, Tweet, Share, etc.
|
||||
3. _socialTarget_ – What URL is being targeted by using the interaction. This could be the URL of the social media profile/page.
|
||||
|
||||
|
||||
|
||||
2\. The next method is, of course, to add a function to report this activity. Unlike a button click, we don’t use the _send_ method here, but the social method. Also, after this function is written, we bind it to the Like button we have in place.
|
||||
|
||||
There’s more that can be done with GA as far as tracking user interactions go, one of the top items being exception tracking. This allows us to track errors and exceptions occurring in the application using GA. We won’t delve deeper into it in this article; however, the reader is encouraged to explore this.
|
||||
|
||||
**User identity**
|
||||
**Privacy is a right, not a luxury:** While Google Analytics can record a lot of activities as well as user interactions, there is one comparatively less known aspect, which we will look at in this section. There’s a lot of control we can place over tracking (and not tracking) user identity.
|
||||
**Cookies:** GA uses cookies as a means to track a user’s activity. But we can define what these cookies are named and a couple of other aspects about them, as shown in the code snippet below:
|
||||
|
||||
```
|
||||
trackingID =
|
||||
‘UA-139883813-1’
|
||||
;
|
||||
cookieParams = {
|
||||
cookieName: ‘myGACookie’,
|
||||
cookieDomain: window.location.hostname,
|
||||
cookieExpires: 604800
|
||||
};
|
||||
…
|
||||
ngOnInit() {
|
||||
ga(‘create’, this.trackingID, this.cookieParams);
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
Here, we are setting the GA cookie’s name, domain and cookie expiration date, which allows us to distinguish cookies set by our GA tracker from those set by GA trackers from other websites/Web applications. Rather than a cryptic auto-generated identity, we’ll be able to set custom identities for our application’s GA tracker cookies.
|
||||
|
||||
**IP anonymisation:** There may be cases when we do not want to know where the traffic to our application is coming from. For instance, consider a button click activity tracker – we do not necessarily need to know the geographical source of that interaction, so long as the number of hits is tracked. In such situations, GA allows us to track users’ activity without them having to reveal their IP address.
|
||||
|
||||
```
|
||||
ipParams = {
|
||||
anonymizeIp: true
|
||||
};
|
||||
…
|
||||
ngOnInit() {
|
||||
…
|
||||
ga('set', this.ipParams);
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
Here, we are setting the parameters of the GA tracker so that IP anonymisation is set to _true_. Thus, our user’s IP address will not be tracked by Google Analytics, which will give users a sense of privacy.
|
||||
|
||||
**Opt-out:** At times, users may not want their browsing data to be tracked. GA allows for this too, and hence has the option to enable users to completely opt out of GA tracking.
|
||||
|
||||
```
|
||||
...
|
||||
optOut() {
|
||||
window[‘ga-disable-UA-139883813-1’] = true;
|
||||
}
|
||||
...
|
||||
```
|
||||
|
||||
_optOut()_ is a custom function which disables GA tracking from the window. We can employ this function using event binding on a button/check box, which allows users to opt out of GA tracking.
|
||||
We have looked at what makes integrating Google Analytics into single page applications tricky and explored a way to work around this. We also saw how we can track ‘page’ views in single page applications as well as touched upon tracking users’ interactions with the application, such as button clicks, social media engagements, etc.
|
||||
|
||||
Finally, we examined opportunities offered by GA to ensure user privacy, especially when their identity isn’t critical to our application’s analytics, to the extent of allowing users to entirely opt out of Google Analytics tracking. Since there is much more that can be done, you’re encouraged to keep exploring and keep playing around with the methods offered by GA.
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
via: https://opensourceforu.com/2019/10/all-that-you-can-do-with-google-analytics-and-more/
|
||||
|
||||
作者：[Ashwin Sathian][a]
|
||||
选题：[lujun9972][b]
|
||||
译者：[译者ID](https://github.com/译者ID)
|
||||
校对：[校对者ID](https://github.com/校对者ID)
|
||||
|
||||
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
|
||||
|
||||
[a]: https://opensourceforu.com/author/ashwin-sathian/
|
||||
[b]: https://github.com/lujun9972
|
||||
[1]: https://i0.wp.com/opensourceforu.com/wp-content/uploads/2019/10/Analytics-illustration.jpg?resize=696%2C396&ssl=1 (Analytics illustration)
|
||||
[2]: https://i0.wp.com/opensourceforu.com/wp-content/uploads/2019/10/Analytics-illustration.jpg?fit=900%2C512&ssl=1
|
||||
@ -0,0 +1,243 @@
|
||||
[#]: collector: (lujun9972)
|
||||
[#]: translator: (HankChow)
|
||||
[#]: reviewer: ( )
|
||||
[#]: publisher: ( )
|
||||
[#]: url: ( )
|
||||
[#]: subject: (All That You Can Do with Google Analytics, and More)
|
||||
[#]: via: (https://opensourceforu.com/2019/10/all-that-you-can-do-with-google-analytics-and-more/)
|
||||
[#]: author: (Ashwin Sathian https://opensourceforu.com/author/ashwin-sathian/)
|
||||
|
||||
Google Analytics 的一些用法介绍
|
||||
======
|
||||
|
||||
[![][1]][2]
|
||||
|
||||
Google Analytics 这个最流行的用户活动追踪工具我们或多或少都听说过甚至使用过，但它的用途并不仅仅限于对页面访问的追踪。作为一个既实用又流行的工具，它已经受到了广泛的欢迎，因此我们将要在下文中介绍如何在各种 Angular 和 React 单页应用中使用 Google Analytics。
|
||||
|
||||
这篇文章源自这样一个问题：如何对单页应用中的页面访问进行跟踪？
|
||||
|
||||
通常来说，有很多的方法可以解决这个问题，在这里我们只讨论其中的一种方法。下面我会使用 Angular 来写出对应的实现，如果你使用的是 React，相关的用法和概念也不会有太大的差别。接下来就开始吧。
|
||||
|
||||
**准备好应用程序**
|
||||
首先需要有一个<ruby>追踪 ID<rt>tracking ID</rt></ruby>。在开始编写业务代码之前，要先准备好一个追踪 ID，通过这个唯一的标识，Google Analytics 才能识别出某个点击或者某个页面访问是来自于哪一个应用。
|
||||
|
||||
按照以下的步骤：
|
||||
|
||||
1. 访问 _<https://analytics.google.com>_；
|
||||
2. 提交指定信息以完成注册，并确保可用于 Web 应用，因为我们要开发的正是一个 Web 应用；
|
||||
3. 同意相关的条款，生成一个追踪 ID；
|
||||
4. 保存好追踪 ID。
|
||||
|
||||
|
||||
|
||||
追踪 ID 拿到了，就可以开始编写业务代码了。
|
||||
|
||||
**添加 `analytics.js` 脚本**
|
||||
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=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,’script’,’https://www.google-analytics.com/analytics.js’,’ga’);
|
||||
</script>
|
||||
```
|
||||
|
||||
现在我们来看一下 Google Analytics 是如何在应用程序中初始化的。
|
||||
|
||||
**创建追踪器**
|
||||
首先创建一个应用程序的追踪器。在 `app.component.ts` 中执行以下两个步骤：
|
||||
|
||||
1. 声明一个名为 `ga`，类型为 `any` 的全局变量（在 Typescript 中需要制定变量类型）；
|
||||
2. 将下面一行代码加入到 `ngInInit()` 中。
|
||||
|
||||
|
||||
|
||||
```
|
||||
ga(‘create’, <你的追踪 ID>, ‘auto’);
|
||||
```
|
||||
|
||||
这样就已经成功地在应用程序中初始化了一个 Google Analytics 的追踪器了。由于追踪器的初始化是在 OnInit() 函数中执行的，因此每当应用程序启动，追踪器就会启动。
|
||||
|
||||
**在单页应用中记录页面访问情况**
|
||||
我们需要实现的是记录<ruby>访问路由<rt>route-visits</rt></ruby>。
|
||||
|
||||
记录用户在一个应用中不同部分的访问，这是一个难点。从功能上来看，单页应用中的路由对应了传统多页面应用中各个页面之间的跳转，因此我们需要记录访问路由。要做到这一点尽管不算简单，但仍然是可以实现的。在 `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 应用中记录页面访问情况的功能。
|
||||
|
||||
这段代码实际上做了以下几件事情：
|
||||
|
||||
1. 从 Angular Router 中导入了 Router、NavigationEnd；
|
||||
2. 通过构造函数中将 Router 添加到组件中；
|
||||
3. 然后订阅 router 事件，也就是由 Angular Router 发出的所有事件；
|
||||
4. 只要产生了一个 NavigationEnd 事件实例，就将路由和目标作为一个页面访问进行记录。
|
||||
|
||||
|
||||
|
||||
这样，只要使用到了页面路由，就会向 Google Analytics 发送一条页面访问记录，在 Google Analytics 的在线控制台中可以看到这些记录。
|
||||
|
||||
类似地，我们可以用相同的方式来记录除了页面访问之外的活动，例如某个界面的查看次数或者时长等等。只要像上面的代码那样使用 `hitCallBack()` 就可以在有需要收集的数据的时候让应用程序作出反应，这里我们做的事情仅仅是把一个变量的值设为 `true`，但实际上 `hitCallBack()` 中可以执行任何代码。
|
||||
|
||||
**追踪用户交互活动**
|
||||
除了页面访问记录之外，Google Analytics 还经常被用于追踪用户的交互活动，例如某个按钮的点击情况。“提交按钮被用户点击了多少次？”“产品手册会被经常查阅吗？”这些都是 Web 应用程序的产品评审会议上的常见问题。这一节我们将会介绍如何实现这些数据的统计。
|
||||
|
||||
**按钮点击：** 设想这样一种场景，需要统计到应用程序中某个按钮或链接被点击的次数，这是一个和注册之类的关键动作关系最密切的数据指标。下面我们来举一个例子：
|
||||
|
||||
假设应用程序中有一个“感兴趣”按钮，用于显示即将推出的活动，你希望通过统计这个按钮被点击的次数来推测有多少用户对此感兴趣。那么我们可以使用以下的代码来实现这个功能：
|
||||
|
||||
```
|
||||
…
|
||||
params = {
|
||||
eventCategory:
|
||||
‘Button’
|
||||
,
|
||||
eventAction:
|
||||
‘Click’
|
||||
,
|
||||
eventLabel:
|
||||
‘Show interest’
|
||||
,
|
||||
eventValue:
|
||||
1
|
||||
};
|
||||
|
||||
showInterest() {
|
||||
ga(‘send’, ‘event’, this.params);
|
||||
}
|
||||
…
|
||||
```
|
||||
|
||||
现在看下这段代码实际上做了什么。正如前面说到，当我们向 Google Analytics 发送数据的时候，Google Analytics 就会记录下来。因此我们可以向 `send()` 方法传递不同的参数，以区分不同的事件，例如两个不同按钮的点击记录。
|
||||
1\. 首先我们定义了一个 `params` 对象，这个对象包含了以下几个字段：
|
||||
|
||||
1. `eventCategory` – 交互发生的对象，这里对应的是按钮（button）
|
||||
2. `eventAction` – 发生的交互的类型，这里对应的是点击（click）
|
||||
3. `eventLabel` – 交互动作的标识，这里对应的是这个按钮的内容，也就是“感兴趣”
|
||||
4. `eventValue` – 与每个发生的事件实例相关联的值
|
||||
|
||||
|
||||
|
||||
由于这个例子中是要统计点击了“感兴趣”按钮的用户数，因此我们把 `eventValue` 的值定为 1。
|
||||
|
||||
2\. 对象构造完成之后，下一步就是将 `params` 对象作为请求负载发送到 Google Analytics，而这一步是通过事件绑定将 `showInterest()` 绑定在按钮上实现的。这也是使用 Google Analytics 追踪中最常用的发送事件方法。
|
||||
|
||||
至此，Google Analytics 就可以通过记录按钮的点击次数来统计感兴趣的用户数了。
|
||||
|
||||
**追踪社交活动：** Google Analytics 还可以通过应用程序追踪用户在社交媒体上的互动。其中一种场景就是在应用中放置类似 Facebook 的点赞按钮，下面我们来看看如何使用 Google Analytics 来追踪这一行为。
|
||||
|
||||
```
|
||||
…
|
||||
fbLikeParams = {
|
||||
socialNetwork:
|
||||
'Facebook',
|
||||
socialAction:
|
||||
'Like',
|
||||
socialTarget:
|
||||
'https://facebook.com/mypage'
|
||||
};
|
||||
…
|
||||
fbLike() {
|
||||
ga('send', 'social', this.fbLikeParams);
|
||||
}
|
||||
```
|
||||
|
||||
如果你觉得这段代码似曾相识，那是因为它确实跟上面统计“感兴趣”按钮点击次数的代码非常相似。下面我们继续看其中每一步的内容：
|
||||
|
||||
1\. 构造发送的数据负载，其中包括以下字段：
|
||||
|
||||
1. `socialNetwork` – 交互发生的社交媒体，例如 Facebook、Twitter 等等
|
||||
2. `socialAction` – 发生的交互类型，例如点赞、发表推文、分享等等
|
||||
3. `socialTarget` – 交互的目标 URL，一般是社交媒体账号的主页
|
||||
|
||||
|
||||
|
||||
2\. 下一步是增加一个函数来发送整个交互记录。和统计按钮点击数量时相比，这里使用 `send()` 的方式有所不同。另外，我们还需要把这个函数绑定到已有的点赞按钮上。
|
||||
|
||||
在追踪用户交互方面，Google Analytics 还可以做更多的事情，其中最重要的一种是针对异常的追踪，这让我们可以通过 Google Analytics 来追踪应用程序中出现的错误和异常。在本文中我们就不赘述这一点了，但我们鼓励读者自行探索。
|
||||
|
||||
**用户识别**
|
||||
**隐私是一项权利，而不是奢侈品：** Google Analytics 除了可以记录很多用户的操作和交互活动之外，这一节还将介绍一个不太常见的功能，就是可以控制是否对用户的身份进行追踪。
|
||||
**Cookies：** Google Analytics 追踪用户活动的方式是基于 Cookies 的，因此我们可以自定义 Cookies 的名称以及一些其它的内容，请看下面这段代码：
|
||||
|
||||
```
|
||||
trackingID =
|
||||
‘UA-139883813-1’
|
||||
;
|
||||
cookieParams = {
|
||||
cookieName: ‘myGACookie’,
|
||||
cookieDomain: window.location.hostname,
|
||||
cookieExpires: 604800
|
||||
};
|
||||
…
|
||||
ngOnInit() {
|
||||
ga(‘create’, this.trackingID, this.cookieParams);
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
在上面这段代码中，我们设置了 Google Analytics Cookies 的名称、域以及过期时间，这就让我们能够将不同网站或 Web 应用的 Cookies 区分开来。因此我们需要为我们自己的应用程序的 Google Analytics 追踪器的 Cookies 设置一个自定义的标识1，而不是一个自动生成的随机标识。
|
||||
|
||||
**IP 匿名：** 在某些场景下，我们可能不需要知道应用程序的流量来自哪里。例如对于一个按钮点击的追踪器，我们只需要关心按钮的点击量，而不需要关心点击者的地理位置。在这种场景下，Google Analytics 允许我们只追踪用户的操作行为，而不获取到用户的 IP 地址。
|
||||
|
||||
```
|
||||
ipParams = {
|
||||
anonymizeIp: true
|
||||
};
|
||||
…
|
||||
ngOnInit() {
|
||||
…
|
||||
ga('set', this.ipParams);
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
在上面这段代码中，我们将 Google Analytics 追踪器的 `abibymizeIp` 参数设置为 `true`。这样用户的 IP 地址就不会被 Google Analytics 所追踪，这可以让用户知道自己的隐私正在被保护。
|
||||
|
||||
**不被跟踪：** 还有些时候用户可能不希望自己的行为受到追踪，而 Google Analytics 也允许这样的需求。因此也存在让用户不被追踪的选项。
|
||||
|
||||
```
|
||||
...
|
||||
optOut() {
|
||||
window[‘ga-disable-UA-139883813-1’] = true;
|
||||
}
|
||||
...
|
||||
```
|
||||
|
||||
`optOut()` 是一个自定义函数，它可以禁用页面中的 Google Analytics 追踪，我们可以使用按钮或复选框上得事件绑定来使用这一个功能，这样用户就可以选择是否会被 Google Analytics 追踪。
|
||||
|
||||
在本文中，我们讨论了 Google Analytics 集成到单页应用时的难点，并探索出了一种相关的解决方法。我们还了解到了如何在单页应用中追踪页面访问和用户交互，例如按钮点击、社交媒体活动等。
|
||||
|
||||
最后，我们还了解到 Google Analytics 为用户提供了保护隐私的功能，尤其是用户的一些隐私数据并不需要参与到统计当中的时候。而用户也可以选择完全不受到 Google Analytics 的追踪。除此以外，Google Analytics 还可以做到很多其它的事情，这就需要我们继续不断探索了。
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
via: https://opensourceforu.com/2019/10/all-that-you-can-do-with-google-analytics-and-more/
|
||||
|
||||
作者：[Ashwin Sathian][a]
|
||||
选题：[lujun9972][b]
|
||||
译者：[HankChow](https://github.com/HankChow)
|
||||
校对：[校对者ID](https://github.com/校对者ID)
|
||||
|
||||
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
|
||||
|
||||
[a]: https://opensourceforu.com/author/ashwin-sathian/
|
||||
[b]: https://github.com/lujun9972
|
||||
[1]: https://i0.wp.com/opensourceforu.com/wp-content/uploads/2019/10/Analytics-illustration.jpg?resize=696%2C396&ssl=1 (Analytics illustration)
|
||||
[2]: https://i0.wp.com/opensourceforu.com/wp-content/uploads/2019/10/Analytics-illustration.jpg?fit=900%2C512&ssl=1
|
||||
Loading…
Reference in New Issue
Block a user