[[279181]]

Google Analytics （GA）這個流行的用戶活動追蹤工具我們或多或少都聽說過甚至使用過，但它的用途并不僅僅限于對頁面訪問的追蹤。作為一個既實用又流行的工具，它已經(jīng)受到了廣泛的歡迎，因此我們將要在下文中介紹如何在各種 Angular 和 React 單頁應(yīng)用中使用 Google Analytics。

這篇文章源自這樣一個問題：如何對單頁應(yīng)用中的頁面訪問進(jìn)行跟蹤？

通常來說，有很多的方法可以解決這個問題，在這里我們只討論其中的一種方法。下面我會使用 Angular 來寫出對應(yīng)的實現(xiàn)，如果你使用的是 React，相關(guān)的用法和概念也不會有太大的差別。接下來就開始吧。

準(zhǔn)備好應(yīng)用程序

首先需要有一個追蹤 IDtracking ID。在開始編寫業(yè)務(wù)代碼之前，要先準(zhǔn)備好一個追蹤 ID，通過這個唯一的標(biāo)識，Google Analytics 才能識別出某個點擊或者某個頁面訪問是來自于哪一個應(yīng)用。

按照以下的步驟：

1. 訪問 https://analytics.google.com；
2. 提交指定信息以完成注冊，并確?？捎糜?Web 應(yīng)用，因為我們要開發(fā)的正是一個 Web 應(yīng)用；
3. 同意相關(guān)的條款，生成一個追蹤 ID；
4. 保存好追蹤 ID。

追蹤 ID 拿到了，就可以開始編寫業(yè)務(wù)代碼了。

添加 analytics.js 腳本

Google 已經(jīng)幫我們做好了接入之前需要做的所有事情，接下來就是我們的工作了。不過我們要做的也很簡單，只需要把下面這段腳本添加到應(yīng)用的 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>

現(xiàn)在我們來看一下 Google Analytics 是如何在應(yīng)用程序中初始化的。

創(chuàng)建追蹤器

首先創(chuàng)建一個應(yīng)用程序的追蹤器。在 app.component.ts 中執(zhí)行以下兩個步驟：

1. 聲明一個名為 ga，類型為 any 的全局變量（在 Typescript 中需要制定變量類型）；
2. 將下面一行代碼加入到 ngInInit() 中。

ga('create', <你的追蹤 ID>, 'auto');

這樣就已經(jīng)成功地在應(yīng)用程序中初始化了一個 Google Analytics 的追蹤器了。由于追蹤器的初始化是在 OnInit() 函數(shù)中執(zhí)行的，因此每當(dāng)應(yīng)用程序啟動，追蹤器就會啟動。

在單頁應(yīng)用中記錄頁面訪問情況

我們需要實現(xiàn)的是記錄訪問路由route-visits。

如何記錄用戶在一個應(yīng)用中不同部分的訪問，這是一個難點。從功能上來看，單頁應(yīng)用中的路由對應(yīng)了傳統(tǒng)多頁面應(yīng)用中各個頁面之間的跳轉(zhuǎn)，因此我們需要記錄訪問路由。要做到這一點盡管不算簡單，但仍然是可以實現(xiàn)的。在 app.component.ts 的 ngOnInit() 函數(shù)中添加以下的代碼片段：

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; }});
        }
    } 
);

神奇的是，只需要這么幾行代碼，就實現(xiàn)了 Angular 應(yīng)用中記錄頁面訪問情況的功能。

這段代碼實際上做了以下幾件事情：

1. 從 Angular Router 中導(dǎo)入了 Router、NavigationEnd；
2. 通過構(gòu)造函數(shù)中將 Router 添加到組件中；
3. 然后訂閱 router 事件，也就是由 Angular Router 發(fā)出的所有事件；
4. 只要產(chǎn)生了一個 NavigationEnd 事件實例，就將路由和目標(biāo)作為一個頁面訪問進(jìn)行記錄。

這樣，只要使用到了頁面路由，就會向 Google Analytics 發(fā)送一條頁面訪問記錄，在 Google Analytics 的在線控制臺中可以看到這些記錄。

類似地，我們可以用相同的方式來記錄除了頁面訪問之外的活動，例如某個界面的查看次數(shù)或者時長等等。只要像上面的代碼那樣使用 hitCallBack() 就可以在有需要收集的數(shù)據(jù)的時候讓應(yīng)用程序作出反應(yīng)，這里我們做的事情僅僅是把一個變量的值設(shè)為 true，但實際上 hitCallBack() 中可以執(zhí)行任何代碼。

追蹤用戶交互活動

除了頁面訪問記錄之外，Google Analytics 還經(jīng)常被用于追蹤用戶的交互活動，例如某個按鈕的點擊情況。“提交按鈕被用戶點擊了多少次？”，“產(chǎn)品手冊會被經(jīng)常查閱嗎？”這些都是 Web 應(yīng)用程序的產(chǎn)品評審會議上的常見問題。這一節(jié)我們將會介紹如何實現(xiàn)這些數(shù)據(jù)的統(tǒng)計。

按鈕點擊

設(shè)想這樣一種場景，需要統(tǒng)計到應(yīng)用程序中某個按鈕或鏈接被點擊的次數(shù)，這是一個和注冊之類的關(guān)鍵動作關(guān)系最密切的數(shù)據(jù)指標(biāo)。下面我們來舉一個例子：

假設(shè)應(yīng)用程序中有一個“感興趣”按鈕，用于顯示即將推出的活動，你希望通過統(tǒng)計這個按鈕被點擊的次數(shù)來推測有多少用戶對此感興趣。那么我們可以使用以下的代碼來實現(xiàn)這個功能：

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

