Submit your widget

jquery.iframetracker - jQuery Plugin to track click on iframes (like Google Adsense or Facebook Like button).

Created 4 years ago   Views 2766   downloads 799    Author finalclap
View DemoDownload
31
Share |

iframeTracker jQuery Plugin

iframeTracker is a jQuery plugin that allow to track clicks on iframes.

This is very useful to :

  • track clicks on Google Adsense (google uses iframes to display ads)
  • track clicks on Facebook Like buttons
  • track clicks on Youtube embed video player
  • ... and any other iframe !

Try it now : demo.

Since it's impossible to read iframe content (DOM) from the parent page due to the same origin policy, tracking is based on the blur event associated to a page/iframe boundary monitoring system telling over which iframe is the mouse cursor at any time.

Match the iframe elements you want to track with a jQuery selector and call iframeTracker with a callback function that will be called when a click on the iframe is detected :

jQuery(document).ready(function($){
    $('.iframe_wrap iframe').iframeTracker({
        blurCallbackfunction(){
            // Do something when the iframe is clicked (like firing an XHR request) 
        }
    });
});
jQuery(document).ready(function($){
    $('.iframe_wrap iframe').iframeTracker({
        blurCallbackfunction(){
            // Do something when iframe is clicked (like firing an XHR request) 
            // You can know which iframe element is clicked via this._overId 
        },
        overCallbackfunction(element){
            this._overId = $(element).parents('.iframe_wrap').attr('id'); // Saving the iframe wrapper id 
        },
        outCallbackfunction(element){
            this._overId = null; // Reset hover iframe wrapper id 
        },
        _overId: null
    });
});

Full tutorial available here : http://www.finalclap.com/tuto/track-iframe-click-jquery-87/ (it's in French).


With npm :

npm install jquery.iframetracker

With bower :

bower install jquery.iframetracker

This plugin doesn't work on mobile devices such as smartphones and tablets, because this hardware uses a touchscreen instead of a mouse as click input. This design makes the boundary monitoring trick useless.

Donations are welcome :) via PayPal, Flattr or Bitcoin at this address : 3G5uTti2JPAT738uDeQXjrN7tUj2NZjt6M or by flashing this lovely QR code :