JS監測產品有效曝光
電商列表頁面，數據加載，並非寫到了列表的產品圖都被客戶看見了。有時候根本沒有被加載javascript
- 判斷加載
瀏覽器是否能判斷一張圖，加載完畢，若是能夠那麼觸發JS，推送一次曝光數據
輪詢圖片css
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>img - complete attribute</title>
</head>
<body>
<img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg">;
<p id="p1">loading...</p>
<script type="text/javascript">
function imgLoad(img, callback) {
var timer = setInterval(function() {
if (img.complete) {
clearInterval(timer);
callback();
}
}, 50)
}
imgLoad(img1, function() {
// p1.innerHTML = '加載完畢';
//Ajax 觸發監測系統 傳送產品ID
})
</script>
</body>
</html>
圖片的onloadhtml
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>img - load event</title>
</head>
<body>
<img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg">;
<p id="p1">loading...</p>
<script type="text/javascript">
img1.onload = function() {java
//Ajax 觸發監測系統 傳送產品ID
}
</script>
</body>
</html>瀏覽器
- JS判斷看見
看見，圖片一個列表，被看見和被加載兩碼事。ide
如下代碼顯示了JS如何監測一個圖片被看見測試
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
.box {
width: 100%;
height: 200px;
background: #ff0000;
margin-bottom: 10px;
text-align: center;
color: #fff;
line-height: 200px;
font-family: microsoft yahei;
font-size: 40px;google
}
.animate{
animation: showText 1s;
}
@keyframes showText
{
from {
font-size: 20px;
}
to {
font-size: 40px;
}
}
</style>
<body>
<div class="box">1</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
<script type="text/javascript">code
var box = document.getElementsByClassName('box');
function initcheckimg(){
//滾動條高度+視窗高度 = 可見區域底部高度
var visibleBottom = window.scrollY + document.documentElement.clientHeight;
//可見區域頂部高度
var visibleTop = window.scrollY;
for (var i = 0; i < box.length; i++) {
var centerY = box[i].offsetTop+(box[i].offsetHeight/2);
if(centerY>visibleTop¢erY<visibleBottom){
box[i].innerHTML = i+'區域可見'
box[i].setAttribute("class",'box animate')
console.log('第'+i+'個區域可見');
}else{
box[i].innerHTML = '';
box[i].setAttribute("class",'box')
//console.log('第'+i+'個區域不可見');
}
}
}htm
initcheckimg();
document.addEventListener('scroll',initcheckimg)
</script>
</html>
測試效果圖
- 分級區域
思路1 將屏幕分割到不一樣的區域
假設分爲三屏幕（這個思想來自google的列表排名）這樣就能夠監測一張圖片在當時網頁展現的時候的位置。
理解爲產品排名，第一名和第五名的產品，儘管可能都被看到，可是第一名的位置永遠那麼閃耀。
- 默認的第一屏幕
- 第二屏幕
- 第三屏幕
- 超過三屏幕
優點：能夠將產品按屏幕出現的維度進行統計數據。
侷限：必須考慮移動版，ipad版，不一樣顯示器尺寸下，定義的第一屏幕是否相同。
思路2 利用排序ID
頁面上的全部產品有個天然的排序，每次傳給監測系統帶上這個ID排序。這樣分析的時候就知道這個產品大概在什麼位置。
優點：跨越了屏幕分類的複雜。
侷限：這粒度的監測，只適合特定頁面產品排名固定的狀況。若是遇到多個列表頁，某個產品都出現了，且ID排序不一致，就會引發監測數據的混亂。
若是考慮客戶的網速，應該將判斷加載和判斷看見同時使用。具體還須要在實際應用中不停的測試，修改細節。
- 1. View的有效曝光監控（上）｜RecyclerView 篇
- 2. View的有效曝光監控（下）｜ScrollView NestScrollView篇
- 3. VS2012有效產品密鑰
- 4. Android 曝光采集（商品view曝光量的統計）
- 5. 2020.10.20--PS--測試條的製作、曝光效果、黃金效果
- 6. 騰訊產品項目流程大曝光！ | 原力計劃
- 7. 曝光一個產品級的紅外發射電路
- 8. 四 測光模式與曝光儀
- 9. 福祿克光纖測試儀的激光產品安全等級有哪些
- 10. H5，不只是品牌曝光
- 更多相關文章...
- • 測試SSH框架分層整合及驗證事務是否有效 - Spring教程
- • SVG 模糊效果 - SVG 教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • 再有人問你分佈式事務，把這篇扔給他
-
每一个你不满意的现在，都有一个你没有努力的曾经。