Make A/B Tests with Google Optimize

Google Optimize 是 google 最近主推的網站實驗工具,在推出這個工具之前,要建立 A/B test來觀察使用的行為差異,只能直接於 google Analytics中的「行為」->「實驗」的方式建立實驗,並且填入非常多的自定義 javaScript以及 html來對頁面中要做出差異的元素進行控制與修改,例如要測試不同背景顏色的「導覽列」是否會影響使用者的使用,就對部分使用者的 DOM下達以下指令。

document.getElementsByClassName(“nav”)[0].style.background = “yellow”

這個使用情境下,使用人員必須要有一定的程式基礎,對於一般使用者可能較不親切,另外, google已經宣佈將會慢慢由 google optimize來接管負責建立實驗的角色,再由 GA來進行統計以及分析。

這篇文章記錄了如何透過 google tag manager(GTM) 來實做一個簡單的 google optimize A/B test。整個流程會是這樣:

*以 google optimize 建立實驗

*以 google tag manager將實驗代碼嵌入至網頁中

*由 google analytic進行事件行為的統計以及分析

1.首先登入至 optimize

https://optimize.google.com

2.登入後應該會看到「我的容器」

第一次進來應該是沒有東西的,先從右上角按「+」新增容器。

3.新增好容器之後就可以在容器中點選「建立實驗」,實驗命名就輸入想要測試的實驗,例如「導覽列顏色測試」之類的,實驗類型部分當然是先選A/B版本測試啦~其他的有空再來研究。

4.剛建立起來還是只是草稿的狀態,在這邊先點擊「新增變化版」,並且取名為「黃色導覽列」、「藍色導覽列」之類的。

5.接著準備對新增的變化版本進行修改,請點擊右邊紅色的「0項變更」字樣,網頁會跳轉到你設定的預設頁面,並且開啟一個所見即所得(WYSIWYG)的頁面編輯器,只要點擊你想要設定的元素,並且在右下角的「編輯元素」中對其進行調整即可,也可以拖曳元素進行重新排列,如果懂CSS的話,推薦可以直接點選畫面右上角的「編輯CSS」,直接對CSS進行修改。其實這個編輯器應該還滿多可以玩的,可以再多試試看。在這邊我只先把某頁面的導覽列從原始版本的白色改成黃色。修改完之後就按個儲存吧。

6.新增好變化版本之後應該會發現系統預計將使用者平均分配到各種不同的變化板本,兩個版本就各自50%,三個版本就各自分33%,當然,這裡也是可以點擊進去修改的。

7.建立完變化版本之後,設定本次要測試的目的,例如想要知道各種配色的導覽列是否影響工作階段長度,就設定如下。如果在畫面中有出現提示要求先串接GA帳號的話,也請務必先完成設定,畢竟後面的統計跟分析都是要靠 GA來進行的。

不過請特別注意,在設定 GA時的步驟中,「安裝最佳化工具外掛程式」這邊:

點擊「查看外掛程式」後會看到一個以直接塞程式到網站中的部署方式,如下圖,而在這裡由於我們網站的 GA code已經整合在 GTM系統之中,所以我們就是任性決定不照著他的作法,改為採用 GTM來部署這些最佳化工具外掛。這邊請先複製 ga(‘require’, ‘GTM-xxxxxxx’); 中,後面的這組 GTM-xxxxxxx,他就是我們這個實驗的唯一辨識 id。

8.開啟你的 GTM後台之後新增一個 TAG,名字設定暫定為「Experiment — different nav color」,並且在類別中選取「Google Optimize」,接著在 「Google Analytic分析追蹤編號」中填入該追蹤網頁的 GA id,在「最佳化容器id」中填入剛剛複製好的「GTM-xxxxxxx」。Trigger觸發器的部分根據需其需求做選擇,就暫且設定為所有頁面吧!

儲存之後前往 GTM的偵錯預覽模式,如果在 console中有看到 Tag順利的被 fire到這個頁面上,

並且從實驗的後台,也有看到一個使用者出現在他被分配到的版本上,基本上就是有成功啦啊啊!

9.之後就等著慢慢收資料吧~達到預定時間之後可以從實驗切換到「報表」頁面看結果,再根據原本設定的條件來判斷哪一種版本的頁面獲得比較好的成效。

Like what you read? Give Tsai Cheng Che a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.