新增網頁推播通知 Google Optimize 教學 | 網頁加橫幅 2

新增網頁推播通知 Google Optimize 教學 | 網頁加橫幅

在【Google Optimize 教學 網頁怎麼做 A/B Test?免費網頁流量測試】的文章中,介紹了網頁中好用的A/B Test的工具 Google Optimize,此篇文章會將詳細介紹
Google Optimize 5大各體驗類型中,添加橫幅 (Add a banner to your website)的操作步驟。與其他體驗像A / B版本測試、多變數測試不同,添加橫幅除了有A/B Test的功用,更多時候還是用於網站想要像使者布達某些重要的資訊。

Google 官方文件的使用建議:使用簡單、明瞭的用詞,讓使用者直接注意到簡短、重要的資訊。這個橫幅的用法可以用在像是臨時的服務變動、時間更動、特殊提醒、拍賣訊息等要。在Google Optimize裡還可以結合特定的塞選方式,呈現特定的橫幅訊息。

使用時機:有一項臨時或重要的變動,想要提醒特定或是全部的使用者。

  • 當電商或餐廳想要讓使用者直接知道如何購買商品,可以寫上電話、現在免運、限時特價等資訊
  • 營業時間臨時有變更,需要使用者注意
  • 網站重要的政策、條款等更新通知
    *以上使用時,都可以塞選特定的使用者也可以選擇只呈現在單一頁面或是整個網站的頁面。

舉例:在疫情時間,想要提醒「台灣區域的」使用者,進入網站的注意事項。在Google Optimize中就會設定,只要使用者從台灣網路進入,就會有上方的通知。

Google Optimize添加橫幅 (Add a banner to your website)
添加橫幅 (Add a banner to your website)會在網頁上方呈現通知

添加橫幅 教學步驟 | Google Optimize

步驟一、建立帳戶
登入Google Optimize最佳化工具(連結在此)的頁面後,系統會引導建立帳戶,並導入要做測試的頁面。導入完成後,會有下圖的介面,包含:容器名稱、執行中的測試、容器ID,也可以隨時再加入容器、管理使用者。

新增網頁推播通知 Google Optimize 教學 | 網頁加橫幅 3

步驟二、建立體驗 (體驗=測試)
1. 名稱:輸入自己可以辨別的名稱
2. 網址:輸入想要編輯的網址
3. 選擇要建立的體驗 (此篇為添加橫幅的教學文,其他體驗的教學文請點此)

新增網頁推播通知 Google Optimize 教學 | 網頁加橫幅 4

步驟三、進入設定介面 (這邊先認識每個介面,下面會有每個介面的操作教學)
A. 完成步驟:總共會有4個步驟,這裡會顯示哪些步驟完成了
B. 網站變更:點擊右方按鈕,可以開始編輯、預覽在各個裝置上的畫面
C. 指定網頁:想要在哪個網頁上做測試

新增網頁推播通知 Google Optimize 教學 | 網頁加橫幅 5

D. 指定對象:可以設定哪些管道、特徵等,自訂變數進來的使用者,觀看到調整過後的網站
E. 說明:留言給團隊的地方,方便大家知道這次的測試內容
F. 評估:串聯GA後,可以統一在GA後台看到數據

新增網頁推播通知 Google Optimize 教學 | 網頁加橫幅 6

G. 設定:確認工具是否有安裝完成、開啟提醒事件

新增網頁推播通知 Google Optimize 教學 | 網頁加橫幅 7

步驟四編輯頁面
點擊 【B網站變更】右方的「編輯」按紐,就會進入到網頁的編輯畫面,點知道了就可以開始編輯。
*若還沒有安裝Google Optimize的chrome插件,系統會指引你安裝,只需要跟著安裝完畢即可。

新增網頁推播通知 Google Optimize 教學 | 網頁加橫幅 8

直接點擊文字就可開始編輯,依序編輯完成後,點選右下方的完成按鈕。系統會先預設整個橫幅是<header>,裏頭有標題<h1>、段落<p>與連結<a>3個部分。

新增網頁推播通知 Google Optimize 教學 | 網頁加橫幅 9
新增網頁推播通知 Google Optimize 教學 | 網頁加橫幅 10

橫幅的位置,預定是在最上方,也可以自由調整位置。只要點擊畫面右上方的「設定」->勾選「重新排序不在目標內的元素」 -> 就可以自由移動橫幅位置。

新增網頁推播通知 Google Optimize 教學 | 網頁加橫幅 11

橫幅編輯完成後,也可以調整其他元件,像是更改文字、調整按鈕、變換圖片。最後按有上方的儲存按鈕就成功儲存囉!

新增網頁推播通知 Google Optimize 教學 | 網頁加橫幅 12

步驟五、確認2個工具有安裝好
1. 如果網站已經有使用GTM,那這邊只要確認GTM有串聯Google Optimize就好,不需要單獨在埋一次這裡的OPT代碼
2. 安裝Chrome擴充功能,編輯頁面的時候,系統也會強制引導你安裝

新增網頁推播通知 Google Optimize 教學 | 網頁加橫幅 13

步驟六、開始測試
回到最上方,右上角有一個開始按鈕,系統內定的時間是3個月,可以點選左邊的時鐘icon自由調正。根據Google 官方文件建議,實驗應該至少滿足以下條件之一:時長至少2週或至少有一個變化版本有95%的概率超過基線

新增網頁推播通知 Google Optimize 教學 | 網頁加橫幅 14

步驟七、閱讀報表
這邊我是以A/B te這邊我是以A/B tests的為範例,報表會寫出測試的版本獲得的工作階段與瀏覽量(也可以到GA介面看更詳細的數據),右邊的最佳化數據分析,如果像我一樣資料不足,就沒有可以參考的數據了。

新增網頁推播通知 Google Optimize 教學 | 網頁加橫幅 15

Google Optimize 詳細介紹:網頁怎麼做 A/B Test?免費網頁流量測試

實用金融工具推薦
海外匯款超低手續費,還倒轉現金回饋-TransferWise教學
Wirex卡實測(含推薦碼)獲得雙倍刷卡回饋,還有超低外幣匯率
Wirex加密貨幣信用卡介紹,海外刷卡雙倍回饋

Leave a Comment

Your email address will not be published. Required fields are marked *


Scroll to Top