js点击第三方广告添加点击事件

最近写了一个项目,是给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();
     });
}
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值