利用jQuery Scroll Depth追蹤使用者的閱讀情形

購物網站如何申請超商取貨付款？(7-ELEVEN、全家、OK、萊爾富四大超商)Astral web 的這篇文章一直有很高的點擊率，今天我們突然想知道到底有幾個人把文章看到最後，該怎麼做呢？

jQuery Scroll Depth是一個可以追蹤使用者捲動捲軸動作的jQuery套件，必須搭配Google Analytics 使用。當使用者捲動捲軸到某一處時"Scroll Depth" 就會送出一個Google分析事件，我們可以藉些來追蹤分析使用者閱讀網站內容的情形。

“Scroll Depth" 預設的追蹤事件有 25%，50%，75%，100%，而在網頁一開始載入之後，"Scroll Depth" 就會馬上送出一個"baseline"事件。

官方網站：http://scrolldepth.parsnip.io/

開始使用jQuery Scroll Depth

Step 1: 加入您的Google Analytics 追蹤碼

<script>

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

 

ga('create', 'UA-XXXXXXXX-X', 'auto');

ga('send', 'pageview');

</script>

Step 2: 引入jQuery Scroll Depth

<script src="jquery.scrolldepth.min.js"></script>

 

Step 3: 啟用jQuery Scroll Depth

<script>
jQuery(function() {
jQuery.scrollDepth();
});
</script>

 

參數說明：

minHeight – 可以設定網頁大於某個高度時才追蹤。預設設置為"0″，表示追蹤所有頁面。

elements – 可以指定追蹤某個元素，例如：elements: [‘#comments’, ‘footer’] 表示追蹤 id 為comments – 的元素及 <footer>標籤。

percentage – 如果您想關閉預設的百分比追蹤、請將percentage 設為false。

pixelDepth – “Scroll Depth"預設在傳送百分比事件的時候、也會同時傳送當下的pixel高度、如果你想關閉這個功能，可以將pixelDepth 設為false。