使用Google Analytics（分析）跟蹤單個網頁上的用戶

Question

最近我遇到了使用Google Analytics（分析）跟蹤「單頁網站」上的用戶的問題。我想分享我的解決方案。請參閱下面的答案。

Answer 1

最近，我在使用Google Analytics（分析）跟蹤「單頁網站」上的用戶時遇到了問題。我想分享我的解決方案。

-----頁面佈局-----

1a. Header with logo and menu (links scroll page down to selected chapter) 
2a. Section with big paralax bakground 
2b. Chapter header <section><h2>Title 1</h2></section> 
2c. Chapter's content <div>content</div> 
3a. Section with big paralax bakground 
3b. Chapter header <section><h2>Title 2</h2></section> 
3c. Chapter's content <div>content</div> 
... 
Na. Section with big paralax bakground 
Nb. Chapter header <section><h2>Title N</h2></section> 
Nc. Chapter's content <div>content</div> 

----- -----要求

1. 算法必須在頁面滾動下來，檢測所選章節對用戶可見。
2. 算法必須檢測到用戶實際上花了一些時間熟悉本章的內容。這個事實必須向Google Analytics報告。
3. 算法無法報告該用戶閱讀該章節時，他只需滾動瀏覽該章節。

---- -----算法

1. 等待頁面加載
2. 創建章節列表，它是相對於網站的上邊框位置。
3. 當用戶看到章節時，必須在一段時間後重新檢查該情況，以證明用戶實際上花了一些時間閱讀內容。
4. 如果滿足上述條件，則向Google Analytics（分析）報告此事實。

----示例代碼-----

<script type="text/javascript"> 

var scrollstat = [] 

// Preparing array of chapters and positions 
$(document).ready(function() { 
    $("section").each(function() { 
     var ts = {}; 
     ts["offset"] = $(this).offset(); 
     str = $("h2", this).html(); 
     ts["name"] = "SECTION-"+str.replace(" ","-")+"/"; 
     ts["checked"] = false; 
     ts["timer"] = false; 
     scrollstat.push(ts); 
    }); 
}); 

//Checking that user is still on the same chapter 
function doublecheck(ii) { 
    scrollpos = $(window).scrollTop(); 
    max = scrollpos + 300; 
    min = scrollpos; 
    if (scrollstat[ii].checked == false && scrollstat[ii].offset.top > min 
    && scrollstat[ii].offset.top < max) { 
     _gaq.push(['_trackPageview', (location.pathname + location.search 
     + scrollstat[ii].name)]); 
     scrollstat[ii].checked = true; 
    } 
    console.log(scrollstat[ii].offset.top+','+min+','+max); 
    scrollstat[ii].timer = false; 
} 


//Separate function for setting timer to count 3s 
//If user don't scroll to other chapter within this time 
//event is reported to GA 

function settimer(ii) { 
    scrollstat[ii].timer = true; 
    setTimeout(function() {doublecheck(ii);},3000); 
} 

//Handling scrolling event 
$(window).scroll(function() { 
    scrollpos = $(window).scrollTop(); 
    max = scrollpos + 300; 
    min = scrollpos; 
    for (index = 0; index < scrollstat.length; ++index) { 
     if (scrollstat[index].checked == false && 
     scrollstat[index].timer == false && 
     scrollstat[index].offset.top > min && 
     scrollstat[index].offset.top < max) { 
       settimer(index); 
     } 
    } 
}); 

</script> 

MAX和MIN變量實驗估算。在我看來，我認爲章節標題必須滾動到屏幕的頂部。

正如上面的腳本的結果，每一個章節都報道GA與像地址單獨的頁面訪問：「/ SECTION章標題/」