移动端点击击穿与百度广告点击统计

利用移动端击穿的原理进行百度广告点击统计，实施很简单，在百度广告上方放置一透明层，当用户点击时发送统计日志，
移动端击穿的原因，网上文章很多，大意是click事件会有相对于touch事件300毫秒的延迟触发(因需要判断双击还是单击),
可以利用这一点当touch事件触发时隐藏浮层，click 事件应用时刚好点到广告;比如使用工具的tap事件,当然自己写原生也很简单，
监听touchend事件，监听touchstart 事件，对比两次事件的时间戳及触摸点的位移情况就可以判定用户是点击了还是划屏、长按操作，不多说。
有道是理想很丰满现实很骨感，说一下遇到的问题，
【问题一】百度失效广告
百度给出的对象BAIDU_DUP.slot.slotsMap提供了广告的长宽高等信息,实际有些广告可能在页面的宽度高度是0，
【解决方案】可以把广告去了，也可以无视
【问题二】
iphone 6plus safari 点击后层消失，但广告没有得到点击，在需要击穿的时候竟然不击穿，真是一个讽刺。。。
问题很严重，经过更详细的测试发现，快速的点击，只是层消失，广告不被点击，但是点慢一些的时候，还是会成功跳转，
这个问题就比较有意思了，要求用户点慢一些显然是不现实的，
【解决方案】
瞎猫碰上死耗子，在解决别的问题时，这个问题被意外的解决了。。。，
神器【setTimeout】
仅仅使用setTimeout 异步生成浮层元素结果好了，虽然这个解释很不负责任，你问我我也不知道，这个就像切图各种兼容，一个float解决一样;

【注意事项】
不建义这样写法，setTimeout("alert(1)",2000);因为字符串需要解析性能不好，这样写多好setTimeout(function(){alert(1)},2000)
【贴代码】

;(function($,doc,win,undefined){
    var fn=function(){};
    fn.prototype={
        cache:{},
        init:function(){
            var _this=this;
            this.bindEvent();
            setTimeout(function(){
                _this.createMask();
            },0);
            /*setTimeout(function(){
                _this.checkAd();
            },7000)*/
        },
        bindEvent:function(){
            var xS,yS,xE,yE,tS,tE;

            doc.addEventListener("touchstart",function(evt){
                if(evt.target.className!="BDHCX161229") return;
                var temp=evt.touches[0];
                xS=temp.clientX;
                yS=temp.clientY;
                tS=evt.timeStamp;

            },false);
            doc.addEventListener("touchend",function(evt){
                if(evt.target.className!="BDHCX161229") return;
                var temp=evt.changedTouches[0]||evt.touches[0];
                xE=temp.clientX;
                yE=temp.clientY;
                tE=evt.timeStamp;
                //console.log(tE-tS,":",xE-xS,":",yE-yS);
                if(tE-tS<300&&!(xE-xS)&&!(yE-yS)){
                    $(evt.target).hide();
                    sendUserlogsElement("UserBehavior_adbaidu_"+evt.target.getAttribute("data-id"));
                }

                //多标签兼容处理
                setTimeout(function(){$(evt.target).show()},1000)
            },false);
            //修正 iphone safari 后退
            doc.addEventListener("pageshow",function(evt){
                evt.persisted&&$(".BDHCX161229").show();
            },false);
        },       
        checkAd:function(){
            var data=win.BAIDU_DUP&&win.BAIDU_DUP.slot&&win.BAIDU_DUP.slot.slotsMap?win.BAIDU_DUP.slot.slotsMap:{};
            var temp;
            var tempRect;
            for(var i in data){
                if(!data.hasOwnProperty(i))continue;
                temp=data[i];
                tempRect=doc.querySelector("#"+temp.containerId).getBoundingClientRect();
                 if(tempRect.height==0||tempRect.width==0){
                    win.console&&console.log&&console.log("height ad id: "+i);
                 }
            }
        },
        createMask:function(){
            var data=win.BAIDU_DUP&&win.BAIDU_DUP.slot&&win.BAIDU_DUP.slot.slotsMap?win.BAIDU_DUP.slot.slotsMap:{};
            var temp;
            var top,left;
            var tempEle;
            for(var i in data){
                if(!data.hasOwnProperty(i))continue;
                temp=data[i];
                tempEle=doc.createElement("div");
                tempEle=$('<div class="BDHCX161229"></div>');
                tempEle[0].setAttribute("data-id",temp.slotId);
                tempEle[0].style.cssText="opacity:0;background-color:#000;cursor:pointer;position:absolute;z-index:1;left:0px;top:0px;width:"+temp.width+"px;height:"+temp.height+"px";
              
                (function(id,ele){
                    setTimeout(function(){
                        $("#"+id).css("position","relative").append(ele);
                        id=null;
                        ele=null;
                    },0);
                })(temp.containerId,tempEle)
            }
        }

    };

    $(function(){
        new fn().init();        
    });

})(window.jQuery||window.Zepto,document,window);

移动端点击击穿与百度广告点击统计

猜你喜欢