2015-01-31 172 views
0

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

+0

你可能會分開處理成*問題*和*回答*。我注意到,當我開始發送按鈕推送事件的跟蹤事件時,Google Analytics會將一系列訪問重新分類爲單個頁面計算器網站,從反彈到定期訪問,因此,向Google提供更多信息並讓您跟蹤它的任何內容都可能有用不太明顯的方式。 – Paul 2015-01-31 23:19:42

回答

0

最近,我在使用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章標題/」