Click on iframe content not getting read by jQuery

Question

I've having a weired kind of issue with jQuery click() function.

The problem is that lets say I have a div with class foo which mostly contains ads and I want to show a console log message saying ad clicked every time someone click on the ads.

So, I've written a small jjquery like this:

(function($){
    $(".foo").click(function(){
        console.log( "Ad Clicked" );
    });
})(jQuery);

Please Note: this is an example code. The actual code is more complicated than this but based on this same logic.

The Problem

The above code shows the console message properly if I use some sort of affiliate banner codes like this:

<div class="foo">
    <a href="example.com/something"><img src="http://example.com/adbanner.jpg" /></a>
</div>

But if I wrap it within a AdSense code which uses iframe to show ads, every time I click on the ad using that click event doesn't get fired and the console message doesn't show up. Here is an adsense code example:

<div class="foo">
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle"
        style="display:block"
        data-ad-client="ca-pub-XXXXXXXXXX"
        data-ad-slot="XXXXXXXXXXX"
        data-ad-format="auto"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
</div>

What I am trying to do is to write a generalistic code that will catch the click even no matter what kind of ad code I'm using. Whether it is a affiliate ad code or a iframe based adsense ad.

Do any of you guys have any idea why the click event is not working for the iframe based adsense codes?

Answer 1

on pc is possible but on mobile no. take a look https://github.com/vincepare/iframeTracker-jquery