最近写了一个项目,是给PC端和app端添加第三方广告,用的是百青藤的广告代码,在写的时候遇到的问题在这里总结一下。
1. 第一个问题是个很严重的问题,广告放到app上可以正常显示,但是点击后没有反应,尝试了各种办法,也都无济于事,只能改需求辗转微信公众号上
2. 第二个问题是点击广告后需要调接口,但是点击广告就直接跳转页面了,无法触发点击事件,原因是广告生成的代码内部是iframe标签,需要给iframe添加点击事件
如何给广告添加点击事件呢?
在网上找到了两个方法,我选择用第二个方法。
第一种方法:
addEventListener('blur', function() {
if(document.activeElement = document.getElementById('iframeu6603897_0')) {
$.ajax({
type: 'POST',
url: '接口地址',
data: {},
success: function(res) {
console.log(res)
}
})
}
});
这种方法的原理是点击广告会跳转页面,js就会监听此页面是否失去了焦点,一旦失去了焦点就触发请求,虽然是可以实现触发点击事件,但是无论怎样操作,只要是页面失去了焦点就会触发,这样统计就不准确了。
第二种方法:
var IframeOnClick = {
resolution: 200,
iframes: [],
interval: null,
Iframe: function() {
this.element = arguments[0];
this.cb = arguments[1];
this.hasTracked = false;
},
track: function(element, cb) {
this.iframes.push(new this.Iframe(element, cb));
var _this = this;
this.interval = setInterval(function() { _this.checkClick(); }, this.resolution);
},
checkClick: function() {
if (document.activeElement) {
var activeElement = document.activeElement;
for (var i in this.iframes) {
if (activeElement === this.iframes[i].element) { // user is in this Iframe
if (this.iframes[i].hasTracked == false) {
this.iframes[i].cb.apply(window, []);
this.iframes[i].hasTracked = true;
$.ajax({
type: 'POST',
url: '接口地址',
data: {},
success: function(res) {
console.log(res)
}
})
}
} else {
this.iframes[i].hasTracked = false;
}
}
}
}
};
var frames = document.getElementsByTagName("iframe的name");
// 要保证先获取到frames,不然不会往下执行,也就添加不上点击事件
for (var i = 0; i < frames.length; i++) {
IframeOnClick.track(frames[i], function() {
jQuery(document).click();
});
}