Track Google Adsense click with JavaScript

Question

What I am trying to do is to track the user's click on a Google Adsense. There are two types of ad's being generated by including the Google Adsense script tag.

• An imagebanner (a single click on the banner will redirect the user to the ad)
• A banner with one or more links (the user has to click on the link to get redirected)

I have issues with the second type of the banner.
The link comes within two iframes. It's pretty easy to track the click if the user's mouse is on the outer iframe. But I actually can't access the second iframe to track the click if the user clicks on the link ( tag). So if the user clicks on a whitespace in the banner, my function also counts it as a click. The reason is quite obvious: Google denys it.
I don't want to manipulate Google's code, I just want to track the click.

Answer 1

I'm not quite sure whether this is allowed by AdSense since you could abuse the system by tracking clicks on ads (eg content locking). Additionally, you will encounter different edge cases – like the one you asked – that's why I generally recommend you the following:

What you probably want to do is connecting Google Analytics with AdSense (it's simple as 1-2 clicks) so you can easily navigate to Publisher → AdSense in the Analytics Dashboard to see impressions, clicks and other AdSense data. You can always create custom reports which can access this data.

If you really want to track clicks, you can checkout this iframe tracker which uses blur events to determine which element/iframe the mouse cursor currently hovers.

Answer 2

I have the following POC code which I found helpful:

function adClickEvent() {

// Set the name of the hidden property and the change event for visibility
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
    hidden = "hidden";
    visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
    hidden = "msHidden";
    visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
    hidden = "webkitHidden";
    visibilityChange = "webkitvisibilitychange";
}


function handleVisibilityChange() {
    if (document[hidden]) {
        if (timeEntered && (new Date().getTime() - timeEntered) < 3000) {
            /* click on ad */ 
            timeEntered = new Date().getTime();
        }
    }
}

var timeEntered = 0;
if (typeof document.addEventListener === "undefined" || hidden === undefined) {
    // not supported
} else {
    var AdId = '';
    document.addEventListener(visibilityChange, handleVisibilityChange, false);
    var AdElements = document.querySelectorAll('[data-google-query-id]');
    for (var i = 0; i < AdElements.length; i++) {
        AdElements[i].addEventListener('mouseenter', function (e) {
            timeEntered = new Date().getTime();
            AdId = e.target.getAttribute('id');
        });
        AdElements[i].addEventListener('mouseleave', function (e) {
            setTimeout(function () {
                timeEntered = 0;
                AdId = e.target.getAttribute('id');
            }, 500);
        });
    }
}
}

Answer 3

Assuming the banner has the class .banner , you can accomplish tracking like this:

$('.banner').on('click', function(e) {
  ga('send','event',{eventCategory:'BannerClick', eventAction:e });
});