用 GA Spreadsheet Add-on 製作網站訪客人數功能

/

本篇要解決的問題

上個禮拜本站進行改版,原本訪客人數是用 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 Analytics
外掛 Google Analytics

首先,在安裝之前請先確認登入的 Google 帳號是擁有 GA 權限的,不然即便裝了也抓不到 GA 資料。

之後點擊上圖的「安裝」按鈕,接著就是按繼續、允許,就可以安裝完成。

安裝完成後,開啟一個 Google Sheets 的檔案,在「外掛程式」這個選項就可以看到外掛的功能:

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

外掛程式中可以看到安裝好的 Google Analytics
外掛程式中可以看到安裝好的 Google Analytics

建立報表 Create new report

Google Analytics 這個外掛有三項功能可以執行:

  1. Create new report 建立報表
  2. Run reports 執行報表
  3. Schedule reports 設定排程

一開始先選擇 Create new report 來建立我們要看的報表。

點擊後,整個頁面右側會出現建立新報表的選項:

建立新報表的表單
建立新報表的表單

以下說明各自要填什麼。

Name your report

這項就是填寫報表名稱,就取個看得懂的名字。

比方我們在這篇要拿來抓訪客數,就可以直接填上「訪客數」。

Select a view

這個是指要抓哪一個 GA 的資料?

如果這邊沒東西,代表登入的 Google 帳號不具有任何一個 GA 的權限,請切換成有 GA 的 Google 帳號。

Choose configuration options

這邊就是設定要看到這個 GA 的「指標(Metrics)」、「維度(Dimensions)」、「區隔(Segments)」各是什麼?

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

一般我們看 GA 的報表會長這樣:

GA 報表
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

因為都英文,不習慣的話會比較難找想要的值,這邊才會提供中翻英的方式。

本篇要用的是訪客量,Augustus 選擇的維度是「網頁 Page」,指標是「不重複瀏覽量 Unique Pageviews」。

填寫好後按下「Create Report」,就會產生一個工作表「Report Configuration」,表裡面會填寫好設定值:

Create new report 後產生的工作表
Create new report 後產生的工作表

這邊有三個值需要改,分別是:

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」:

外掛程式 > Google Analytics > Run reports
外掛程式 > 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」:

外掛 > Google Analytics > Schedule reports
外掛 > Google Analytics > Schedule reports

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

啟用排程功能的燈箱
啟用排程功能的燈箱

「Enable reports to run automatically」打勾,會出現要設定什麼樣的排程,由小到大分別是:

  1. 每小時 every hour
  2. 每天 every day
  3. 每周 every week
  4. 每月 every month
設定排程
設定排程

依據選擇的不同,也會再出現第二、第三個選擇,比方上圖選每天,就會出現幾點到幾點之間。

因為訪客數更新當然是愈快愈好,所以 Augustus 選擇的是每小時更新。


以上,我們藉由 Google Analytics 這個外掛,用 Google Sheet 幫忙抓了 GA 的不重複瀏覽量出來,後面二段就是要寫程式去把數字抓到我們的網頁上。

如果對程式不熟,Augustus 盡量寫成直接 copy 貼上也可以使用的(還不按讚按起來)。

但前端就是會因為各網頁情況而有所調整,如果套上去有問題,就問問身旁的工程師朋友囉,讓我們有點存在感(但請不要有問題才找我們,出去玩卻都不約)


抓 Google Sheet 儲存格資料

以前寫過二篇是怎麼抓 Google 試算表的資料:

如何用Google Excel當作資料庫

用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」:

選 Anyone, even anonymous
選 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 的話再找看看有沒有外掛可以直接使用囉。

Summary
用 GA Spreadsheet Add-on 製作網站訪客人數功能
Article Name
用 GA Spreadsheet Add-on 製作網站訪客人數功能
Description
本篇大綱:本篇要解決的問題。安裝外掛 Google Analytics。建立報表 Create new report。執行報表 Run reports。設立排程 Schedule reports。抓 Google Sheet 資料。用 JavaScript 取得資料,塞入頁面中。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Google Sheets

Google Sheets 略過空白格重整資料

API Front-End

用 Google Apps Script 寫一個 LINE 登入功能:上篇 – 前置作業

Bot Slack

Slack 通知功能 純靜態

Apps Script Google

Google Apps Script 讀寫 Cloud Firestore 資料

Front-End

Auth0 Universal Login,做一個自己的會員註冊、登入功能

Vue

Vue.js 用 computed 跟 filter 做一個簡易搜尋功能

Bot Slack

Slack 通知功能 可互動

Front-End

File API 客製上傳檔案按鈕 / input file

Firebase Google

用 Firebase Authentication 做一套簡易會員系統 – 電子郵件 密碼

Front-End

滿版圖片背景、影音背景

本站準備替換留言功能,投票調查中,歡迎 參與投票

訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言

Let's Write

前端工程師 Augustus 的學習筆記 — solving problems, in simple ways.