製品は完全に興味がないものについては、どのような情報ページを比較することに関心を示した人、出してアクティブなページを参照してくださいしたいと思います。=>滞留時間は、ページ内の各モジュールのために計算されます
私は、この需要を初めて聴いた時は、私の脳は、ここでは、必死に私が忘れてしまった多くの失敗したアイデアの中から、その後、実行計画1、プラン2、プラン3 ...と思うようになった私は最終的に採択プログラムの三つの方法です。
スキームワン：モジュールDOMによってページに基づくページ
var bodyChildrenLists = $('body').children()
var bodyChildDomLsit = []
var initHeight = 0
for (var i = 0; i < bodyChildrenLists.length; i++) {
if (bodyChildrenLists[i].tagName !== 'SCRIPT') {
bodyChildDomLsit.push({
className: bodyChildrenLists[i].className,
height: bodyChildrenLists[i].offsetHeight
})
}
}問題：
異なる人々のコードスタイルの大きな違いは、プログラムは、このようなコードスタイルには適していません
<body>
<div class="container">
<div class="header"></div>
<div class="nav"></div>
<div class="footer"></div>
</div>
</body>誰もが非常に一貫性のあるコーディングスタイル,,,下にある場合さて、この方法は、より良い使用。
オプション2：ユーザーがページを開いた後に計算すべての行為
var scrollTop = 0
var time = Date.now()
window._stayStatus = {
// 记录运动轨迹, down > 1 向下移动 down 向上移动, sliderDis 移动距离, time 移动耗时, initDis 初始距离, initTime 初始时间
moveData: [],
enterTime: Date.now()
}
var moveData = window._stayStatus.moveData
var currentMoveIndex = 0
function move () {
var currentTime = Date.now()
var currentScrollTop = $(window).scrollTop()
var dis = currentScrollTop - scrollTop
var disTime = currentTime - time
// 上一次滑动页面和这次滑动页面的时间差大于100ms，就视作用户在某一个段时间做了停留
if (disTime > 100) {
if (moveData[currentMoveIndex] && moveData[currentMoveIndex].down === 0) {
moveData[currentMoveIndex].time += disTime
} else {
moveData.push({
down: 0,
initTime: time, // initTime表示进入该状态的初始时间
initDis: currentScrollTop, //initDis 表示进入该状态的初始位置
sliderDis: dis, // 在该状态内滑动的距离
time: disTime // 在该状态经历的时间（ms）
})
}
} else {
// 向下滑动
if (dis >= 0) {
// 如果之前已经是向下滑动的状态，只需要在原来的数据上累加滑动距离和滑动时间
if (moveData[currentMoveIndex] && moveData[currentMoveIndex].down > 0) {
moveData[currentMoveIndex].sliderDis += dis
moveData[currentMoveIndex].time += disTime
} else {
moveData.push({
down: 1,
initTime: currentTime,
initDis: currentScrollTop,
sliderDis: dis,
time: disTime
})
}
} else {
if (moveData[currentMoveIndex] && moveData[currentMoveIndex].down < 0) {
moveData[currentMoveIndex].sliderDis += dis
moveData[currentMoveIndex].time += disTime
} else {
moveData.push({
down: -1,
initTime: currentTime,
initDis: currentScrollTop,
sliderDis: dis,
time: disTime
})
}
}
}
currentMoveIndex = moveData.length - 1
time = currentTime
scrollTop = currentScrollTop
}
window.onscroll = function (e) {
move()
}次のように取得したデータに対して上記の方法によれば：
言った：ユーザーが2728ms後、上から2ピクセルのまま場合は、スライドダウンタイム612pxスライドが595msで、その後、離れトップ612px 8649msから最後のスライド上方604px、経験豊富167msをとどまりました。
問題：
データ解析グループへの結果のデータの量、偉大ではないが、そのようなデータは、いくつかの困難があります。それは、不在とドッキング製品では、彼らは、もう少し複雑にしたいしたい方法です。しかし、このアプローチは、より鮮やかなシミュレートユーザーの行動することができます。
プログラムIII：固定ブロックサイズは、滞留時間は、モジュールごとに計算されます
私のお尻を持つ製品の基本的な条項：
- 埋もれた統計のためのモジュールとして、各1300px高さ。
- 400ピクセルよりも大きいの各画面露光有効露光範囲として、長記録が開始されます。
- 各モジュールの報告時間は、時間をスライドして、まだモジュール内にとどまるとの時間を追加しています。
- 0現在のモジュールは、ユーザがモジュール1は、モジュール0は時間を付しスライディング時間内に繰り返される届かないモジュールとして提供されます。
- 0現在のモジュールは、ユーザがスライド動作に達したときに、モジュールとしてモジュール1を提供した後、再表示を記録し、データモジュール0 0モジュールを返します
- ユーザーのための最終報告時間は、ユーザーの行動の統計情報を監視し、現場を去ることができるように、（次のページに移動するか、ブラウザのプロセスを閉じて）ページを残します。
次のように上記の要件によると、私は少しデモを作った、コードは次のとおりです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="//lib04.xesimg.com/lib/jQuery/1.11.1/jquery.min.js"> </script>
<script src="//zt.xueersi.com/apStatic/js/qz-rem.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.section {
height: 1300px;
border-bottom: 1px solid #f00;
box-sizing: border-box;
padding-top: 400px;
}
</style>
</head>
<body>
<div id="app">
<div>
<p>停留时间0：</p>
<p v-for="item in movedata" v-if="parseInt(item.pos / 1300) === 0">{{0}} ---- {{item.time}}</p>
</div>
<div>
<p>停留时间1：</p>
<p v-for="item in movedata" v-if="parseInt(item.pos / 1300) === 1">{{1}} ---- {{item.time}}</p>
</div>
<div>
<p>停留时间2：</p>
<p v-for="item in movedata" v-if="parseInt(item.pos / 1300) === 2">{{2}} ---- {{item.time}}</p>
</div>
<div>
<p>停留时间3：</p>
<p v-for="item in movedata" v-if="parseInt(item.pos / 1300) === 3">{{3}} ---- {{item.time}}</p>
</div>
<div>
<p>停留时间4：</p>
<p v-for="item in movedata" v-if="parseInt(item.pos / 1300) === 4">{{4}} ---- {{item.time}}</p>
</div>
<div>
<p>停留时间5：</p>
<p v-for="item in movedata" v-if="parseInt(item.pos / 1300) === 5">{{5}} ---- {{item.time}}</p>
</div>
<div>
<p>停留时间6：</p>
<p v-for="item in movedata" v-if="parseInt(item.pos / 1300) === 6">{{6}} ---- {{item.time}}</p>
</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
movedata: [],
scrollTop: $(window).scrollTop(),
time: Date.now(),
stayTime: 0
},
mounted () {
// 部分页面存在页面滚动到某一高度时，刷新后页面也会固定在该高度的问题，初始化movedata数据
var index = parseInt(this.scrollTop / 1300) + 1
for (var i = 0; i <= index; i++) {
this.movedata.push({
pos: i * 1300,
time: 0
})
}
window.onscroll = () => {
this.scrollTop = $(window).scrollTop()
}
setInterval(() => {
var currentTime = Date.now()
var disTime = currentTime - this.time
// 计算当前是展现在屏幕中的模块序号，一个屏幕内最多展现两个模块，currentIndex永远指定的是上面的模块
var currentIndex = parseInt(this.scrollTop / 1300)
var length = this.movedata.length
if (currentIndex + 1 >= length) {
for (var i = length; i <= currentIndex + 1; i++) {
this.movedata.push({
pos: 1300 * i,
time: disTime
})
}
} else {
// 计算当前的滚动高度超出满屏的多少
var modeDis = this.scrollTop - this.movedata[currentIndex].pos
// 表示一屏中上面的模块展示区域超过400，可以累加停留时间
if ((1300 - modeDis) > 400) {
this.movedata[currentIndex].time += disTime
}
// 表示一屏中下面的模块展示区域超过400，可以累加停留时间
if (modeDis > 400) {
this.movedata[currentIndex + 1].time += disTime
}
}
this.time = currentTime
}, 1000)
}
})
</script>
</body>
</html>このように、movedataページ内のモジュールの数に等しい長さのアレイ
ここで私は為替の円学習をお勧めしますヒントです：767 273 102、最も基本的なHTML + CSS + JSから学んでいるHTML5プロジェクト実際の学習教材のフロントエンドを移動するには、[特殊効果、ゲーム、プラグインパッケージのデザインパターンを冷却します]私たちは、すべての小さなフロントエンドのパートナーに与えられ、仕上げされています。2019年最新の技術、同期およびビジネスニーズ。友人は、フロントエンド技術のタイミングを説明するために、毎日、大きな牛があるだろう、学習交流の内側にあります！