本篇要解決的問題
上個禮拜本站進行改版,原本訪客人數是用 Jetpack 內建的功能,結果一個手殘,Jetpack 重新綁定帳號,過往的資料立馬就都沒有了,訪客人數瞬間變成 0。
如果要改用 Google Analytics 的 API 來當訪客數,短時間內也來不及去看他們的 API 要怎麼接了,這時就想到了以前在 Google Sheets 上安裝過的一個外掛,可以直接幫忙抓所要的 GA 資料,還可以設定每小時更新一次。
再加上本站寫過幾篇抓 Google 試算表資料的方式,只需要把二者結合起來,Bang~ 用 Google 試算表來抓訪客人數的功能就可以完成。
本篇筆記的不是用 Google API 的方式,只需要安裝好外掛「Google Analytics Spreadsheet Add-on」即可使用。
安裝外掛 Google Analytics
本篇要安裝的外掛是 Google 官方出品的 Google Analytics,網址在這:
https://workspace.google.com/marketplace/app/google_analytics/477988381226
雖然名稱叫 Google Analytics,容易誤會成是 GA,但它其實是在 Google Sheet 上跑 GA 的數據並成為報表的功能。
題外話,寫到這邊,真的很為難到底該叫這個外掛什麼名字?外掛安裝頁上是叫「Google Analytics」,但在說明文件上又寫「Google Analytics Spreadsheet Add-on」,所以只好一個拿來當主標,一個拿來當次標了。

首先,在安裝之前請先確認登入的 Google 帳號是擁有 GA 權限的,不然即便裝了也抓不到 GA 資料。
之後點擊上圖的「安裝」按鈕,接著就是按繼續、允許,就可以安裝完成。
安裝完成後,開啟一個 Google Sheets 的檔案,在「外掛程式」這個選項就可以看到外掛的功能:

建立報表 Create new report
Google Analytics 這個外掛有三項功能可以執行:
- Create new report 建立報表
- Run reports 執行報表
- Schedule reports 設定排程
一開始先選擇 Create new report 來建立我們要看的報表。
點擊後,整個頁面右側會出現建立新報表的選項:

以下說明各自要填什麼。
Name your report
這項就是填寫報表名稱,就取個看得懂的名字。
比方我們在這篇要拿來抓訪客數,就可以直接填上「訪客數」。
Select a view
這個是指要抓哪一個 GA 的資料?
如果這邊沒東西,代表登入的 Google 帳號不具有任何一個 GA 的權限,請切換成有 GA 的 Google 帳號。
Choose configuration options
這邊就是設定要看到這個 GA 的「指標(Metrics)」、「維度(Dimensions)」、「區隔(Segments)」各是什麼?
一般我們看 GA 的報表會長這樣:

簡單來說,「維度」就是最左邊直的那排,「指標」就是橫的那些數值:

在表單中我們只能輸入英文,這邊很貼心地會直接出現選單給我們選:

因為都是英文,所以我們常用中文的人會不太好懂,這邊提供一個簡單的方式,以下用 Google 提供的 Demo 帳號當示範。
我們先在 GA 中選好我們要看的報表,比方我們多增加一個次要維度,想看的表會長這樣:

這時網址的部份會像這樣:
https://analytics.google.com/analytics/web/#/report/content-pages/xxxxxxxxxxxxxx
可以看到網址中有一個「#」字號,我們只需要把「#」改成「?hl=en#」,像把上面網址改成這樣:
https://analytics.google.com/analytics/web/?hl=en#/report/content-pages/xxxxxxxxxxxxxx
這時 GA 介面就會變成英文版的,維度、指標的說明也都會變成英文:

比對一下,就可以知道「網頁 = Page」、「網頁瀏覽量 = Pageviews」……等等。
然後在表單上輸入英文後,再選擇好項目就可以:

但不確定每一個項目在這個外掛裡是不是都會有,比如我們上面截圖的範例,有一個「分享網址」,對應到的英文是「Shared URL」,這項就查不到。
Google 官方也有提供查找的頁面:Dimensions & Metrics Explorer
因為都英文,不習慣的話會比較難找想要的值,這邊才會提供中翻英的方式。
本篇要用的是訪客量,August 選擇的維度是「網頁 Page」,指標是「不重複瀏覽量 Unique Pageviews」。
填寫好後按下「Create Report」,就會產生一個工作表「Report Configuration」,表裡面會填寫好設定值:

這邊有三個值需要改,分別是:
Start Date、End Date
資料的區間,預設是從昨天算起的 30 天內。
我們可以改成網站建站的那一天當開始,一直抓到今天,這樣抓到的數據才會是所有的數據。
比方我們想從 2016 年 1 月 1 號開始,一直到今天,就可以設成:
Start Date:2016-01-01
End Date:today
這樣從 GA 抓的數據就會是從 2016 年 1 月 1 日一直到今天。
Limit
這個是指完整的數據最多要顯示幾筆?
下一段當我們執行外掛,會產出一份數據報表,裡面就會有總數跟細部,Limit 就是限制細部的數量。
因為我們頁面最後要抓取的數字只有總數,細部用不到,因此建議改成 1。
文件上是寫 Limit 太大會吃效能,而 Google Sheet 是只要超過一定額度,專案不轉成付費的就會停止,Limit 設太大容易超過額度。
這份 config 的表還有其它選項,本篇就沒仔細研究,可以直接看官方說明文件:Google Analytics Spreadsheet Add-on。
執行報表 Run reports
在 Google Sheet 的操作中,最麻煩的就是上面 Create new report 那步,完成後,接下來就簡單了。
Google Sheet 上面選單點擊「外掛程式 > Google Analytics > Run reports」:

