Skip to main content

網站 A/B Testing 工具介紹與應用

什麼是 A/B Testing?為何要做 A/B Testing?

在網站開發上,「如何達到最佳的介面/設計/流程/動線」,一直是最重要的課題之一。在過去,一般都仰賴產品設計者的直覺,並沒有一個科學化的方式來確認網站的最佳化。為了解決這個問題,網路業界提出了 A/B Testing 概念,一般流程如下:

  • 網站開發者針對同一功能頁面(如:商品頁),開發 A、B 二套不同內容,並套入 A/B Testing 機制。
  • 網站使用者進入某一頁面時,A/B Testing 機制會隨機將使用者導到 A 或 B 頁面。
  • A/B Testing 機制會紀錄使用者在 A 或 B 頁面的有效事件,如:結帳,或將商品加入購物車。
  • 在一定時間後,利用導流人數與有效事件,產出報告以確認 A/B 頁面何者有效。
  • 選擇有效的頁面,套用至全站,並準備進行下一次的 A/B Testing。

A/B Testing 流程

借由上述流程,網站規劃進入了數據化的時代,不再是瞎子摸象,而是能有效驗證所有變動的影響多寡,使網站往正確的方向演進。

A/B Testing 工具:Google Analytics Experiments (內容實驗)

A/B Testing 的實作,需要導入一個工具或架構,處理流量分配、動作記錄、產出報表等工作。目前業界最被廣泛使用的 A/B Testing 架構,是由 Google 推出、整合在 Google Analytics (GA) 下的 Google Analytics Experiments「內容實驗」架構。

GA (內容實驗) 設定

GA「內容實驗」有著比一般 A/B Testing 工具更強大的功能,包括:

  • 測試頁面 (A/B Testing 中的 B 頁面) 不限一個,最多可設定 10 個,並可指定每個頁面的流量比例及流量的導入細節。
  • 完善的細節處理,包括 SEO、網頁轉導等
  • 科學化的數據分析,包括「多選項吃角子老虎機器」的統計方法等
  • 與 GA 的完美結合,包括事件定義、報表整合等。

91APP A/B Testing 實做

在電子商務中,一個公認有效的數據,是網站的「轉換率」,一般電子商務轉換率公式為:

轉換率 = 下單的使用者 / 所有的使用者

有效提升轉換率,是所有電商網站的共同目標。電商轉換率有許多因素影響,其中網站的動線/設計/功能,是非常重要的一環,也是 A/B Testing 能發揮功能之處。

GA「內容實驗」進階設定

GA「內容實驗」提供了許多設定,能提供優化的網頁行為。91APP 利用了下列的進階設定:

  • 避免網頁重導
    在原本的 GA「內容實驗」設定中,使用者都會先進入 A 頁面,再重導到 B 頁面。在許多的情境下 (如:網路或網頁速度慢),這樣的行為會造成使用者的困擾,也會干擾實驗本身 (B 頁面有先天劣勢)。91APP 在實做中利用了 GA「內容實驗」的 JavaScript 功能,來避免這個問題。
  • Google Tag Manager (GTM) 整合
    在 A/B Testing 中,一般都需要改動程式,因而需要配合程式佈署相關作業,無法快速靈活測試及上線。91APP 使用 Google Tag Manager (GTM),應用 GTM 可以在不佈署新程式下,即時新增 JavaScript 的功能,將 GA「內容實驗」測試程式埋入 GTM 中,快速執行 A/B Testing。

91APP GA「內容實驗」說明

以下附上 2 張商品頁的示意圖,第一張是原頁面,第二張有加上「商品銷售時間倒數計時」區塊,希望加強客戶購買欲,增加轉換率。但這功能也有可能造成使用干擾,反而會降低轉換率。這次的 A/B Testing 範例,就是要確認此區塊的效果。

轉換率
原商品頁
測試商品頁
測試商品頁

GA「內容實驗」設定步驟如下:

  1. 首先,在GA 的管理介面中,選擇側欄的「行為」->「實驗」,建立一筆新的實驗內容。4
  2. 接下來設定實驗的內容。在此我們利用 GA「內容實驗」的 JavaScript 功能來處理實驗內容呈現:A/B 頁面網址都一樣,利用 GA「內容實驗」提供的 JavaScript 來做頁面內容切換。5
  • 接下來取得「實驗編號」,並啟動實驗。6
  • 取得「實驗編號」後,一般應該要埋入網頁原始碼中。在此我們利用之前已埋入網站的 GTM,將實驗編號帶入 GTM 的自訂 HTML 代碼內容中。7
  • 在GTM中,設定要觸發事件的相關頁面。8
    9
  • 最後存檔並發佈 GTM 內容
    10
  • 最後在實驗執行一段時間後,可以於 GA 的實驗內容裡查看執行報告,確認轉換率改善的方向。

    實驗結果報表
    實驗結果報表

結論 – 數據會說話,但…

從 A/B Testing 工具快速興起之後,「讓數據來說話」一直是處理介面的最高準則。就筆者觀察,由於資源與時程的限制,目前台灣在「數據化」上,還是有很大的努力空間。不過也要提醒大家,「過猶不及」,如果每一種功能都只用數據,並不是一個最佳的處理方式。

換言之,同仁的智慧與想法,還是最重要、最有價值的資產。如果你也想與一群優秀的同仁共事,打造出不一樣的產品,歡迎各位一同加入我們

搶攻行動商機,現在就加入 5,000 家已在網路開店的品牌行列!
分享至:
林 大維
91APP 研發副總,擁有十多年軟體開發經驗,專注在軟體開發流程與技術管理。

掌握最新電商脈動,加入 91APP 品牌全通路學院!

免費獲得最新市場趨勢、行銷技巧與資源,直接送達您的信箱。

完全免費,可隨時取消。
搶攻行動商機,現在就加入 5,000 家已在網路開店的品牌行列!