监测谷歌adsense广告被用户点击行为

相信很多站长都想知道自己网站投放的谷歌广告是否被用户点击了，或者根据用户是否点击页面上的谷歌广告，从而进行下一步的处理。然而，监控页面上的谷歌广告是否被点击，并不是一件简单的事。说来话长，下面我们一点点分析。

为什么谷歌adsense广告点击难监测

1.谷歌adsense广告是以iframe嵌入到页面中的。
了解前端开发的童鞋们应该知道，iframe是嵌入到当前页面中的另一个页面，因此为了安全着想，和当前页面的空间和资源与iframe之间其实是隔绝的；并且世界上各大互联网组织也在多年来一直致力于保护网络安全和隐私，因此对iframe的限制很严格，不会存在漏洞。所以很难编写代码来监控用户在iframe中发生的行为，这几乎是不可能的。
2.谷歌禁止用户的点击行为。
谷歌并不希望用户查看广告的行为可以轻易的被开发人员或者站长给监控。因为如果站长可以轻易监控用户是否点击广告的话，就很可能催生一些故意引诱用户去点击广告来获得好处的行为。例如通过点击浏览广告来获得免费使用次数、通过点击浏览广告从而在游戏中重生这类行为。这类诱导行为一旦被发现，账号就会视具体情况被封禁一段时间；第二次被发现就会终身封禁！国外对失信的处理可是很严格的。

看到这儿，不知你是否还是想着要监控用户点击谷歌广告的行为，如果你执意要这么做，那么可以继续往下看。并且提前说一句，在对检测代码进行调试的时候，前往不要自己多次点击自己网站上的广告，不然就会被判定为自己故意点击自己广告的违规行为了！！！

如何实现监测用户点击谷歌adsense广告

1.首先要在谷歌的<ins标签外套一层<div标签。也就是用div包含ins，外层div的class命名为adsgoogleouter，ins的class命名为adsbygoogle，HTML部分代码如下：

<div tabindex="0" class="adsgoogleouter">
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="***********"
         :data-ad-slot=adSlot
         data-ad-format="auto"
         data-full-width-responsive="true"></ins>
  </div>

2.主要通过对HTML中元素的监听行为来实现，javascript代码如下：

let blurToIframeFlag=false;
let mouseEnterFLag=false;
document.addEventListener('visibilitychange',()=>{
      if (document.visibilityState==='hidden'){
        if (this.blurToIframeFlag){
          //console.log('从iframe离开了当前页')
          this.blurToIframeFlag=false;
        }
      }
      if(document.visibilityState==="visible"){
        //console.log('回到了当前页')
        document.querySelector('.adsgoogleouter').focus();
        this.$emit('successClick')
      }
    })
window.addEventListener('blur',()=>{
    setTimeout(()=>{
      if (document.activeElement.tagName==='IFRAME'){
        this.blurToIframeFlag=true;
      }else {
        this.blurToIframeFlag=false
        //console.log('blur to flase')
      }
        //console.log(document.activeElement.tagName==='IFRAME')
        //console.log('xxxblur click')
      })
    })
  }
    ///////
    document.querySelector('.adsbygoogle').onmouseenter=()=>{
      console.log('mouseenter')
    }
    document.querySelector('.adsbygoogle').onmouseleave=()=>{
      console.log('mouseleave')
    }
    document.querySelector('.adsbygoogle').onmousedown=()=>{
      console.log('mousedown')
    }
    document.querySelector('.adsbygoogle').onmouseup=()=>{
      console.log('mouseup')
    }
    document.querySelector('.adsbygoogle').onmouseover=()=>{
      console.log('mouseover')
    }
    document.querySelector('.adsbygoogle').onmouseout=()=>{
      console.log('mouseout')
    }

这段代码比较乱，是很久之前写的，现在也一下子记不清到底是个什么情况了，只知道这应该是能够监控用户点击谷歌广告最完善的方式了，比网络上其他方式更靠谱一点点，基本上90%的情况可以监控到。因此这段代码不能直接使用(非常抱歉)，下面讲一下监控谷歌adsense广告用户点击的大概原理，具体代码大家搞懂原理可以自己实现：
1.监听visibilitychange事件。简单来说，浏览器标签页被隐藏或显示的时候都会触发visibilitychange事件。
2.blur监听的是页面的失焦和聚焦。visibilitychange和blur并不会冲突，他们是互相补充的。
3.通过监听外层div的onmouseover、onmouseout、onmouseup、onmousedown、onmouseenter、onmouseleave这类事件，来监听鼠标是否进入到了谷歌广告显示的区域中。

因此如果用户的鼠标移动到了谷歌广告div区域的内部，并且页面发生了跳转，之前的页面不再显示，div也失去了焦点，那么90%的情况就是用户点击了谷歌广告，然后跳转到了谷歌广告新页面中去了。如果从广告页面又回到了之前页面，也要对相应的状态和变量进行改变或重置。
那么还有10%的情况呢，应该就是用户鼠标移动到了广告div内部，但是使用快捷键等将浏览器切换到了后台，这样就无法监控是不是真的跳转到谷歌广告页了。
在github上有一个比较古老的监控谷歌广告是否被点击的开源库，名字叫做
iframeTracker-jquery，大家可以自己去搜一下，看一下他的代码逻辑，可以作为代码实现的参考。