Google Analytics的一些用法介紹
Google Analytics （GA）這個(gè)流行的用戶活動(dòng)追蹤工具我們或多或少都聽(tīng)說(shuō)過(guò)甚至使用過(guò)，但它的用途并不僅僅限于對(duì)頁(yè)面訪問(wèn)的追蹤。作為一個(gè)既實(shí)用又流行的工具，它已經(jīng)受到了廣泛的歡迎，因此我們將要在下文中介紹如何在各種 Angular 和 React 單頁(yè)應(yīng)用中使用 Google Analytics。
這篇文章源自這樣一個(gè)問(wèn)題：如何對(duì)單頁(yè)應(yīng)用中的頁(yè)面訪問(wèn)進(jìn)行跟蹤？
通常來(lái)說(shuō)，有很多的方法可以解決這個(gè)問(wèn)題，在這里我們只討論其中的一種方法。下面我會(huì)使用 Angular 來(lái)寫(xiě)出對(duì)應(yīng)的實(shí)現(xiàn)，如果你使用的是 React，相關(guān)的用法和概念也不會(huì)有太大的差別。接下來(lái)就開(kāi)始吧。
準(zhǔn)備好應(yīng)用程序
首先需要有一個(gè)追蹤 ID。在開(kāi)始編寫(xiě)業(yè)務(wù)代碼之前，要先準(zhǔn)備好一個(gè)追蹤 ID，通過(guò)這個(gè)唯一的標(biāo)識(shí)，Google Analytics 才能識(shí)別出某個(gè)點(diǎn)擊或者某個(gè)頁(yè)面訪問(wèn)是來(lái)自于哪一個(gè)應(yīng)用。
按照以下的步驟：
- 訪問(wèn) https://analytics.google.com；
- 提交指定信息以完成注冊(cè)，并確保可用于 Web 應(yīng)用，因?yàn)槲覀円_(kāi)發(fā)的正是一個(gè) Web 應(yīng)用；
- 同意相關(guān)的條款，生成一個(gè)追蹤 ID；
- 保存好追蹤 ID。
追蹤 ID 拿到了，就可以開(kāi)始編寫(xiě)業(yè)務(wù)代碼了。
添加 analytics.js 腳本
Google 已經(jīng)幫我們做好了接入之前需要做的所有事情，接下來(lái)就是我們的工作了。不過(guò)我們要做的也很簡(jiǎn)單，只需要把下面這段腳本添加到應(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)在我們來(lái)看一下 Google Analytics 是如何在應(yīng)用程序中初始化的。
創(chuàng)建追蹤器
首先創(chuàng)建一個(gè)應(yīng)用程序的追蹤器。在 app.component.ts 中執(zhí)行以下兩個(gè)步驟：
- 聲明一個(gè)名為
ga，類型為any的全局變量（在 Typescript 中需要制定變量類型）； - 將下面一行代碼加入到
ngInInit()中。
ga('create', <你的追蹤 ID>, 'auto');
這樣就已經(jīng)成功地在應(yīng)用程序中初始化了一個(gè) Google Analytics 的追蹤器了。由于追蹤器的初始化是在 OnInit() 函數(shù)中執(zhí)行的，因此每當(dāng)應(yīng)用程序啟動(dòng)，追蹤器就會(huì)啟動(dòng)。
在單頁(yè)應(yīng)用中記錄頁(yè)面訪問(wèn)情況
我們需要實(shí)現(xiàn)的是記錄訪問(wèn)路由。
如何記錄用戶在一個(gè)應(yīng)用中不同部分的訪問(wèn)，這是一個(gè)難點(diǎn)。從功能上來(lái)看，單頁(yè)應(yīng)用中的路由對(duì)應(yīng)了傳統(tǒng)多頁(yè)面應(yīng)用中各個(gè)頁(yè)面之間的跳轉(zhuǎn)，因此我們需要記錄訪問(wèn)路由。要做到這一點(diǎn)盡管不算簡(jiǎn)單，但仍然是可以實(shí)現(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; }});}});
神奇的是，只需要這么幾行代碼，就實(shí)現(xiàn)了 Angular 應(yīng)用中記錄頁(yè)面訪問(wèn)情況的功能。
這段代碼實(shí)際上做了以下幾件事情：
- 從 Angular Router 中導(dǎo)入了
Router、NavigationEnd； - 通過(guò)構(gòu)造函數(shù)中將
Router添加到組件中； - 然后訂閱
router事件，也就是由 Angular Router 發(fā)出的所有事件； - 只要產(chǎn)生了一個(gè)
NavigationEnd事件實(shí)例，就將路由和目標(biāo)作為一個(gè)頁(yè)面訪問(wèn)進(jìn)行記錄。
這樣，只要使用到了頁(yè)面路由，就會(huì)向 Google Analytics 發(fā)送一條頁(yè)面訪問(wèn)記錄，在 Google Analytics 的在線控制臺(tái)中可以看到這些記錄。
類似地，我們可以用相同的方式來(lái)記錄除了頁(yè)面訪問(wèn)之外的活動(dòng)，例如某個(gè)界面的查看次數(shù)或者時(shí)長(zhǎng)等等。只要像上面的代碼那樣使用 hitCallBack() 就可以在有需要收集的數(shù)據(jù)的時(shí)候讓?xiě)?yīng)用程序作出反應(yīng)，這里我們做的事情僅僅是把一個(gè)變量的值設(shè)為 true，但實(shí)際上 hitCallBack() 中可以執(zhí)行任何代碼。
追蹤用戶交互活動(dòng)
除了頁(yè)面訪問(wèn)記錄之外，Google Analytics 還經(jīng)常被用于追蹤用戶的交互活動(dòng)，例如某個(gè)按鈕的點(diǎn)擊情況。“提交按鈕被用戶點(diǎn)擊了多少次？”，“產(chǎn)品手冊(cè)會(huì)被經(jīng)常查閱嗎？”這些都是 Web 應(yīng)用程序的產(chǎn)品評(píng)審會(huì)議上的常見(jiàn)問(wèn)題。這一節(jié)我們將會(huì)介紹如何實(shí)現(xiàn)這些數(shù)據(jù)的統(tǒng)計(jì)。
按鈕點(diǎn)擊
設(shè)想這樣一種場(chǎng)景，需要統(tǒng)計(jì)到應(yīng)用程序中某個(gè)按鈕或鏈接被點(diǎn)擊的次數(shù)，這是一個(gè)和注冊(cè)之類的關(guān)鍵動(dòng)作關(guān)系最密切的數(shù)據(jù)指標(biāo)。下面我們來(lái)舉一個(gè)例子：
假設(shè)應(yīng)用程序中有一個(gè)“感興趣”按鈕，用于顯示即將推出的活動(dòng)，你希望通過(guò)統(tǒng)計(jì)這個(gè)按鈕被點(diǎn)擊的次數(shù)來(lái)推測(cè)有多少用戶對(duì)此感興趣。那么我們可以使用以下的代碼來(lái)實(shí)現(xiàn)這個(gè)功能：
...params = {eventCategory:'Button',eventAction:'Click',eventLabel:'Show interest',eventValue:1};showInterest() {ga('send', 'event', this.params);}...
現(xiàn)在看下這段代碼實(shí)際上做了什么。正如前面說(shuō)到，當(dāng)我們向 Google Analytics 發(fā)送數(shù)據(jù)的時(shí)候，Google Analytics 就會(huì)記錄下來(lái)。因此我們可以向 send() 方法傳遞不同的參數(shù)，以區(qū)分不同的事件，例如兩個(gè)不同按鈕的點(diǎn)擊記錄。
1、首先我們定義了一個(gè) params 對(duì)象，這個(gè)對(duì)象包含了以下幾個(gè)字段：
eventCategory– 交互發(fā)生的對(duì)象，這里對(duì)應(yīng)的是按鈕（button）eventAction– 發(fā)生的交互的類型，這里對(duì)應(yīng)的是點(diǎn)擊（click）eventLabel– 交互動(dòng)作的標(biāo)識(shí)，這里對(duì)應(yīng)的是這個(gè)按鈕的內(nèi)容，也就是“感興趣”eventValue– 與每個(gè)發(fā)生的事件實(shí)例相關(guān)聯(lián)的值
由于這個(gè)例子中是要統(tǒng)計(jì)點(diǎn)擊了“感興趣”按鈕的用戶數(shù)，因此我們把 eventValue 的值定為 1。
2、對(duì)象構(gòu)造完成之后，下一步就是將 params 對(duì)象作為請(qǐng)求負(fù)載發(fā)送到 Google Analytics，而這一步是通過(guò)事件綁定將 showInterest() 綁定在按鈕上實(shí)現(xiàn)的。這也是使用 Google Analytics 追蹤中最常用的發(fā)送事件方法。
至此，Google Analytics 就可以通過(guò)記錄按鈕的點(diǎn)擊次數(shù)來(lái)統(tǒng)計(jì)感興趣的用戶數(shù)了。
追蹤社交活動(dòng)
Google Analytics 還可以通過(guò)應(yīng)用程序追蹤用戶在社交媒體上的互動(dòng)。其中一種場(chǎng)景就是在應(yīng)用中放置類似 Facebook 的點(diǎn)贊按鈕，下面我們來(lái)看看如何使用 Google Analytics 來(lái)追蹤這一行為。
...fbLikeParams = {socialNetwork:'Facebook',socialAction:'Like',socialTarget:'https://facebook.com/mypage'};...fbLike() {ga('send', 'social', this.fbLikeParams);}
如果你覺(jué)得這段代碼似曾相識(shí)，那是因?yàn)樗_實(shí)跟上面統(tǒng)計(jì)“感興趣”按鈕點(diǎn)擊次數(shù)的代碼非常相似。下面我們繼續(xù)看其中每一步的內(nèi)容：
1、構(gòu)造發(fā)送的數(shù)據(jù)負(fù)載，其中包括以下字段：
socialNetwork– 交互發(fā)生的社交媒體，例如 Facebook、Twitter 等等socialAction– 發(fā)生的交互類型，例如點(diǎn)贊、發(fā)表推文、分享等等socialTarget– 交互的目標(biāo) URL，一般是社交媒體賬號(hào)的主頁(yè)
2、下一步是增加一個(gè)函數(shù)來(lái)發(fā)送整個(gè)交互記錄。和統(tǒng)計(jì)按鈕點(diǎn)擊數(shù)量時(shí)相比，這里使用 send() 的方式有所不同。另外，我們還需要把這個(gè)函數(shù)綁定到已有的點(diǎn)贊按鈕上。
在追蹤用戶交互方面，Google Analytics 還可以做更多的事情，其中最重要的一種是針對(duì)異常的追蹤，這讓我們可以通過(guò) Google Analytics 來(lái)追蹤應(yīng)用程序中出現(xiàn)的錯(cuò)誤和異常。在本文中我們就不贅述這一點(diǎn)了，但我們鼓勵(lì)讀者自行探索。
用戶識(shí)別
隱私是一項(xiàng)權(quán)利，而不是奢侈品
Google Analytics 除了可以記錄很多用戶的操作和交互活動(dòng)之外，這一節(jié)還將介紹一個(gè)不太常見(jiàn)的功能，就是可以控制是否對(duì)用戶的身份進(jìn)行追蹤。
Cookies
Google Analytics 追蹤用戶活動(dòng)的方式是基于 Cookies 的，因此我們可以自定義 Cookies 的名稱以及一些其它的內(nèi)容，請(qǐng)看下面這段代碼：
trackingID ='UA-139883813-1';cookieParams = {cookieName: 'myGACookie',cookieDomain: window.location.hostname,cookieExpires: 604800};...ngOnInit() {ga('create', this.trackingID, this.cookieParams);...}
在上面這段代碼中，我們?cè)O(shè)置了 Google Analytics Cookies 的名稱、域以及過(guò)期時(shí)間，這就讓我們能夠?qū)⒉煌W(wǎng)站或 Web 應(yīng)用的 Cookies 區(qū)分開(kāi)來(lái)。因此我們需要為我們自己的應(yīng)用程序的 Google Analytics 追蹤器的 Cookies 設(shè)置一個(gè)自定義的標(biāo)識(shí)1，而不是一個(gè)自動(dòng)生成的隨機(jī)標(biāo)識(shí)。
IP 匿名
在某些場(chǎng)景下，我們可能不需要知道應(yīng)用程序的流量來(lái)自哪里。例如對(duì)于一個(gè)按鈕點(diǎn)擊的追蹤器，我們只需要關(guān)心按鈕的點(diǎn)擊量，而不需要關(guān)心點(diǎn)擊者的地理位置。在這種場(chǎng)景下，Google Analytics 允許我們只追蹤用戶的操作行為，而不獲取到用戶的 IP 地址。
ipParams = {anonymizeIp: true};...ngOnInit() {...ga('set', this.ipParams);...}
在上面這段代碼中，我們將 Google Analytics 追蹤器的 abibymizeIp 參數(shù)設(shè)置為 true。這樣用戶的 IP 地址就不會(huì)被 Google Analytics 所追蹤，這可以讓用戶知道自己的隱私正在被保護(hù)。
不被跟蹤
還有些時(shí)候用戶可能不希望自己的行為受到追蹤，而 Google Analytics 也允許這樣的需求。因此也存在讓用戶不被追蹤的選項(xiàng)。
...optOut() {window['ga-disable-UA-139883813-1'] = true;}...
optOut() 是一個(gè)自定義函數(shù)，它可以禁用頁(yè)面中的 Google Analytics 追蹤，我們可以使用按鈕或復(fù)選框上得事件綁定來(lái)使用這一個(gè)功能，這樣用戶就可以選擇是否會(huì)被 Google Analytics 追蹤。
在本文中，我們討論了 Google Analytics 集成到單頁(yè)應(yīng)用時(shí)的難點(diǎn)，并探索出了一種相關(guān)的解決方法。我們還了解到了如何在單頁(yè)應(yīng)用中追蹤頁(yè)面訪問(wèn)和用戶交互，例如按鈕點(diǎn)擊、社交媒體活動(dòng)等。
最后，我們還了解到 Google Analytics 為用戶提供了保護(hù)隱私的功能，尤其是用戶的一些隱私數(shù)據(jù)并不需要參與到統(tǒng)計(jì)當(dāng)中的時(shí)候。而用戶也可以選擇完全不受到 Google Analytics 的追蹤。除此以外，Google Analytics 還可以做到很多其它的事情，這就需要我們繼續(xù)不斷探索了。
