Google Optimize安裝使用教程

Photo of author
Written By CMO

去年10月,HubSpot One曾經介紹了Google Optimize進行邀請制測試的消息,同時HubSpot One也介紹了Google Optimize的一些特性。 3月的最後一天谷歌終於宣布免費版的Google Optimize對所有人開放了!

Google Optimize免費版正式發布
Google Optimize免費版正式發布

作為Google Analytics的重要組件之一,Google Optimize對行銷者而言並不單單是一個A/B測試工具,更是一個個性化的用戶體驗工具。目前Google Optimize還未發布中文版,本文將以英文界面介紹Google Optimize的安裝和使用。

還沒有賬號?你可以在https://optimize.google.com/用你的Google賬號激活使用。

Google Optimize的安裝

進入Google Optimize之後你先要新建一個“容器” – Container。這個概念和Google Tag Manager是一致的,其實整個Goolge Optimize的原理就基於GTM,因此Google Optimize的Container ID也是以GTM開頭的。根據嚮導我們可以新建我們的“實驗” – Experiment,並且綁定我們的GA賬號,然後是代碼安裝。

Google Optimize安裝過程中可以綁定GA賬號
Google Optimize安裝過程中可以綁定GA賬號

Google Optimize更改頁面內容是通過頁面讀取加載時更改DOM組件實現的,可以理解為一邊讀取頁面一遍修改頁面。因此將安裝代碼放在頁面的越靠前越好,最好是緊跟在字符集聲明<meta charset>之後。比如,你可以放在<meta charset=”UTF-8″ />之後。

如果你正在使用GA,那麼Google Optimize的安裝非常方便。因為它只是一個GA的插件,你需要的僅僅是一行代碼。 (如果你沒在用GA,那你只好開始使用GA了):

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

這行代碼放在新建ga對象和發送pageview數據之間。到這裡我們雖然已經安裝完了,不過卻不是推薦的安裝方法。因為我們還沒有安裝隱藏頁面的增強特性。

為什麼要隱藏頁面呢?因為我們知道頁面是異步載入的,如果你的Google Optimize還未加載或執行頁面,原版內容就出現了,就會產生頁面內容在執行後眼睛一眨突然改變的現象,這種現象叫做page flicker 。我們隱藏頁面就是為了等改變發生以後再顯示頁面。實現這個增強特性的代碼叫作page-hiding snippet 。當我們加上了這個增強特性後,完整的代碼如下所示:

含頁面隱藏代碼的完整的Google Optimize推薦安裝代碼
含頁面隱藏代碼的完整的Google Optimize推薦安裝代碼

把GTM的Container ID和GA的Property ID替換成你的Google Optimize的Container ID和GA的Property ID便可生效。最後提醒一句,你只要把代碼放在你想要測試的頁面即可,其他頁面不需要更改。

在使用GTM的同時使用Google Optimize

就如我們剛才所說明的,Google Optimize的代碼需要放在非常靠前的位置才能保證優先加載運行。因此如果你使用了GTM,並且通過GTM來新建Google Optimize Tag來調用Google Optimize代碼,那麼一定會造成延遲。這是因為頁面先要加載GTM的容器。所以,在同時使用GTM時,HubSpot One還是推薦你使用上面我們介紹的推薦方法安裝,並在該測試頁面避免調用Universal Analytics的Pageview Tag

如果你實在想要用GTM來調用Google Optimize標籤,而且可以忍受效果的非最優化,你可以使用GTM中預定義的Google Optimize標籤。 (不過你還是需要手動把page hiding snippet加入頁面開始處,而且請注意page hiding snippet中的Container ID不再填Optimize的Container ID,而是填GTM的Container ID 。因為你是通過GTM來調用Optimize!)

在此標籤(Tag)中,你要填入GA的Property ID和Optimize的Container ID。然後把你在UA的PageView中所填的那些More Settings一併複製過來後直接保存。這裡你不需要給這個Tag賦一個Trigger,因為你可以用Pageview Tag來調用它。具體的方法如下:

在觸發Pageview標籤之前觸發Optimize標籤
在觸發Pageview標籤之前觸發Optimize標籤

建立實驗並部署變量

當我們新建一個Experiment之後,你自然會得到一個Original,接下來需要建立你的Variant。 Google Optimize提供了WYSIWYG(所見即所得)的編輯器。前提是你使用Chrome瀏覽器並安裝Google Optimize的插件:

Google Optimize的Chrome插件
Google Optimize的Chrome插件

安裝完之後你就可以“點哪改哪”了。舉個例子,我們把HubSpot One首頁的某一個標題改成粗體和紅色:

Google Optimize頁面編輯器
Google Optimize頁面編輯器

保存後就成為一個原版的“競爭者”。設定好投放比例之後,我們可以設定目標。免費版的目標是預設的,包括了你GA中設定的Goal,會話時長,頁面瀏覽數以及跳出率。

萬事俱備後,我們就可以開始測試(Start Experiment)啦!

付費版Google Optimize 360的重要特性

相對於免費版的Google Optimize,付費版的Google Optimize 360最重要的功能是Google Analytics audience targeting。也就是說這個功能才是真正意義上使Google Optimize不同於其他頁面A/B測試工具的功能。有了Audience Targeting,你可以對不同群體使用不同版本的頁面,不同版本的行銷訊息。免費版卻只能按照一個百分比來設置。

GA和Google Optimize的整合與數據使用
GA和Google Optimize的整合與數據使用

如果你經營一個大型網站,非常需要對不同用戶改進用戶體驗的話,Google Optimize 360是一個極佳的個性化工具。 Audience Targeting才是谷歌Google Analytics 360中的精華部分之一。考慮氪金吧!