【Google Analytics 筆記】解決一頁式網站 Bounce Rate 失真的問題

Bounce Rate(跳出率)在 Google Analytics (以下簡稱 GA)中是用來評估網站表現很重要的指標,它的定義是「網站造訪只看一頁的比率」,對於一般網站而言,Bounce Rate 可以有效檢測訪客對於網站內容是否感興趣,然而對於目前很流行的一頁式網站來說,除非使用者重新載入頁面,不然頁面瀏覽數只會停留在一次,Bounce Rate 往往高達 90% 以上,這導致一頁式網站的 Bounce Rate 無法反映使用者真實的「跳出」狀況。

今天要教大家寫 JavaScript 解決這個問題,閱讀本篇需要一些基礎的 HTML + JavaScript (jQuery) 的知識。

如果你沒有技術背景,別擔心,把這篇文章交給你們家的前端工程師看就可以了,他會知道該怎麼做。如果你想要成為一個有基礎程式能力的行銷人員,可以考慮參加 ALPHA Camp 的10週數位行銷實戰營,裡頭也有專為行銷人員設計的程式課程,那就讓我們進入正題吧!

從定義開始

首先,我們先釐清一下 GA 對於 Bounce(跳出)的定義:

「 在一次 Session (造訪)中,如果瀏覽次數只有一次,這次造訪就算是跳出,如果瀏覽兩頁以上,就不算跳出。」

一般而言,使用者只有點擊其它頁面或是重新刷新時才會產生新的瀏覽次數。如果我們可以透過某種機制,讓訪客瀏覽一頁式網站時,捲動到某個區域以下就產生一次瀏覽次數,這次的造訪就不算是跳出了,也會同時修正 Bounce Rate 失真的問題。

一頁式網站之所以會流行,其實是因為在行動上網的時代,使用者的瀏覽習慣從「點擊」轉換成「滑動」,為了因應這個趨勢,前端工程師才會把內容集中在同一頁,讓使用者用滑動的方式就能看完所有內容,從這個角度來看,一頁式網站的本質上是「多個分頁」的集中版本,所以說,透過 JavsScript 的修正,讓使用者滑完一頁式網站時產生多個瀏覽次數,邏輯上並沒有問題。

具體程式寫法


Step1: 先載入 jQuery

本方法會需要用到 jQuery 中的函式,所以要先載入 jQuery 的 JS 檔,在這邊推薦使用 Google 的 CDN。

Step 2: 定義區塊高度

接著我們要定義頁面區塊的高度 ,我們先假設一頁式網站有四個區塊,如下所示:

現在我們希望使用者在捲到第二個區塊以下時,系統會自動產生一次頁面瀏覽次數(pageview),我們可以先宣告一個變數,把區塊一跟區塊二的高度儲存起來:

var stored_height = $('#section1').outerHeight() + $('#section2').outerHeight()

看到這邊可能會有人問,為什麼不用固定高度(固定 px),而要用 jQuery 抓取物件的高度,這是因為如果你的網站有做 RWD,這些物件的高度會隨著螢幕寬度改變而不同,用固定高度的話就不準了。

Step 3: 在螢幕捲動超過一定高度,創造一個 pageview 


接下來我們要利用 jQuery 中的 scrollTop 函式,來取得目前使用者的「捲軸上方高度」,並且在捲軸上方高度大於我們在 Step2 所定義的區塊高度時,創造一個 pageview:

var stored_height = $('#section1').outerHeight() + $('#section2').outerHeight();

 if $(window).scrollTop() > stored_height {

  ga('send','pageview');

}

(創造 pageview 的函式來自於 GA 的 JS 檔,所以這段 code 必須放在 GA 的追蹤代碼之後)

到這邊還沒結束,因為我們要讓捲軸上方高度(scrolltop)隨著使用者捲動頁面的時候動態變化(不然網頁讀取完後,它的值會一直維持在0),這時候會需要用到 jQuery 的 bind 函式:

var stored_height = $('#section1').outerHeight() + $('#section2').outerHeight();

$(document).bind('scroll',function(){

 if ($(window).scrollTop() > stored_height) {

  ga('send','pageview');

 }

})


Step 4: 設定停止迴圈的條件 


