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.

Fix css rules and styles cannot work or render properly in internet explorer

When doing a web page that needs to support IE9 or below, you may found that css rules or styles cannot work or render properly in Internet Explorer but works in other browsers. It may related to the hidden limitation in Internet Explorer.

According to kb262161 in Microsoft, it outlines that

• All style tags after the first 31 style tags are not applied.
• All style rules after the first 4,095 rules are not applied.
• On pages that uses the @import rule to continuously import external style sheets that import other style sheets, style sheets that are more than three levels deep are ignored.

Work around to solve the issue mentioned above :

1. If you have 4095 rules in a style sheet files, try to move some rules to a separated style sheet file and include it.
2. If you cannot eliminate the css rules, move some rules to a separated style sheet file.
3. If @import is not necessary, skip it and directly include the style sheet file in your page instead.