如何整合 Amplitude 與 Google Data Studio,分析 WordPress 網站數據

結合 Google Tag Manager 與 Google 試算表,任何人都能輕鬆零成本入門網站數據分析

Daniel Lee
12 min readJul 8, 2021

最近做了一個 Side Project,產品本身是用 WordPress 建立,且已經有近千人的使用者數量,因此開始想要進行數據分析。而我在這個團隊裡就是負責建立產品數據團隊的成員,並基於過往經驗決定使用 AmplitudeGoogle Analytics(GA)作為資料庫以外的數據源。同時為了讓其他單位的成員也能看到相關維運數據,因此決定使用 Google Data Studio 建立數據儀表板(Dashboard),目標是希望能夠將流程自動化,減少溝通與維運成本。

Ps. Data Studio 目前已經更名為 Looker Studio

以下列出整個流程的大架構,可能有些人對某部分很熟悉,那就可以去看不清楚的地方即可,如果是完全沒有用過此類工具的人,建議邊操作邊參考流程以外,並多加閱讀其他參考資料。

1. 在 WordPress 上使用 Amplitude 追蹤行為事件
- Google Tag Manager for WordPress Plugin 安裝與基礎設定
- 建立 Amplitude Workspace 與設定 Data Source
- 使用 Google Tag Manager 埋設 Amplitude 事件
2. 使用 Google Data Studio 建立 Amplitude 數據 Dashboard
- 使用 Amplitude Syncs to Google Sheets Add-on 匯出數據
- 將 Google Sheets 資料匯入 Google Data Studio

簡單介紹一下 Amplitude,它是現在市面上最熱門的產品數據分析工具之一,可以在記錄使用者的行為之後產出各式各樣的報表,例如留存、轉換、同類群組分析等等。相較於以往的 GA,以行為而非頁面來分析更適合用在產品數據分析,近期 GA 4 推出後,也開始向此類工具看齊推出類似的分析功能,因此我也很期待 GA 4 之後的發展。

網路上 WordPress 跟 GA 的整合文章非常多,但會在 WordPress 上使用 Amplitude 的人超級少。除此之外,GA 跟 Data Studio 的整合當然沒問題,但網路上找到 Amplitude 要跟 Data Studio 整合的方法,不外乎自己要 Call Amplitude API 抓資料再匯入,不然就是要用付費的第三方工具,非常麻煩。因此我決定寫下這篇筆記,分享我們是怎麼一毛錢都不用花就做到的。

dashboard-sketch
如果你喜歡我的文章,可以按下面的拍手!用推薦 ID【daniellee2309】免費註冊 LikeCoin 並在帳號設定中驗證手機號碼,我就能因為你的鼓勵獲得一些收入

行為事件(Event):最常見的網站與 App 使用者行為追蹤方法

不知道大家有沒有想過自己的行為是怎麼被網站記錄下來的?以一個電商網站舉例,使用者在網站上通常會經過搜尋、查看商品頁、加入購物車、結帳等四個關鍵的步驟,而這個過程中每操作一個步驟都會觸發一個「行為事件」,把行為事件依序串在一起,就是一個「行為漏斗(Funnel)」。只要持續追蹤這個行為漏斗,電商網站就可以知道使用者在哪一步最容易離開購買流程。

本文就是講述怎麼讓 Amplitude 開始可以分析事件數據,並將這些數據導入到 Data Studio。

在 WordPress 上使用 Amplitude 追蹤行為事件

Google Tag Manager for WordPress Plugin 安裝與基礎設定

由於希望盡可能不動用工程人力,我們選擇使用 Google Tag Manager(GTM)作為我們「埋點」的核心工具。埋點/碼/標籤指的就是定義與設定事件的整個過程,而 GTM 是一個不用程式碼就能新增、編輯、管理代碼(標籤)的一個工具,因此受到許多行銷與網站分析人員的喜愛。一般而言 GTM 的前置設定還是需要前端工程師的幫忙,但是架設 WordPress 網站的使用者不一定都熟悉前端,因此有人開發了一個 WordPress 外掛,讓不會寫程式的人也能安裝 GTM 讓他們使用 GA 來監測網站數據。