到這邊大致上已經完成了,但是接下來會產生一個問題,剛剛為了動態偵測「捲軸上方」的高度,我們利用了 bind 這個函式,這會使得使用者在滑動捲軸到特定高度以下時,會不斷執行 function 內的指令,如果沒有設定停止迴圈的條件的話,系統會一直跳針增加 pageview,這不是我們想看到的。

要處理這個問題,可以增加一個預設值為 0 的變數 a,在執行 GA 創造 pageview 的函式之後,把 a 的值改為 1,然後在一開始的 if 條件加上 a== 0,如以下所示:

var stored_height = $('#section1').outerHeight() + $('#section2').outerHeight();
var a = 0;

$(document).bind('scroll',function(){

 if (($(window).scrollTop() > stored_height) && (a == 0)) {

ga('send','pageview');

  a = 1;

 }

})

這麼一來,就可以避免系統一直跳針增加 pageview 的問題。


Step 5: 讓 code 在 html 檔案被完整載入完之後才執行



如果你把這段 code 埋在 <head></head>之間,那這段 code 會在 <body> 被讀取前執行,這樣我們的第一行 code 會出現問題:
var stored_height = $('#section1').outerHeight() + $('#section2').outerHeight()
因為 ID 為 section 1 還有 section 2 的 HTML 物件,在電腦還沒讀取 <body> 前等於是不存在的,我們必須要加上 ready 這個函式,讓 code 在 html 檔案被完整讀取完之後才執行:
var stored_height = $('#section1').outerHeight() + $('#section2').outerHeight();
var a = 0;
$(document).ready(function(){
 $(document).bind('scroll',function(){
   if (($(window).scrollTop() > stored_height) && (a == 0)) {
    ga('send','pageview');
    a = 1;
   }
 })
})

這樣看起來 code 有點亂,我們可以自創一個函式,把該執行的指令模組化:
function fixBounce(){
 var stored_height = $('#section1').outerHeight() + $('#section2').outerHeight();
 var a = 0;
 $(document).bind('scroll',function(){
   if (($(window).scrollTop() > stored_height) && (a == 0)) {
    ga('send','pageview');
    a = 1;
   }
 })
}

$(document).ready(fixBounce);

到這邊,我們該寫的代碼就全部完成了。

除了一頁式網站,其實一些部落格或是專做內容的媒體網站,也會有 Bounce Rate 失真的問題,使用者進來你的網站,是為了「閱讀」,如果他認真完整地閱讀完一篇文章之後離開,而 GA 把這次造訪視為「跳出」 ,那不是挺奇怪的嗎?你可以在使用者閱讀文章 80% 時,增加一個 pageview,具體的做法跟上面一樣,只是要改變儲存的高度,在此就不贅述了。

其他備註



1)使用這段 code 的網站,pageview 計算方式會不太一樣,在做這件事之前請跟你的 marketing 同仁溝通,不然他們看到暴增的 pageview 可能會丈二金剛摸不著頭腦 XD

2)你可以把ga('send','pageview')這段 code 替換成任何你想要的 code,像是 GA 的 event、Facebook 的 conversion pixel 等等。

3)經實驗證明本段 code 是有效的,如果大家在撰寫程式碼的時候有什麼問題,可以在底下留言回覆。

如果你不希望動到 pageview,但又想要修正 Bounce Rate 的問題,可以使用 GA 的 event。一般而言,event 都被歸類為互動事件,一旦觸發本次造訪就不會被視為跳出,所以你可以把 code 改成下面的形式:
function fixBounce(){
 var stored_height = $('#section1').outerHeight() + $('#section2').outerHeight();
 var a = 0;
 $(document).bind('scroll',function(){
   if (($(window).scrollTop() > stored_height) && (a == 0)) {
    ga('send','event','fix-bounce-rate','scroll','over 50%');
    a = 1;
   }
 })
}

$(document).ready(fixBounce);

以上面的 code 為例,一旦捲動超過第二個區塊,就會觸發一個 event,後面的三個參數是自定義的,分別是 Cetogory、Action 和 Label,有興趣的朋友可以參考一下 GA event 官方文件。

Photo Credit:blastam.com