Track onclick event in google adsense using jquery and iframetracker

Google AdSense is a free and simple way that can use for earning money by display Google ads in your websites. However, if you would like to bind any click events to the Google ads, it is not possible. It is because the Google ads is displaying in iframe which makes your main site javascript cannot bind any click events to it directly due to security reason (since they are in different domain).

Fortunately, there is a trick (work around) to make it possible. The idea is listen blur event in current window and set the focus to window when mouseenter the iframe. Feel strange? No. It is because when the user clicks on the Google Ads, it will pop up a window instead. At that time, it will trigger the blur event in current window. Therefore, we can capture the click event in the blur event of window.

jQuery code example like this :

<script type="text/javascript">
$(window).blur(function(e){
   // Implements in here...
});
$(document).mousemove(function(e){
    if( document.activeElement && document.activeElement.tagName == 'IFRAME' ){
        $(window).focus();
    }
});
</script>

If you feel difficult to implement it yourself, there is a powerful jQuery plugins, "iframeTracker" written by finalclap is for tracking iframe purpose. You utilize that plugins to track the click event in Google ads, for more usage please read the instructions in github.

jquery click event in iOS

When binding a click event to the element, iOS may not work as expected. It is because if you write something like below, it won't work. Maybe it is iOS bug/jQuery bug?

$('#button1').click(function() {
    alert('button1');
});

The work around fix is to set pointer cursor to the element, and use .on to bind click event.

$('#button1').css('cursor','pointer');
$(document).on('click', '#button1',  function(event) {
    event.preventDefault()
    alert('button1');
});