這部分的設定簡單列一下,網路上有蠻多教學的可以再去參考看看:

  1. 進入 GTM 頁面建立帳號
  2. 進入 WordPress 控制台,搜尋外掛「Google Tag Manager for WordPress」第一個結果就是了,點擊立即安裝
  3. 安裝完成後進入這個外掛的設定,輸入自己的 GTM 容器 ID
  4. Container Code Part Placement 的地方選擇「頁面頁尾」(有可能會因此偶爾抓不到資料,但是比較方便)
  5. 儲存設定
wp-plugin

建立 Amplitude Workspace 與設定 Data Source

Amplitude 有基本的專案與權限管理設定,因此可以建立多個 Workspace。一個 Workspace 會使用一個 Data Source,因此官方建議大家除了正式專案用的 Workspace,也至少要多建立一個測試用的 Workspace,這樣在測試時所產生的事件資料才不會跟正式的資料混在一起。

  1. 先到 Amplitude 頁面中點擊左下角的「Data Source」
  2. 在 Data Source 頁面選擇「JavaScript SDK」
  3. 記下並複製 Install SDK 中的 JavaScript code,這段程式碼會讓事件資料(還有其他類型資料也可以,但暫時不討論)根據 API_KEY 傳送到你指定的 Amplitude Workspace
  4. 先在此頁暫停,開啟 GTM 繼續看下一階段的步驟
amplitude-workspace
Step 1
amplitude-data-source
Step 2
amplitude-js-sdk
Step 3

使用 Google Tag Manager 埋設 Amplitude 事件

GTM 有跟非常多的數據工具整合,但不包含 Amplitude。所以必須在新增代碼時結合剛剛的 JacaScript SDK 進行一連串設定,以下簡單列出所需步驟:

  1. 進入設定頁面後點擊左側欄位的「代碼」
  2. 點擊「新增」
  3. 在代碼設定中選擇「自訂 HTML」
  4. 點選後在代碼設定的欄位中會有一個空白處,貼上剛剛在 Amplitude 複製的 JavaScript code
  5. 回到 Amplitude 點擊 Next,然後複製 Sent First Event 區塊中的 JavaScript code,其中「EVENT_NAME_HERE」的地方就是你之後可以自由設定的事件名稱
  6. 把剛剛這段 JavaScript code 貼到剛剛代碼設定中的程式碼的最下方
  7. 在觸發條件中選擇 Page View 的 All Pages,這代表無論在網頁中的哪個頁面,你設定的事件就都會被觸發
  8. 為你的代碼命名並按下儲存
  9. 回到 GTM 首頁按下預覽,貼上你的 WordPress 網站網址,此時除了 GTM Tag Assistant 的頁面以外,會另外開啟進入偵錯模式的 WordPress 網站
  10. 當 WordPress 網站載入後,理論上就會因為達成我們設定的觸發條件而觸發代碼,此時行為事件就會被記錄到 Amplitude 中
  11. 回到 Amplitude,在 Log an Event 這一步的頁面下方,如果 Amplitude 收到的事件的資料,就會出現「We’ve received data from this source」的畫面,確認收得到資料後就按 Finish
gtm-html
Step 3
gtm-js-sdk
Step 4
amp-event-test
Step 5 & 11

使用 Google Data Studio 建立 Amplitude 數據 Dashboard

前面都是在建立基本的資料採集流程,接下來才是正題。我查了很久 Amplitude 到底要怎麼簡單的串到 Google Data Studio,沒想到最終最簡單的方式是先串到 Google Sheets,再從 Google Sheets 串到 Google Data Studio。

為什麼選擇用 Google Data Studio

建立 Dashboard 與資料視覺化的工具非常多,最常見的就是 Power BI 與 Tableau,且也都有免費版(功能較少)。這次選擇 Data Studio 的原因主要還是協作方便,而且資源整合算是完善。

要實現多人共編一個 Dashboard,上述三者中免費的選項應該是只有 Data Studio,這成為我覺得 Data Studio 很有競爭力的主要原因。要分享 Dashboard 給需求方查看也跟其他 Google 產品一樣分享連結即可。

