Google Optimize安裝教學- 免費又好用的A/B Test工具！

根據awoo的經驗很多客戶都會遇過投下大把資金買廣告但是帶來的成效總是不理想，或是網站流量明明表現亮眼但是目標轉換率卻總是提昇不了。這時候我們或許可以從網站易用性測試（usability test）來檢查網站是否有設計不良的地方，判斷是什麼原因導致頁面轉換率不佳或是網站跳出率太高，而易用性測試除了可以透過訪談、問卷調查、熱點圖分析方式外，大家最常聽到的應該就是A/B Test了。

A/B Test 是什麼呢？

A/B Test 是透過讓不同的使用者進網站頁面後看到不同的元素設計(例如：購物車顏色大小、文字的內容說明)，藉此來分析那一種元素設計方式較能夠達成我們想讓使用者去完成的行為(例如：購買商品並結帳、填寫詢問表單)。

我們該怎麼執行A/B Test 呢

A/B Test 以前通常要透過工程師從程式端做處理，但這樣通常耗時且可能常常需要掏錢買飲料請工程師大大協助(Ｑ.Ｑ)，而仿間也有許多好用的A/B Test 工具（例如：VWO、Optimizely），可是雖然功能強大但通常價格收費不菲，對於小公司小本經營的老闆來說是個蠻大的負擔。好消息是去年開始Google將原先只有在360付費才能使用的A/B Test工具-Google Optimize開放免費使用版本，讓中小型網站主可以透過Google Optimize來幫網站做A/B Test (Ya~撒花)。

Google Optimize免費版跟付費版比較

當然免費版的功能沒有像付費版那麼強大，可以同時進行的實驗數目也被限制住了，但對於中小型網站主來說免費版的功能也還算夠用，且網站主可以先使用免費版熟悉A/B Test的執行策略及使用方針，等熟悉免費版本後，為網站帶來更多的效益時就可以考慮購買功能更加強大的付費版本。

參考文件：https://support.google.com/360suite/optimize/answer/7084762/

Google Optimize安裝教學

那麼我們現在開始學習怎麼安裝Google Optimize吧！！首先我們要先取得Google Optimize的帳戶代碼。

1. 建立Google Optimize帳戶
   Google Optimize工具：https://optimize.google.com/optimize/home
2. 與Google Aanalytics連結
   建立帳戶後會進入到這個頁面，建議這時我們先點選右邊的”連結資源”與Google Aanalytics連結。
   
3. 取得Google Optimize代碼
   點擊取得程式碼片段後，會看到如下圖的步驟說明，我們先把ga(‘require’,’GTM-xxxxxxx’)這段先複製起來。
   
4. 取得降低頁面閃爍代碼
   最後再把下圖程式碼複製下來，這段程式碼的用途是為了降低頁面閃爍，如果沒嵌入這段程式碼可能會造成使用者先看到Ａ設計頁面再閃跳成Ｂ設計頁面，這樣不管使用者體驗或是Ａ/B Test的效果都可能受到影響。
   
   注意：這段程式碼必須放置在Google Aanalytics追蹤代碼的正前方
   這時候我們需要的代碼都已經到手了！！下一步就是安裝到網站上去。

Google Optimize的三種安裝方式

• 非使用GTM安裝的通用Google Analytics追蹤代碼

如果你的網站的Google Analytics是使用通用GA代碼安裝的話，而不是透過GTM或是gtag代碼的話，建議可以使用這種方法。把之前步驟複製的代碼，添加到您的Google Analytics追蹤代碼，修改後的代碼如下所示：
ＰＳGTM-XXXXXX跟UA-XXXXXX記得更改為自己ID
<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>
<script>
(function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,’script’,’https://www.google-analytics.com/analytics.js’,’ga’);
ga(‘create’, ‘UA-XXXXXXX-X’, ‘auto’);
ga(‘require’, ‘GTM-XXXXXX’);
ga(‘send’, ‘pageview’);
</script>

• 使用gtag追蹤代碼安裝

由於現在新建的Ｇoogle Analytics追蹤程式碼都統一更改為gtag，所以假如你的網站是新架設的或是Ｇoogle Analytics最近才要安裝，那麼你的Ｇoogle Analytics追蹤程式碼可能會是gtag，就用下面的方式。
將原先gtag.js的
gtag(‘config’, ‘UA-XXXXXXXX’);
修改為
gtag(‘config’, ‘GA_XXXXXXXX’, { ‘optimize_id’: ‘GTM-XXXXXX’});
最後的代碼會變成如下：
<!– Global Site Tag (gtag.js) – Google Analytics –>
<script async src=”https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID”></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments)};
gtag(‘js’, new Date());
gtag(‘config’, ‘GA_XXXXXXXX’, { ‘optimize_id’: ‘GTM-XXXXXX’});
</script>

• 網站使用GTM

如果你網站統一都使用GTM來管理代碼的話，GTM有內建的Google Optimize安裝代碼。

但是如果直接使用GTM安裝可能造成網站性能變差，因為網站在讀取頁面時需要先讀取GTM的代碼然後再透過GTM啟動Google Optiomize，所以可能會導致網站的延遲時間延長而影響使用者體驗，除非在無法修改網站原始碼只能使用GTM的情況下才會建議這樣安裝。
延伸閱讀：為什麼需要GTM這類的標記管理工具？認識標記管理解決方案
所以如果不想使用GTM管理Google Optimize代碼影響效能的話，建議改用第一種的通用GA追蹤碼安裝，但是需要將代碼中的ga(‘send’, ‘pageview’);移除，避免跟GTM安裝的Google Analytics重複發送。
<script>
(function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,’script’,’https://www.google-analytics.com/analytics.js’,’ga’);
ga(‘create’, ‘UA-XXXXXXX-X’, ‘auto’);
ga(‘require’, ‘GTM-XXXXXX’);
ga(‘send’, ‘pageview’);
</script>
然後同樣在ＧＡ追蹤碼的上方加入降低閃爍的程式碼，就可以了。
以上三種安裝方式並不會影響Ａ/B Test的實驗效果，可以任意選擇適合你們網站的方式安裝，安裝完成後就可以開始建立實驗囉(呦屋～～)。
後續我們會再撰寫Google Optimize實驗設定的說明教學。
喜歡這篇文章的話請幫我們點個讚並訂閱awoo電子報，持續關注後續文章囉。