首頁 找知識 分析優化. Google Optimize – 簡單做網站 A/B test 不求人

Google Optimize – 簡單做網站 A/B test 不求人

Google, Optimize , A/B test

說到 A/B test,大家一定對這個促進網站使用者體驗的實驗方法不陌生,A/B test 有第三方工具可以進行,而相信大家都知道 GA 本身已經有了"實驗“這個東西,最早也是 Google 拿來做A/B test 的。

前陣子,Google 又推出了 Google Optimize 這項產品,主要是協助使用者能進行網站頁面的實驗測試工作,它提供了相當多樣化的測試工具,而且可以直接在網頁上直覺的針對對照組進行修改,也大為減低要做對照組修改的麻煩,同時這次的 Optimize 也可串聯 GA,取代原有的"實驗“,可以直接在 GA 上觀察實驗結果。

如何安裝 Google Optimize 追蹤碼

首先進入 Google Optimize 之前,跟 Tag Manager 一樣,要創立一個 Container

再來請進行第二步驟的 Link Property, 將 Optimize 跟你的 GA 帳戶進行聯結

Google, Optimize , A/B test

接著,就是把追蹤碼嵌入網站裡了。
要嵌入追蹤碼,有兩種方式,可以使用 GTM 與非 GTM 的方式,這部分可以參考官方的 Optimize 追蹤碼安裝說明

1. 不使用 Tag Manager 安裝

這種方式請使用安裝碼嵌入的方式,首先你必須在你原本的 GA 追蹤碼的 ga (‘send’, ‘pageview’) 前一行增加一行新的追蹤碼

ga(‘require’, ‘GTM-XXXXXX’);

 

這行追蹤碼裡的 GTM-XXXXXX 是你的 Optimize Container ID, 其實直接點擊第三步驟的 “view snippet", 就可以直接複製裡面的完整追蹤碼取代原本的 GA 追蹤碼。

接下來,請在你的 GA 追蹤碼之前安裝如下追蹤碼:

<style>.async-hide { opacity: 0 !important} </style>
<script>(function(a,s,y,n,c,h,i,d,e){s.className+=’ ‘+y;h.start=1*new Date;
h.end=i=function(){s.className=s.className.replace(RegExp(‘ ?’+y),")};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,’async-hide’,’dataLayer’,4000,
{‘GTM-XXXXXX’:true});</script>

跟上述一樣,GTM-XXXXXX 請帶入 Optimize Container ID
安裝過程可參考 Google Optimize 官方安裝說明

2. 使用 Tag Manager 安裝

使用 Tag Manager 安裝是比較推薦的方式,直接在 GTM 的後台新增一個 Tag 就搞定了。
直接開啟 GTM 後台,新增一個標記,填上 GA 的追蹤編號以及 Optimize 的編號,觸發條件可以根據你的測試頁目的不同而設定,這邊我先設置全部網頁

Google, Optimize , A/B test

再來 Google 官方建議要安裝剛剛的第二段程追蹤碼,只是要注意這次把 GTM-XXXXXX 的部分要換成你的 GTM Container ID

Google, Optimize , A/B test

另外 Google 的官方規則建議這邊在設定時有一些注意事項

1. 設定 Optimize 的 Tag 時,其他設定、Advanced setting 的配置與 GA 追蹤碼 Tag 一樣的設定,因此這邊也請重新確認一下

2. 另外在 Optimize 的測試範圍內,若是有任何 GA 的 Page view Tag, 請到 advenced setting -> Tag sequence 將 “Fire a tag before XXX fires" 打勾,setup tag 選擇 Optimize 的安裝 Tag

Google, Optimize , A/B test

不過以上兩點,目前我所查到的 Optimize 安裝文章中,尚未有針對第二點進行說明,而且自己測試的結果如果不理會第二點似乎也是可行的,這點可能要請其他高手幫忙說明這個步驟的重要性。

如何設置 A/B test 實驗

以上準備就緒之後,就要準備來展開實驗
以下以做 A/B test 為例
按下 Create Experiment, 選擇 A/B test, 按下 Create 之後進入到設定畫面

Google, Optimize , A/B test

新增網頁對照組

假設我要新增一個網頁對照組,請按下 New Varient,取好對照組名後,點擊該對照組名,此時它會要你安 裝Optimize 的官方 plugin, 安裝了這個插件之後才可以正式啟用視覺化修改功能
這個功能非常方便,可以直覺的修改你要做實驗的呈現方式,因此很推薦安裝這個插件使用

Google, Optimize , A/B test

安裝好了之後就會進入到視覺化修改介面,針對對照組想修改的地方修改之後,按下 Done。

設定實驗目標數值

做實驗的目的,是為了要測試實驗結果是否有達成目標,因此在設定一項實驗前,要先了解實驗的目的為何?與之對應的衡量數值又是什麼?在 Objective 的設置中,你可以測量不同目標轉換、造訪數、停留時間、跳出率….等等。

並且可以設置兩個不同的衡量目標,在 Description and hypothesis 中,你可以針對這次的測試進行敘述

Google, Optimize , A/B test

設定取樣對象

設定好目標後,再來就是設定取樣的對象了
Target 這一欄可以讓你調整你的取樣方式、比例,以及對照組要在什麼條件下出現
同樣是根據你的實驗目的去調整
這邊的例子是預設出現條件只有在內容頁的時候才出現,因此針對網址進行調整

Google, Optimize , A/B test

調整好之後,按下 Save,確定一切設置 OK 後,按下 Start Experiment 開始實驗
官方推薦在實驗進行兩周之後再來觀察結果
不過在實驗進行過程中,隨時都可以觀察數據狀況

Google, Optimize , A/B test

你也可以透握 GA 的"實驗"來看實驗進行的狀況。

關於 Davis

正在數據分析、SEO、以及數位行銷的洋洋知識海裡載浮載沉之中,為了不讓自己迷失在知識的洪流之中於是建立了Davis的GA網站分析紀錄這個Blog, 紀錄自己的實驗與學習軌跡

大家都在看

跟華杉學品牌營銷導讀,台灣中小企業經營者必讀書籍

跟華杉學品牌營銷導讀,台灣中小企業經營者必讀書籍

一個企業如果一開始就活不下去,再多的理想與夢想都是空話,但一個理論或一個方法論,限制與後續該注意的地方,你能否看懂背後沒有表現呈現的部分,就是得像我這樣有經驗的導讀人整理後告訴你的部分了~

還想知道更多數位新知?快來訂閱 dcplus 關鍵分享報

您希望收到哪些資訊呢?