• 105473

    文章

  • 803

    评论

  • 12

    友链

  • 最近新加了换肤功能,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

JS监测产品有效曝光

撸了今年阿里、腾讯和美团的面试,我有一个重要发现.......>>

电商列表页面,数据加载,并不是写到了列表的产品图都被客户看见了。有时候根本没有被加载

1. 判断加载
浏览器是否能判断一张图,加载完毕,如果可以那么触发JS,推送一次曝光数据

轮询图片

<!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>

图片的onload

<!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() {
 
	//Ajax 触发监测系统 传送产品ID
 
        }
    </script>
</body>
</html>

2. JS判断看见

看见,图片一个列表,被看见和被加载两码事。

以下代码显示了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;
 
}
.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">
 
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&centerY<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+'个区域不可见');
	  		}
	  	}
	  }
 
	  initcheckimg();
document.addEventListener('scroll',initcheckimg)
</script>
</html>

测试效果图

3. 分级区域
思路1 将屏幕分割到不同的区域

假设分为三屏幕(这个思想来自google的列表排名)这样就可以监测一张图片在当时网页展示的时候的位置。
理解为产品排名,第一名和第五名的产品,尽管可能都被看到,但是第一名的位置永远那么闪耀。

1. 默认的第一屏幕
2. 第二屏幕
3. 第三屏幕
4. 超过三屏幕

优势:可以将产品按屏幕出现的维度进行统计数据。
局限:必须考虑移动版,ipad版,不同显示器尺寸下,定义的第一屏幕是否相同。

思路2 利用排序ID
页面上的所有产品有个自然的排序,每次传给监测系统带上这个ID排序。这样分析的时候就知道这个产品大概在什么位置。

优势:跨越了屏幕分类的复杂。
局限:这粒度的监测,只适合特定页面产品排名固定的情况。如果遇到多个列表页,某个产品都出现了,且ID排序不一致,就会引起监测数据的混乱。

如果考虑客户的网速,应该将判断加载和判断看见同时使用。具体还需要在实际应用中不停的测试,修改细节。

https://java-er.com/blog/js-expo-effective/


695856371Web网页设计师②群 | 喜欢本站的朋友可以收藏本站,或者加入我们大家一起来交流技术!

5000mAh电池神似iPhone 11国

是由于国产手机设计水平的不断提高,很多厂商都逐渐建立了一套自己的设计语言,另一方面与iPhone的热度下降也有关系。 比如,今年发布的iPhone 11系列,至今尚未看到与之外观类似的安卓手机,但还是…

一定要App吗?

五六年前,一个新的移动互联网产品上线,如果没有App版本,恐怕是很难得到投资人和市场认可的。时至今日,仍然有许多初创团 ...

0条评论

Loading...


自定义皮肤 主体内容背景
打开支付宝扫码付款购买视频教程
遇到问题联系客服QQ:419400980
注册梁钟霖个人博客