說到瀏覽器 Scrollbar 事件追蹤..
因 Google Analytics 追蹤技術的先天限制,導致訪客進入網站時、只要沒有前往或點擊下一頁連結,不只該名訪客跳出率會被計算100%,且不論該名訪客在進站頁面停留了多少時間,Google Analytics 紀錄的時間永遠都是0秒。
有關這計算方式目前在 Google Analytics 是無法克服。
但我們其實可以在網頁上設定一些條件、機制,就像是當訪客只要有挪動瀏覽器 Scrollbar 到某一個事先設定的程度(代表真的有在看網頁內容)時,就送出一個與網頁互動之事件。
如此一來,就算訪客進站但沒有前往下一頁或說本來就是一頁式網站,我們還是可以確認訪客有在瀏覽網頁內容,只是因為該頁面就能滿足訪客需求之類的原因、而導致離開網站的訪客數有多少了。
___回到這篇文章主題分隔線___
說到為什麼一進入網頁就離站是無法紀錄網頁停留時間,是因為 Google Analytics 是拿訪客抵達下一頁的時間點、扣掉進入首頁的時間點後為網頁停留時間如以下 Harris 先生製作的簡圖。
所以若訪客一進站就離開且也沒有抵達第二頁的時間戳,那麼網頁停留時間就只能顯示0秒。
至於說到這樣的計算方式是否會影響網站 SEO, 就可以參考我們前一陣子在 “跳出率、網頁停留時間、搜尋結果標題點閱率是否會左右 SEO 排名表現” 所提到的觀點。
而有關上述所提 Google Analytics 定義網站跳出率、停留時間之官方說明,可以參考 “Analytics (分析)說明 > 跳出率” 這篇文章中之介紹。
然後待會在每一個段落最後都會為其內容增加一些補充參考資訊如上,若剛好有檢視需求,就建議可以按著 Ctrl(或 ⌘ Command) 鍵再點選這些補充文章連結。如此就可以默默另開視窗,看是要先看或真的有需要時再到另一個頁籤查看!!
在網頁中寫入會觸發瀏覽器 Scrollbar 事件的一連串指令
如前言所提到的,我們現在要試著監控訪客抵達我們的網站後,到底有沒有繼續往下瀏覽,就要在網頁內寫入一連串的 Script 指令,以便訪客只要有利用瀏覽器 Scrollbar 往下瀏覽到我們設定的頁面比例後就送出事件。
而這段 Script 功能會因為 Google Analytics Tracking Code 的新舊版本而有點不同。
像是若是目前最新的 gtag.js 就可以寫入以下這段 Script:
<script>
function gtag_event() {
var flag_1=false;
var flag_2=false;
var flag_3=false;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > jQuery(document).height()*0.3 && !flag_1) {
gtag(‘event’, ‘Usability’, {‘event_category’: ‘Scroll’,’event_label’: ‘30%’});
flag_1=true;
} else if (jQuery(this).scrollTop() > jQuery(document).height()*0.6 && !flag_2) {
gtag(‘event’, ‘Usability’, {‘event_category’: ‘Scroll’,’event_label’: ‘60%’});
flag_2=true;
} else if (jQuery(this).scrollTop() > jQuery(document).height()*0.9 && !flag_3) {
gtag(‘event’, ‘Usability’, {‘event_category’: ‘Scroll’,’event_label’: ‘90%’});
flag_3=true;
}
});
}
jQuery(document).ready(function(){
gtag_event();
});
</script>
但若是較早之前的 ga.js 就可以參考以下這段 Script:
<script>
function ga_event() {
var flag_1=false;
var flag_2=false;
var flag_3=false;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > jQuery(document).height()*0.3 && !flag_1) {
ga(‘send’, ‘event’, ‘Usability’, ‘Scroll’, ‘30%’);
flag_1=true;
} else if (jQuery(this).scrollTop() > jQuery(document).height()*0.6 && !flag_2) {
ga(‘send’, ‘event’, ‘Usability’, ‘Scroll’, ‘60%’);
flag_2=true;
} else if (jQuery(this).scrollTop() > jQuery(document).height()*0.9 && !flag_3) {
ga(‘send’, ‘event’, ‘Usability’, ‘Scroll’, ‘90%’);
flag_3=true;
}
});
}
jQuery(document).ready(function(){
ga_event();
});
</script>
至於這段 Script 因為在整個頁面都載完後再觸發會比較完整,故通常都會建議寫在 </body> 之前。
此外是上述兩段追蹤碼最重要且可由大家自由變換的,就是在 “頁面比例設定” 以及 “事件 category & action & label 名稱的設定”。如比例上調整就是上述 jQuery(document).height()* 後面 0-1 之間的小數點,而事件名稱就是在 gtag( 或 ga( 後面的值。
而以上有關事件名稱、值與設定,可以參考 “站外連結點擊數追蹤事件設定,快速在後台編輯器完成版” 中的介紹(如題,裡面還有追蹤訪客到底會不會點擊站外連結的事件設定..)。
至於說到這 Script 與 jQuery 程式,我們在兩年前於 “事件設定 – 硬要追蹤無法追蹤的 facebook 讚與 Google +1 按鍵” 中也有提出一些應用與內容。
瀏覽器 Scrollbar 事件設定概念與日後檢視、分析建議
我們在上一段落中設定了三個階段的瀏覽器 Scrollbar 事件觸發條件,分別是只要瀏覽頁面比例超過30%就觸發,接著在 60%、90% 各會觸發一次。
但其實這個%數非絕對,單純以我們想要觀察什麼訪客行為而定。像是設定在 30% 就是我們認為這是訪客至少有稍微看過網頁內容的比例。而60%與90%的設定,則是除了可以看看有多少人看到約一半就離開、以及多少人願意看完大半內容之外,也可以跟 30% 事件總數比較,看看是否訪客只看一點點內容就想離開網站。
至於只要設定到90%即可(而不是100%), 則是因為現在有很多網站 footer 都有許多與頁面主題內容不完全相關或是廣告或全站連結之訊息,
所以若能瀏覽頁面資訊達90%,就幾乎已經檢視了所有的內容(畢竟現在很少有人真的會願意滾動瀏覽器 Scrollbar 到底部..)。
(所以若真的貴站有更多非該頁面主題內容之資訊,最高%數也可以改為80%或更低..)
設定完成後,一段時間後回到 Google Analytics 也就可以好好來檢視網頁目前有哪些改善空間了。
進一步分析是哪些流量來源比較容易觸發這些瀏覽器 Scrollbar 事件
如一開始所說,設定這些事件觸發條件,是為了要能夠確認訪客進入網站後是否至少有瀏覽該頁大半資訊以確認訪客價值。
除此之外,我們還可以利用 Google Analytics 最重要的流量來源分類功能,來檢視、比較是哪一些來源、媒介帶來的訪客價值較高。
也如上圖,因為我們都希望訪客進入網站後真的有好好的檢視網頁資訊(縱然沒有點擊、前往下一頁),所以就可以來比較到底哪些流量來源、媒介比較容易帶來較高品質的訪客。
未來我們也較能清楚分辨與比較是要將人力、資源投放在社群媒體、廣告、連結互換還是網站 SEO 上了。
一但設定瀏覽器 Scrollbar 事件, 江蕙 將會大幅影響跳出率
若能成功設定上述所提之瀏覽器 Scrollbar 事件,除了隨即能開始分析用戶實際瀏覽狀況外,應該會發現網站跳出率突然大幅降低。
主要原因是在 Google Analytics 觸發設定之事件後,預設條件是不算跳出的。
不過若真的還是有訪客一進入網站連 30% 頁面內容資訊都沒看就離開還是會計算跳出,所以、這一開始的最低門檻就可以視各位網站類型來調整嘍。
一方面是數據會超級龐大,另一方面是 Google Analytics 有最高事件觸發/計算限制。若超出可能會無法正常使用 Google Analytics.. orz
在今天瀏覽器滑鼠滾輪事件/目標追蹤之後…
我們今天是在網頁原始碼中進行 script 的寫入,也代表不只會增加設定門檻、複雜度,更也增加了許多了出錯的可能。
所以如同我們在 “年前轉換 Tag Manager, 如何快速分析應該比學不完的分析技術更重要” 、 “預覽 x 內建變數 x GTM, 任意追蹤頁面事件前的必備前置作業” 等 Google Tag Manager 系列文章的介紹,若能先將 Google Analytics 全面改為 Google Tag Manager, 那未來一切設定與微調都可以在 Google Tag Manager 後台設定完成。