現(xiàn)在看下這段代碼實際上做了什么。正如前面說到，當(dāng)我們向 Google Analytics 發(fā)送數(shù)據(jù)的時候，Google Analytics 就會記錄下來。因此我們可以向 send() 方法傳遞不同的參數(shù)，以區(qū)分不同的事件，例如兩個不同按鈕的點擊記錄。

1、首先我們定義了一個 params 對象，這個對象包含了以下幾個字段：

1. eventCategory – 交互發(fā)生的對象，這里對應(yīng)的是按鈕（button）
2. eventAction – 發(fā)生的交互的類型，這里對應(yīng)的是點擊（click）
3. eventLabel – 交互動作的標(biāo)識，這里對應(yīng)的是這個按鈕的內(nèi)容，也就是“感興趣”
4. eventValue – 與每個發(fā)生的事件實例相關(guān)聯(lián)的值

由于這個例子中是要統(tǒng)計點擊了“感興趣”按鈕的用戶數(shù)，因此我們把 eventValue 的值定為 1。

2、對象構(gòu)造完成之后，下一步就是將 params 對象作為請求負(fù)載發(fā)送到 Google Analytics，而這一步是通過事件綁定將 showInterest() 綁定在按鈕上實現(xiàn)的。這也是使用 Google Analytics 追蹤中最常用的發(fā)送事件方法。

至此，Google Analytics 就可以通過記錄按鈕的點擊次數(shù)來統(tǒng)計感興趣的用戶數(shù)了。

追蹤社交活動

Google Analytics 還可以通過應(yīng)用程序追蹤用戶在社交媒體上的互動。其中一種場景就是在應(yīng)用中放置類似 Facebook 的點贊按鈕，下面我們來看看如何使用 Google Analytics 來追蹤這一行為。

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

如果你覺得這段代碼似曾相識，那是因為它確實跟上面統(tǒng)計“感興趣”按鈕點擊次數(shù)的代碼非常相似。下面我們繼續(xù)看其中每一步的內(nèi)容：

1、構(gòu)造發(fā)送的數(shù)據(jù)負(fù)載，其中包括以下字段：

1. socialNetwork – 交互發(fā)生的社交媒體，例如 Facebook、Twitter 等等
2. socialAction – 發(fā)生的交互類型，例如點贊、發(fā)表推文、分享等等
3. socialTarget – 交互的目標(biāo) URL，一般是社交媒體賬號的主頁

2、下一步是增加一個函數(shù)來發(fā)送整個交互記錄。和統(tǒng)計按鈕點擊數(shù)量時相比，這里使用 send() 的方式有所不同。另外，我們還需要把這個函數(shù)綁定到已有的點贊按鈕上。

在追蹤用戶交互方面，Google Analytics 還可以做更多的事情，其中最重要的一種是針對異常的追蹤，這讓我們可以通過 Google Analytics 來追蹤應(yīng)用程序中出現(xiàn)的錯誤和異常。在本文中我們就不贅述這一點了，但我們鼓勵讀者自行探索。

用戶識別

隱私是一項權(quán)利，而不是奢侈品

Google Analytics 除了可以記錄很多用戶的操作和交互活動之外，這一節(jié)還將介紹一個不太常見的功能，就是可以控制是否對用戶的身份進(jìn)行追蹤。

Cookies

Google Analytics 追蹤用戶活動的方式是基于 Cookies 的，因此我們可以自定義 Cookies 的名稱以及一些其它的內(nèi)容，請看下面這段代碼：

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

在上面這段代碼中，我們設(shè)置了 Google Analytics Cookies 的名稱、域以及過期時間，這就讓我們能夠?qū)⒉煌W(wǎng)站或 Web 應(yīng)用的 Cookies 區(qū)分開來。因此我們需要為我們自己的應(yīng)用程序的 Google Analytics 追蹤器的 Cookies 設(shè)置一個自定義的標(biāo)識1，而不是一個自動生成的隨機標(biāo)識。

IP 匿名

在某些場景下，我們可能不需要知道應(yīng)用程序的流量來自哪里。例如對于一個按鈕點擊的追蹤器，我們只需要關(guān)心按鈕的點擊量，而不需要關(guān)心點擊者的地理位置。在這種場景下，Google Analytics 允許我們只追蹤用戶的操作行為，而不獲取到用戶的 IP 地址。

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

在上面這段代碼中，我們將 Google Analytics 追蹤器的 abibymizeIp 參數(shù)設(shè)置為 true。這樣用戶的 IP 地址就不會被 Google Analytics 所追蹤，這可以讓用戶知道自己的隱私正在被保護。

不被跟蹤

還有些時候用戶可能不希望自己的行為受到追蹤，而 Google Analytics 也允許這樣的需求。因此也存在讓用戶不被追蹤的選項。

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

optOut() 是一個自定義函數(shù)，它可以禁用頁面中的 Google Analytics 追蹤，我們可以使用按鈕或復(fù)選框上得事件綁定來使用這一個功能，這樣用戶就可以選擇是否會被 Google Analytics 追蹤。

在本文中，我們討論了 Google Analytics 集成到單頁應(yīng)用時的難點，并探索出了一種相關(guān)的解決方法。我們還了解到了如何在單頁應(yīng)用中追蹤頁面訪問和用戶交互，例如按鈕點擊、社交媒體活動等。

最后，我們還了解到 Google Analytics 為用戶提供了保護隱私的功能，尤其是用戶的一些隱私數(shù)據(jù)并不需要參與到統(tǒng)計當(dāng)中的時候。而用戶也可以選擇完全不受到 Google Analytics 的追蹤。除此以外，Google Analytics 還可以做到很多其它的事情，這就需要我們繼續(xù)不斷探索了。