會出現一個提示正在跑報表的訊息:

沒過幾秒,報表跑完也會再跳一個訊息:

按下 OK,會看見多了一張工作表,工作表的名字就是我們取的報表名稱,點進工作表裡就會看到我們要的資料:

Totals For All Results 就是總數。
Results Breakdown 就是之前說的細項,因為 Limit 那邊填 1,所以這邊只會看到第一個結果。
我們後續會抓的就是總數那一個儲存格,這邊可以知道,不論報表怎麼跑,總數都會顯示在同一個儲存格「B12」中,那之後我們只要抓出這格,就可以知道目前的不重複瀏覽量是多少了。
設立排程 Schedule reports
在這個自駕車都已經上路的時代,我們不可能每天每小時都要自己進到 Google Sheet 按下 Run reports 去更新報表,因此 GA Spreadsheet Add-on 也很大心的提供了排程功能,系統會自動更新報表。
Google Sheet 導覽列按下「外掛 > Google Analytics > Schedule reports」:

接著會出現一個小燈箱,會再次確認是否要啟用排程功能:

「Enable reports to run automatically」打勾,會出現要設定什麼樣的排程,由小到大分別是:
- 每小時 every hour
- 每天 every day
- 每周 every week
- 每月 every month

依據選擇的不同,也會再出現第二、第三個選擇,比方上圖選每天,就會出現幾點到幾點之間。
因為訪客數更新當然是愈快愈好,所以 August 選擇的是每小時更新。
以上,我們藉由 Google Analytics 這個外掛,用 Google Sheet 幫忙抓了 GA 的不重複瀏覽量出來,後面二段就是要寫程式去把數字抓到我們的網頁上。
如果對程式不熟,August 盡量寫成直接 copy 貼上也可以使用的(還不按讚按起來)。
但前端就是會因為各網頁情況而有所調整,如果套上去有問題,就問問身旁的工程師朋友囉,讓我們有點存在感(但請不要有問題才找我們,出去玩卻都不約)。
抓 Google Sheet 儲存格資料
以前寫過二篇是怎麼抓 Google 試算表的資料:
用Google Apps Script取得Google Excel資料
這邊採用的是第二篇的方法,詳細說明可以點進去看那篇筆記文,以下就是快速示範。
一樣在我們剛剛的用外掛產出的 Google Sheet,導覽列點擊「工具 > 指令碼編輯器」:

頁面會開啟一個 Google Apps Script 的檔案(以下簡稱 GAS ),主要是可以在這邊寫程式,然後讓前端呼 API 用的。
在這個 GAS 上,我們先取好檔名後儲存,接下來把下方的程式碼 copy 貼上:
開頭的前二行會需要修改。
第二行是要抓哪一個儲存格的位置,因為上文中有說最後產出的報表,總數都會在「B12」這格上,因此這邊就先填 B12。
第一行 sheetID
,這要從網址上來找,我們回到我們的 Google 試算表,網址結構會是這樣:
https://docs.google.com/spreadsheets/d/xxxxxxxxxxxxxxxxxxxxx/edit
/d/
後面那段亂數,就是我們的 sheetID,把它複製後覆蓋掉程式碼就可以了。
這邊的程式碼也附上每三位數加上一個半型逗點 ,
。
如果不想要自動加上半型逗點,那最後一句的:
return ContentService.createTextOutput(result);
改成:
return ContentService.createTextOutput(data);
就可以了。
程式碼複製貼上寫好後,導覽列上點擊「發布 > 部署為網路應用程式」:

會出現第二個小視窗,「Who has access to the app」改選「Anyone, even anonymous」:

最後按下「Deploy」,會出現授權,都允許後,我們會得到一個網址:

這個網址很重要,是我們的網頁上要取得回傳資料用的,我們先把它記下來,下一段會來做使用。
網址會像是這樣:
https://script.google.com/macros/s/xxxxxxxxxxxxxxxxxxx/exec
用 JavaScript 取得資料,塞入頁面中
我們在上一步的最後取得了一個網址,這個網址就是會幫我們從 Google Sheet 取 B12 那格的資料,並回傳給我們的重要網址。
這一段是最後一步,要進行取資料並且塞到頁面上的動作。
首先,先選好我們想要塞訪客數的地方,填入以下程式碼:
uri
的值要改成我們上面最後取得的網址。
<span id="visitors"></span>
這個裡面在呈現時會塞入數字,所以想改後面的字或是前面想加字都可以。
放這段程式碼的地方,像本站是用 WordPress 架的,所以就在小工具新增一個「自訂 HTML」然後貼上就完成。
如果是各站要用,就麻煩找各自的工程師囉(以後出去玩記得約他)。
以上,就是如何用 Google 試算表 + GA,製作網頁上的訪客數功能。
最後要補充一點,用 GAS 當後端給人呼 API,免費的額度是一天 2 萬次,所以一般不大不小的站也夠用了,如果每天瀏覽量可以破 2 萬,就麻煩把廣告或被贊助的 $$ 請一個工程師協助製作吧。
或是 WordPress 的話再找看看有沒有外掛可以直接使用囉。