由於是 Google 系的產品,支援的資料輸入管道非常多,包含 GA、Google Ads、Google Sheets,也支援從 PostgreSQL 與 MySQL database 接資料,應該是已經把基礎的商業需求場景涵蓋了。

data-studio-source

使用 Amplitude Syncs to Google Sheets Add-on 匯出數據

這是 Amplitude 官方提供的 Google Sheets 外掛,使用步驟如下:

  1. 先在 Amplitude 建立 Dashboard
  2. 在 Google Sheets 安裝這個外掛程式
  3. 在外掛程式中,點擊 Amplitude Sync to Drive and Sheet,再點擊 Start Exporting Amplitude Data,接著 Amplitude — Export to Sheets 的 Panel 就會開啟
  4. 在外掛中登入 Amplitude 帳號,就會出現 Dashboard 的名稱
  5. 選擇想要串接的 Dashboard 點擊 Add,接著 Google Sheets 就會新增一個工作表並出現 Dashboard 的資料,要注意這個工作表不能編輯到,不然可能會影響資料的同步
  6. 如果有需要更新資料,必需再次開啟外掛,然後在 Manage 的地方更新
  7. 如果只要部分的數字,或是要進行格式調整、計算等等操作,可以另開試算表分頁,串接 Dashboard 的數字
Step 5 & 6

這邊讓我覺得不方便的地方有兩個:

  1. 無法自動化同步,需要手動更新,這一點很傷的原因是我本來的目的是全自動化,但最後結果只能半自動化(需定期手動更新)
  2. 在 Amplitude 裡要看漏斗過去 N 日的資料,他會把 N 天資料整合在一起,並不會有 N 天中每一天的資料,因此串接在 Google Sheets 裡的資料也是如此。要看到 by Day 的資料需要使用 Amplitude 提供的 API 自己串接,或是整合 Snowflake 用 SQL-like 的工具取數,或是在 Amplitude 中使用 Event Segment 導出每日資料,再自己做處理

將 Google Sheets 資料匯入 Google Data Studio

最後一階段就簡單多了,因為 Google Sheets 跟 Google Data Studio 有原生的整合,所以網路上也有很多資料可以參考,以下就簡單列一下步驟,說明如何匯入 Google Sheets 的資料:

  1. 先建立一個空白報表
  2. 建立資料來源並選擇 Google Sheets
  3. 選擇自己有權限取得的試算表,如果沒有看到,先確認試算表有開啟權限
  4. 選擇該試算表下所需的工作表。如上一階段所說,建議先在試算表裡清洗你的資料,把需要的欄位格式都決定好,再匯入至 Data Studio
  5. 匯入之後可能欄位會長不一樣,那是因為 Google Data Studio 幫你選擇了資料呈現的維度,可以看看你所有的欄位是否出現在 Available Fields 的地方,有的話就是正確的匯入了
  6. 如果要開始進行資料視覺化,建議點擊新增頁面(Add a page)把視覺化結果和原始資料分開放,分享出去時原始資料所在的頁面可以隱藏,這樣的閱讀體驗會比較好
  7. 至於怎麼操作呈現出最後的視覺化結果不是本文重點,有興趣的就再去參考其他文章囉
sheets-cleaned-data
Step 5 的 Data Source
data-studio-import
Step 5 Imported Data

匯入資料之後,基本上就算完整從 Amplitude 到 Google Data Studio 的免費串接囉!之後只要到 Google Sheets 中按下 Dashboard 資料的更新,Data Studio 裡的數據也會在幾分鐘後一起更新。

以上就是本次的工具整合筆記,如果覺得喜歡記得幫我鼓掌,也不要忘記分享給你覺得有需要這個資訊的人!

如果你喜歡我的文章,可以按下面的拍手!用推薦 ID【daniellee2309】免費註冊 LikeCoin 並在帳號設定中驗證手機號碼,我就能因為你的鼓勵獲得一些收入

--

--

Daniel Lee
Daniel Lee

Written by Daniel Lee

Global Growth Product Manager @ Jodoo | UX/UI 新手村村長,清大服科所。最新文章:https://daniellee.work/