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
