Google Analytics的一些用法介紹
Google Analytics （GA）這個流行的用戶活動追蹤工具我們或多或少都聽說過甚至使用過，但它的用途并不僅僅限于對頁面訪問的追蹤。作為一個既實用又流行的工具，它已經受到了廣泛的歡迎，因此我們將要在下文中介紹如何在各種 Angular 和 React 單頁應用中使用 Google Analytics。
這篇文章源自這樣一個問題：如何對單頁應用中的頁面訪問進行跟蹤？
通常來說，有很多的方法可以解決這個問題，在這里我們只討論其中的一種方法。下面我會使用 Angular 來寫出對應的實現，如果你使用的是 React，相關的用法和概念也不會有太大的差別。接下來就開始吧。
準備好應用程序
首先需要有一個追蹤 ID。在開始編寫業務代碼之前，要先準備好一個追蹤 ID，通過這個唯一的標識，Google Analytics 才能識別出某個點擊或者某個頁面訪問是來自于哪一個應用。
按照以下的步驟：
- 訪問 https://analytics.google.com；
- 提交指定信息以完成注冊，并確保可用于 Web 應用，因為我們要開發的正是一個 Web 應用；
- 同意相關的條款，生成一個追蹤 ID；
- 保存好追蹤 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 中執行以下兩個步驟：
- 聲明一個名為
ga，類型為any的全局變量（在 Typescript 中需要制定變量類型）； - 將下面一行代碼加入到
ngInInit()中。
ga('create', <你的追蹤 ID>, 'auto');
這樣就已經成功地在應用程序中初始化了一個 Google Analytics 的追蹤器了。由于追蹤器的初始化是在 OnInit() 函數中執行的，因此每當應用程序啟動，追蹤器就會啟動。
在單頁應用中記錄頁面訪問情況
我們需要實現的是記錄訪問路由。
如何記錄用戶在一個應用中不同部分的訪問，這是一個難點。從功能上來看，單頁應用中的路由對應了傳統多頁面應用中各個頁面之間的跳轉，因此我們需要記錄訪問路由。要做到這一點盡管不算簡單，但仍然是可以實現的。在 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 應用中記錄頁面訪問情況的功能。
這段代碼實際上做了以下幾件事情：
- 從 Angular Router 中導入了
Router、NavigationEnd； - 通過構造函數中將
Router添加到組件中； - 然后訂閱
router事件，也就是由 Angular Router 發出的所有事件； - 只要產生了一個
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 對象，這個對象包含了以下幾個字段：
eventCategory– 交互發生的對象，這里對應的是按鈕（button）eventAction– 發生的交互的類型，這里對應的是點擊（click）eventLabel– 交互動作的標識，這里對應的是這個按鈕的內容，也就是“感興趣”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、構造發送的數據負載，其中包括以下字段：
socialNetwork– 交互發生的社交媒體，例如 Facebook、Twitter 等等socialAction– 發生的交互類型，例如點贊、發表推文、分享等等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 還可以做到很多其它的事情，這就需要我們繼續不斷探索了。
