本篇要解決的問題
上個禮拜本站進行改版，原本訪客人數是用 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 的話再找看看有沒有外掛可以直接使用囉。
