1. 程式人生 > >移動端點選擊穿與百度廣告點選統計

移動端點選擊穿與百度廣告點選統計

利用移動端擊穿的原理進行百度廣告點選統計,實施很簡單,在百度廣告上方放置一透明層,當用戶點選時傳送統計日誌,
移動端擊穿的原因,網上文章很多,大意是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);