這篇文章源自這樣一個問題：如何對單頁應用中的頁面訪問進行跟踪？
-- Ashwin Sathian（作者）

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

這篇文章源自這樣一個問題：如何對單頁應用中的頁面訪問進行跟踪？

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

準備好應用程序

首先需要有一個追踪ID(tracking ID) 。在開始編寫業務代碼之前，要先準備好一個追踪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()函數中執行的，因此每當應用程序啟動，追踪器就會啟動。

在單頁應用中記錄頁面訪問情況

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

如何記錄用戶在一個應用中不同部分的訪問，這是一個難點。從功能上來看，單頁應用中的路由對應了傳統多頁面應用中各個頁面之間的跳轉，因此我們需要記錄訪問路由。要做到這一點儘管不算簡單，但仍然是可以實現的。在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選題： lujun9972譯者： HankChow校對： wxy

本文由LCTT原創編譯， Linux台灣榮譽推出