jQuery Scroll Depth 套件可以用來偵測並追蹤使用者在網頁捲軸捲動事件，並利用 Google Analytics 的 GA Event API 來追蹤。
使用時要搭配 Google Analytics 才行，預設的捲軸行為有 25%、50%、75% 及 100% 等等。而在一開始的基準事件是 Baseline。
套件名稱：jQuery Scroll Depth
套件版本：1.0
作者網站：http://robflaherty.github.com/jquery-scrolldepth/
套件網址：N/A
發佈日期：2012-04-13
檔案大小：2.89 KB
檔案下載：jquery.scrolldepth.js
參數選項說明：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | elements(選填) 描述： 要偵測顯示在可視區域中獨一無二的元素 預設值： [] minHeight(選填) 描述： 開始偵測的最小高度 預設值： 0 percentage(選填) 描述： 是否啟用捲動百分比偵測 預設值： true testing(選填) 描述： 若設為 true 則會需要一個 id 為 console 的元素來顯示除錯訊息；false 則需要引用 Google Analytics 的程式來進行動作的追蹤 預設值： false |
方法說明：
檢視原始碼 JavaScript
1 2 | // 追蹤使用者在操作網頁時的捲軸捲動事件 $.scrollDepth(options); |
使用範例：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.scrolldepth.js"></script> <script type="text/javascript"> $(function(){ // 啟用除錯模式 // 並偵測 #main 及 #footer 是否進入到可視區域 $.scrollDepth({ testing: true, elements: ['#main', '#footer'] }); }); </script> <body> <div id="console" style="background: #aaa; width: 200px; position: fixed; top: 0; right: 0; text-align: center; padding: 20px;"></div> <div id="top" style="background: #eee; height: 2000px">#top</div> <div id="main" style="background: #ccc; height: 2000px">#main</div> <div id="footer" style="background: #999; height: 200px;">#footer</div> </body> |