如何解決瀑布流網(wǎng)站 Bounce Rate 失真的問(wèn)題？
Bounce Rate（跳出率）在Google Analytics（以下簡(jiǎn)稱GA）中是用來(lái)評(píng)價(jià)網(wǎng)站表現(xiàn)很重要的指標(biāo)，它的定義是「網(wǎng)站造訪只看一頁(yè)的比率」，對(duì)于一般網(wǎng)站而言，Bounce Rate可以有效檢測(cè)訪客對(duì)于網(wǎng)站內(nèi)容是否感興趣，然而對(duì)于目前很流行的瀑布流網(wǎng)站來(lái)說(shuō)，除非使用者重新加載頁(yè)面，不然頁(yè)面瀏覽數(shù)只會(huì)停留在一次，Bounce Rate往往高達(dá)90%以上，這導(dǎo)致瀑布流網(wǎng)站的Bounce Rate無(wú)法反映使用者真實(shí)的「跳出」?fàn)顩r。
今天要教大家寫JavaScript解決這個(gè)問(wèn)題，閱讀本篇需要一些基礎(chǔ)的HTML + JavaScript（jQuery）的知識(shí)。
從定義開始
首先，我們先弄清楚一下GA對(duì)于Bounce（跳出）的定義：
在一次Session（造訪）中，如果瀏覽次數(shù)只有一次，這次造訪就算是跳出，如果瀏覽兩頁(yè)以上，就不算跳出。
一般而言，使用者只有點(diǎn)擊其它頁(yè)面或是重新刷新時(shí)才會(huì)產(chǎn)生新的瀏覽次數(shù)。如果我們可以通過(guò)某種機(jī)制，讓訪客瀏覽瀑布流網(wǎng)站時(shí)，卷動(dòng)到某個(gè)區(qū)域以下就產(chǎn)生一次瀏覽次數(shù)，這次的造訪就不算是跳出了，也會(huì)同時(shí)修正Bounce Rate失真的問(wèn)題。
瀑布流網(wǎng)站之所以會(huì)流行，其實(shí)是因?yàn)樵谛袆?dòng)上網(wǎng)的時(shí)代，使用者的瀏覽習(xí)慣從「點(diǎn)擊」轉(zhuǎn)換成「滑動(dòng)」，為了因應(yīng)這個(gè)趨勢(shì)，前端工程師才會(huì)把內(nèi)容集中在同一頁(yè)，讓使用者用滑動(dòng)的方式就能看完所有內(nèi)容，從這個(gè)角度來(lái)看，瀑布流網(wǎng)站的本質(zhì)上是「多個(gè)分頁(yè)」的集中版本，所以說(shuō)，通過(guò)JavsScript的修正，讓使用者滑完瀑布流網(wǎng)站時(shí)產(chǎn)生多個(gè)瀏覽次數(shù)，邏輯上并沒有問(wèn)題。
具體程序?qū)懛?/strong>
第一步:先加載jQuery
本方法會(huì)需要用到j(luò)Query中的函式，所以要先加載jQuery的JS檔，在這邊推薦使用Google的CDN。
第二步:定義內(nèi)存塊高度
接著我們要定義頁(yè)面內(nèi)存塊的高度，我們先假設(shè)瀑布流網(wǎng)站有四個(gè)內(nèi)存塊，如下所示：
現(xiàn)在我們希望使用者在卷到第二個(gè)內(nèi)存塊以下時(shí)，系統(tǒng)會(huì)自動(dòng)產(chǎn)生一次頁(yè)面瀏覽次數(shù)（pageview），我們可以先宣告一個(gè)變數(shù)，把內(nèi)存塊一跟內(nèi)存塊二的高度儲(chǔ)存起來(lái)：
var stored_height = $('#section1').outerHeight() + $('#section2').outerHeight()
看到這邊可能會(huì)有人問(wèn)，為什么不用固定高度（固定px），而要用jQuery抓取物件的高度，這是因?yàn)槿绻愕木W(wǎng)站有做RWD，這些物件的高度會(huì)隨著屏幕寬度改變而不同，用固定高度的話就不準(zhǔn)了。
第三步:在屏幕卷動(dòng)超過(guò)一定高度，創(chuàng)造一個(gè)pageview
接下來(lái)我們要利用jQuery中的scrollTop函式，來(lái)取得目前使用者的「卷軸上方高度」，并且在卷軸上方高度大于我們?cè)诘诙剿x的內(nèi)存塊高度時(shí)，創(chuàng)造一個(gè)pageview：
var stored_height = $('#section1').outerHeight() + $('#section2').outerHeight();
if $(window).scrollTop() > stored_height {
ga('send','pageview');
}
（創(chuàng)造pageview的函式來(lái)自于GA的JS檔，所以這段code必須放在GA的追蹤代碼之后）
到這邊還沒結(jié)束，因?yàn)槲覀円尵磔S上方高度（scrolltop）隨著使用者卷動(dòng)頁(yè)面的時(shí)候動(dòng)態(tài)變化（不然網(wǎng)頁(yè)讀取完后，它的值會(huì)一直維持在0），這時(shí)候會(huì)需要用到j(luò)Query的bind函式：
var stored_height = $('#section1').outerHeight() + $('#section2').outerHeight();
$(document).bind('scroll',function(){
if ($(window).scrollTop() > stored_height) {
ga('send','pageview');
}
})
第四步:設(shè)定停止循環(huán)的條件
到這邊大致上已經(jīng)完成了，但是接下來(lái)會(huì)產(chǎn)生一個(gè)問(wèn)題，剛剛為了動(dòng)態(tài)偵測(cè)「卷軸上方」的高度，我們利用了bind這個(gè)函式，這會(huì)使得使用者在滑動(dòng)卷軸到特定高度以下時(shí)，會(huì)不斷執(zhí)行function內(nèi)的指令，如果沒有設(shè)定停止循環(huán)的條件的話，系統(tǒng)會(huì)一直跳針增加pageview，這不是我們想看到的。
要處理這個(gè)問(wèn)題，可以增加一個(gè)預(yù)設(shè)值為0的變數(shù)a，在執(zhí)行GA創(chuàng)造pageview的函式之后，把a(bǔ)的值改為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;
}
})
這么一來(lái)，就可以避免系統(tǒng)一直跳針增加pageview的問(wèn)題。
第五步:讓code在html檔案被完整加載完之后才執(zhí)行
如果你把這段code埋在
之間，那這段code會(huì)在被讀取前執(zhí)行，這樣我們的第一行code會(huì)出現(xiàn)問(wèn)題：
var stored_height = $('#section1').outerHeight() + $('#section2').outerHeight()
因?yàn)镮D為section 1還有section 2的HTML物件，在電腦還沒讀取
前等于是不存在的，我們必須要加上ready這個(gè)函式，讓code在html檔案被完整讀取完之后才執(zhí)行：
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;
}
})
})
這樣看起來(lái)code有點(diǎn)亂，我們可以自創(chuàng)一個(gè)函式，把該執(zhí)行的指令模塊化：
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);
到這邊，我們?cè)搶懙拇a就全部完成了。
這段代碼還可以用在什么地方？
除了瀑布流網(wǎng)站，其實(shí)一些博客或是專做內(nèi)容的媒體網(wǎng)站，也會(huì)有Bounce Rate失真的問(wèn)題，使用者進(jìn)來(lái)你的網(wǎng)站，是為了「閱讀」，如果他認(rèn)真完整地閱讀完一篇文章之后離開，而GA把這次造訪視為「跳出」，那不是挺奇怪的嗎？你可以在使用者閱讀文章80%時(shí)，增加一個(gè)pageview，具體的做法跟上面一樣，只是要改變儲(chǔ)存的高度，在此就不贅述了。
其他備注
1）使用這段code的網(wǎng)站，pageview計(jì)算方式會(huì)不太一樣，在做這件事之前請(qǐng)跟你的marketing同仁溝通，不然他們看到暴增的pageview可能會(huì)丈二和尚摸不著頭腦。
2）你可以把ga（'send'，'pageview'）這段code替換成任何你想要的code，像是GA的event、Facebook的conversion pixel等等。
3）經(jīng)實(shí)驗(yàn)證明本段code是有效的，如果大家在撰寫代碼的時(shí)候有什么問(wèn)題，可以在底下留言回復(fù)。