Merge remote-tracking branch 'LCTT/master'

This commit is contained in:
Xingyu Wang 2019-10-14 22:11:35 +08:00
commit cfccbe10f5
2 changed files with 120 additions and 126 deletions

View File

@ -1,8 +1,8 @@
[#]: collector: (lujun9972)
[#]: translator: (HankChow)
[#]: reviewer: ( )
[#]: publisher: ( )
[#]: url: ( )
[#]: reviewer: (wxy)
[#]: publisher: (wxy)
[#]: url: (https://linux.cn/article-11460-1.html)
[#]: 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/)
@ -10,212 +10,222 @@
Google Analytics 的一些用法介绍
======
[![][1]][2]
![][1]
Google Analytics 这个最流行的用户活动追踪工具我们或多或少都听说过甚至使用过,但它的用途并不仅仅限于对页面访问的追踪。作为一个既实用又流行的工具,它已经受到了广泛的欢迎,因此我们将要在下文中介绍如何在各种 Angular 和 React 单页应用中使用 Google Analytics。
Google Analytics GA这个最流行的用户活动追踪工具我们或多或少都听说过甚至使用过,但它的用途并不仅仅限于对页面访问的追踪。作为一个既实用又流行的工具,它已经受到了广泛的欢迎,因此我们将要在下文中介绍如何在各种 Angular 和 React 单页应用中使用 Google Analytics。
这篇文章源自这样一个问题:如何对单页应用中的页面访问进行跟踪?
通常来说,有很多的方法可以解决这个问题,在这里我们只讨论其中的一种方法。下面我会使用 Angular 来写出对应的实现,如果你使用的是 React相关的用法和概念也不会有太大的差别。接下来就开始吧。
**准备好应用程序**
### 准备好应用程序
首先需要有一个<ruby>追踪 ID<rt>tracking ID</rt></ruby>。在开始编写业务代码之前,要先准备好一个追踪 ID通过这个唯一的标识Google Analytics 才能识别出某个点击或者某个页面访问是来自于哪一个应用。
按照以下的步骤:
1. 访问 _<https://analytics.google.com>_
1. 访问 <https://analytics.google.com>
2. 提交指定信息以完成注册,并确保可用于 Web 应用,因为我们要开发的正是一个 Web 应用;
3. 同意相关的条款,生成一个追踪 ID
4. 保存好追踪 ID。
追踪 ID 拿到了,就可以开始编写业务代码了。
**添加 `analytics.js` 脚本**
### 添加 analytics.js 脚本
Google 已经帮我们做好了接入之前需要做的所有事情,接下来就是我们的工作了。不过我们要做的也很简单,只需要把下面这段脚本添加到应用的 `index.html` 里,就可以了:
```
<script>
(function(i,s,o,g,r,a,m){i[GoogleAnalyticsObject]=r;i[r]=i[r]||function(){
(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);
})(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);
ga('create', <你的追踪 ID>, 'auto');
```
这样就已经成功地在应用程序中初始化了一个 Google Analytics 的追踪器了。由于追踪器的初始化是在 OnInit() 函数中执行的,因此每当应用程序启动,追踪器就会启动。
这样就已经成功地在应用程序中初始化了一个 Google Analytics 的追踪器了。由于追踪器的初始化是在 `OnInit()` 函数中执行的,因此每当应用程序启动,追踪器就会启动。
### 在单页应用中记录页面访问情况
**在单页应用中记录页面访问情况**
我们需要实现的是记录<ruby>访问路由<rt>route-visits</rt></ruby>
记录用户在一个应用中不同部分的访问,这是一个难点。从功能上来看,单页应用中的路由对应了传统多页面应用中各个页面之间的跳转,因此我们需要记录访问路由。要做到这一点尽管不算简单,但仍然是可以实现的。在 `app.component.ts``ngOnInit()` 函数中添加以下的代码片段:
如何记录用户在一个应用中不同部分的访问,这是一个难点。从功能上来看,单页应用中的路由对应了传统多页面应用中各个页面之间的跳转,因此我们需要记录访问路由。要做到这一点尽管不算简单,但仍然是可以实现的。在 `app.component.ts``ngOnInit()` 函数中添加以下的代码片段:
```
import { Router, NavigationEnd } from @angular/router;
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; }
});
}
} );
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 事件实例,就将路由和目标作为一个页面访问进行记录。
1. 从 Angular Router 中导入了 `Router`、`NavigationEnd`
2. 通过构造函数中将 `Router` 添加到组件中;
3. 然后订阅 `router` 事件,也就是由 Angular Router 发出的所有事件;
4. 只要产生了一个 `NavigationEnd` 事件实例,就将路由和目标作为一个页面访问进行记录。
这样,只要使用到了页面路由,就会向 Google Analytics 发送一条页面访问记录,在 Google Analytics 的在线控制台中可以看到这些记录。
类似地,我们可以用相同的方式来记录除了页面访问之外的活动,例如某个界面的查看次数或者时长等等。只要像上面的代码那样使用 `hitCallBack()` 就可以在有需要收集的数据的时候让应用程序作出反应,这里我们做的事情仅仅是把一个变量的值设为 `true`,但实际上 `hitCallBack()` 中可以执行任何代码。
**追踪用户交互活动**
除了页面访问记录之外Google Analytics 还经常被用于追踪用户的交互活动,例如某个按钮的点击情况。“提交按钮被用户点击了多少次?”“产品手册会被经常查阅吗?”这些都是 Web 应用程序的产品评审会议上的常见问题。这一节我们将会介绍如何实现这些数据的统计。
### 追踪用户交互活动
**按钮点击:** 设想这样一种场景,需要统计到应用程序中某个按钮或链接被点击的次数,这是一个和注册之类的关键动作关系最密切的数据指标。下面我们来举一个例子:
除了页面访问记录之外Google Analytics 还经常被用于追踪用户的交互活动,例如某个按钮的点击情况。“提交按钮被用户点击了多少次?”,“产品手册会被经常查阅吗?”这些都是 Web 应用程序的产品评审会议上的常见问题。这一节我们将会介绍如何实现这些数据的统计。
#### 按钮点击
设想这样一种场景,需要统计到应用程序中某个按钮或链接被点击的次数,这是一个和注册之类的关键动作关系最密切的数据指标。下面我们来举一个例子:
假设应用程序中有一个“感兴趣”按钮,用于显示即将推出的活动,你希望通过统计这个按钮被点击的次数来推测有多少用户对此感兴趣。那么我们可以使用以下的代码来实现这个功能:
```
...
params = {
eventCategory:
Button
,
eventAction:
Click
,
eventLabel:
Show interest
,
eventValue:
1
eventCategory:
'Button'
,
eventAction:
'Click'
,
eventLabel:
'Show interest'
,
eventValue:
1
};
showInterest() {
ga(send, event, this.params);
ga('send', 'event', this.params);
}
...
```
现在看下这段代码实际上做了什么。正如前面说到,当我们向 Google Analytics 发送数据的时候Google Analytics 就会记录下来。因此我们可以向 `send()` 方法传递不同的参数,以区分不同的事件,例如两个不同按钮的点击记录。
1\. 首先我们定义了一个 `params` 对象,这个对象包含了以下几个字段:
1、首先我们定义了一个 `params` 对象,这个对象包含了以下几个字段:
1. `eventCategory` 交互发生的对象这里对应的是按钮button
2. `eventAction` 发生的交互的类型这里对应的是点击click
3. `eventLabel` 交互动作的标识,这里对应的是这个按钮的内容,也就是“感兴趣”
4. `eventValue` 与每个发生的事件实例相关联的值
由于这个例子中是要统计点击了“感兴趣”按钮的用户数,因此我们把 `eventValue` 的值定为 1。
2\. 对象构造完成之后,下一步就是将 `params` 对象作为请求负载发送到 Google Analytics而这一步是通过事件绑定将 `showInterest()` 绑定在按钮上实现的。这也是使用 Google Analytics 追踪中最常用的发送事件方法。
2对象构造完成之后,下一步就是将 `params` 对象作为请求负载发送到 Google Analytics而这一步是通过事件绑定将 `showInterest()` 绑定在按钮上实现的。这也是使用 Google Analytics 追踪中最常用的发送事件方法。
至此Google Analytics 就可以通过记录按钮的点击次数来统计感兴趣的用户数了。
**追踪社交活动:** Google Analytics 还可以通过应用程序追踪用户在社交媒体上的互动。其中一种场景就是在应用中放置类似 Facebook 的点赞按钮,下面我们来看看如何使用 Google Analytics 来追踪这一行为。
#### 追踪社交活动
Google Analytics 还可以通过应用程序追踪用户在社交媒体上的互动。其中一种场景就是在应用中放置类似 Facebook 的点赞按钮,下面我们来看看如何使用 Google Analytics 来追踪这一行为。
```
...
fbLikeParams = {
socialNetwork:
'Facebook',
socialAction:
'Like',
socialTarget:
'https://facebook.com/mypage'
socialNetwork:
'Facebook',
socialAction:
'Like',
socialTarget:
'https://facebook.com/mypage'
};
...
fbLike() {
ga('send', 'social', this.fbLikeParams);
ga('send', 'social', this.fbLikeParams);
}
```
如果你觉得这段代码似曾相识,那是因为它确实跟上面统计“感兴趣”按钮点击次数的代码非常相似。下面我们继续看其中每一步的内容:
1\. 构造发送的数据负载,其中包括以下字段:
1构造发送的数据负载,其中包括以下字段:
1. `socialNetwork` 交互发生的社交媒体,例如 Facebook、Twitter 等等
2. `socialAction` 发生的交互类型,例如点赞、发表推文、分享等等
3. `socialTarget` 交互的目标 URL一般是社交媒体账号的主页
2\. 下一步是增加一个函数来发送整个交互记录。和统计按钮点击数量时相比,这里使用 `send()` 的方式有所不同。另外,我们还需要把这个函数绑定到已有的点赞按钮上。
2、下一步是增加一个函数来发送整个交互记录。和统计按钮点击数量时相比这里使用 `send()` 的方式有所不同。另外,我们还需要把这个函数绑定到已有的点赞按钮上。
在追踪用户交互方面Google Analytics 还可以做更多的事情,其中最重要的一种是针对异常的追踪,这让我们可以通过 Google Analytics 来追踪应用程序中出现的错误和异常。在本文中我们就不赘述这一点了,但我们鼓励读者自行探索。
**用户识别**
**隐私是一项权利,而不是奢侈品:** Google Analytics 除了可以记录很多用户的操作和交互活动之外,这一节还将介绍一个不太常见的功能,就是可以控制是否对用户的身份进行追踪。
**Cookies** Google Analytics 追踪用户活动的方式是基于 Cookies 的,因此我们可以自定义 Cookies 的名称以及一些其它的内容,请看下面这段代码:
### 用户识别
#### 隐私是一项权利,而不是奢侈品
Google Analytics 除了可以记录很多用户的操作和交互活动之外,这一节还将介绍一个不太常见的功能,就是可以控制是否对用户的身份进行追踪。
#### Cookies
Google Analytics 追踪用户活动的方式是基于 Cookies 的,因此我们可以自定义 Cookies 的名称以及一些其它的内容,请看下面这段代码:
```
trackingID =
UA-139883813-1
'UA-139883813-1'
;
cookieParams = {
cookieName: myGACookie,
cookieDomain: window.location.hostname,
cookieExpires: 604800
cookieName: 'myGACookie',
cookieDomain: window.location.hostname,
cookieExpires: 604800
};
...
ngOnInit() {
ga(create, this.trackingID, this.cookieParams);
ga('create', this.trackingID, this.cookieParams);
...
}
```
在上面这段代码中,我们设置了 Google Analytics Cookies 的名称、域以及过期时间,这就让我们能够将不同网站或 Web 应用的 Cookies 区分开来。因此我们需要为我们自己的应用程序的 Google Analytics 追踪器的 Cookies 设置一个自定义的标识1而不是一个自动生成的随机标识。
**IP 匿名:** 在某些场景下我们可能不需要知道应用程序的流量来自哪里。例如对于一个按钮点击的追踪器我们只需要关心按钮的点击量而不需要关心点击者的地理位置。在这种场景下Google Analytics 允许我们只追踪用户的操作行为,而不获取到用户的 IP 地址。
#### IP 匿名
在某些场景下我们可能不需要知道应用程序的流量来自哪里。例如对于一个按钮点击的追踪器我们只需要关心按钮的点击量而不需要关心点击者的地理位置。在这种场景下Google Analytics 允许我们只追踪用户的操作行为,而不获取到用户的 IP 地址。
```
ipParams = {
anonymizeIp: true
anonymizeIp: true
};
ngOnInit() {
ga('set', this.ipParams);
...
ngOnInit() {
...
ga('set', this.ipParams);
...
}
```
在上面这段代码中,我们将 Google Analytics 追踪器的 `abibymizeIp` 参数设置为 `true`。这样用户的 IP 地址就不会被 Google Analytics 所追踪,这可以让用户知道自己的隐私正在被保护。
**不被跟踪:** 还有些时候用户可能不希望自己的行为受到追踪,而 Google Analytics 也允许这样的需求。因此也存在让用户不被追踪的选项。
#### 不被跟踪
还有些时候用户可能不希望自己的行为受到追踪,而 Google Analytics 也允许这样的需求。因此也存在让用户不被追踪的选项。
```
...
optOut() {
window[ga-disable-UA-139883813-1] = true;
window['ga-disable-UA-139883813-1'] = true;
}
...
```
@ -233,7 +243,7 @@ via: https://opensourceforu.com/2019/10/all-that-you-can-do-with-google-analytic
作者:[Ashwin Sathian][a]
选题:[lujun9972][b]
译者:[HankChow](https://github.com/HankChow)
校对:[校对者ID](https://github.com/校对者ID)
校对:[wxy](https://github.com/wxy)
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译,[Linux中国](https://linux.cn/) 荣誉推出

View File

@ -1,5 +1,5 @@
[#]: collector: (lujun9972)
[#]: translator: ( )
[#]: translator: (laingke)
[#]: reviewer: ( )
[#]: publisher: ( )
[#]: url: ( )
@ -7,16 +7,15 @@
[#]: via: (https://www.networkworld.com/article/3444589/viewing-files-and-processes-as-trees-on-linux.html)
[#]: author: (Sandra Henry-Stocker https://www.networkworld.com/author/Sandra-Henry_Stocker/)
Viewing files and processes as trees on Linux
在 Linux 上以树状查看文件和进程
======
A look at three Linux commands - ps, pstree and tree - for viewing files and processes in a tree-like format.
[Melissa McMasters][1] [(CC BY 2.0)][2]
介绍三个 Linux 命令ps、pstree 和 tree 以类似树的格式查看文件和进程。
[Linux][3] provides several handy commands for viewing both files and processes in a branching, tree-like format that makes it easy to view how they are related. In this post, we'll look at the **ps**, **pstree** and **tree** commands along with some options they provide to help focus your view on what you want to see.
[Linux][3] 提供了一些方便的命令,用于以树状分支形式查看文件和进程,从而易于查看它们之间的关系。在本文中,我们将介绍 **ps****pstree** 和 **tree** 命令以及它们提供的一些选项,这些选项可帮助您将焦点集中在要查看的内容上。
### ps
The **ps** command that we all use to list processes has some interesting options that many of us never take advantage of. While the commonly used **ps -ef** provides a complete listing of running processes, the **ps -ejH** command adds a nice effect. It indents related processes to make the relationship between these processes visually more clear   as in this excerpt:
我们用来列出进程的 **ps** 命令有一些有趣的选项,但是很多人从来没有利用过。虽然常用的 **ps -ef** 提供了正在运行的进程的完整列表,但是 **ps -ejH** 命令增加了一个不错的效果。它缩进了相关的进程以使这些进程之间的关系在视觉上更加清晰——就像这个片段:
```
$ ps -ejH
@ -29,17 +28,9 @@ $ ps -ejH
30968 30968 28410 pts/0 00:00:00 ps
```
As you can see, the ps process is being run is run within bash and bash within an ssh session.
可以看到,正在运行的 ps 进程是在 bash 中运行的,而 bash 是在 ssh 会话中运行的。
[][4]
BrandPost Sponsored by HPE
[Take the Intelligent Route with Consumption-Based Storage][4]
Combine the agility and economics of HPE storage with HPE GreenLake and run your IT department with efficiency.
The **-exjf** option string provides a similar view, but with some additional details and symbols to highlight the hierarchical nature of the processes:
**-exjf** 选项字符串提供了类似的视图,但是带有一些其它细节和符号以突出显示进程的层次结构性质:
```
$ ps -exjf
@ -52,9 +43,7 @@ PPID PID PGID SID TTY TPGID STAT UID TIME COMMAND
28410 31028 31028 28410 pts/0 31028 R+ 1000 0:00 \_ ps axjf
```
The options used in these commands represent:
Advertisement
命令中使用的这些选项表示:
```
-e select all processes
@ -64,7 +53,7 @@ Advertisement
-x lift the "must be associated with a tty" restriction
```
There's also a **\--forest** option that provides a similar view.
命令同时也有一个 **\--forest** 选项提供了类似的视图。
```
$ ps -ef --forest
@ -77,13 +66,11 @@ shs 28410 28409 0 12:56 pts/0 00:00:00 \_ -bash
shs 32351 28410 0 14:39 pts/0 00:00:00 \_ ps -ef --forest
```
Note that these examples are only a sampling of how these commands can be used. You can select whichever options that give you the view of processes that works best for you.
[MORE ON NETWORK WORLD: Linux: Best desktop distros for newbies][5]
注意,这些示例只是这些命令如何使用的示例。您可以选择最适合您的流程视图的任何选项组合。
### pstree
A similar view of processes is available using the **pstree** command. While even **pstree** offers many options, the command provides a very useful display on its own. Notice that many parent-child process relationships are displayed on single lines rather than subsequent lines.
使用 **pstree** 命令可以获得类似的进程视图。尽管 **pstree** 具备了许多选项,但是该命令本身就提供了非常有用的显示。注意,许多父子进程关系显示在单行而不是后续行上。
```
$ pstree
@ -99,7 +86,7 @@ $ pstree
│ └─xdg-permission-───2*[{xdg-permission-}]
```
With the **-n** option, **pstree** displays the process in numerical (by process ID) order:
通过 **-n** 选项,**pstree** 以数值(按进程 ID顺序显示进程
```
$ pstree -n
@ -130,17 +117,17 @@ systemd─┬─systemd-journal
├─sshd───sshd───sshd───bash───pstree
```
Some options to consider when using **pstree** include **-a** (include command line arguments) and **-g** (include process groups).
使用 **pstree** 时要考虑的一些选项包括 **-a**(包括命令行参数)和 **-g**(包括进程组)。
Here are some quick (truncated) examples.
以下是一些简单的示例(片段)。
Output from **pstree -a**
命令 **pstree -a** 的输出内容:
```
└─wpa_supplicant -u -s -O /run/wpa_supplicant
```
Output from **pstree -g**:
命令 **pstree -g** 的输出内容:
```
├─sshd(1396)───sshd(28281)───sshd(28281)───bash(28410)───pstree(1115)
@ -148,10 +135,9 @@ Output from **pstree -g**:
### tree
While the **tree** command sounds like it would be very similar to **pstree**, it's a command for looking at files rather than processes. It provides a nice tree-like view of directories and files.
If you use the **tree** command to look at **/proc**, your display would begin similar to this one:
虽然 **tree** 命令听起来与 **pstree** 非常相似,但这是用于查看文件而非进程的命令。它提供了一个漂亮的树状目录和文件视图。
如果你使用 **tree** 命令查看 **/proc** 目录,你显示的开头将类似于这个:
```
$ tree /proc
/proc
@ -178,9 +164,9 @@ $ tree /proc
...
```
You will see a lot more detail if you run a command like this as root (**sudo tree /proc)** since much of the contents of **/proc** is inaccessible to regular users.
如果以 root 权限运行这条命令(**sudo tree /proc**),你将会看到更多详细信息,因为 **/proc** 目录的许多内容对于普通用户而言是无法访问的。
The **tree -d** command will limit your display to directories.
命令 **tree -d** 将会限制仅显示目录。
```
$ tree -d /proc
@ -205,7 +191,7 @@ $ tree -d /proc
...
```
With the **-f** option, **tree** will show full pathnames.
使用 **-f** 选项,**tree** 命令会显示完整的路径。
```
$ tree -f /proc
@ -228,9 +214,7 @@ $ tree -f /proc
...
```
Hierarchical displays can often make the relationship between processes and files easier to understand. While the number of options available is rather broad, you'll probably find some views that help you see just what you're looking for.
Join the Network World communities on [Facebook][6] and [LinkedIn][7] to comment on topics that are top of mind.
分层显示通常可以使进程和文件之间的关系更容易理解。可用选项的数量很多,而你总可能会找到一些视图,帮助你查看所需的内容。
--------------------------------------------------------------------------------
@ -238,7 +222,7 @@ via: https://www.networkworld.com/article/3444589/viewing-files-and-processes-as
作者:[Sandra Henry-Stocker][a]
选题:[lujun9972][b]
译者:[译者ID](https://github.com/译者ID)
译者:[laingke](https://github.com/laingke)
校对:[校对者ID](https://github.com/校对者ID)
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译,[Linux中国](https://linux.cn/) 荣誉推出