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.
How does it work ?
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.
How to use ?
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({ blurCallback: function(event) { // Do something when the iframe is clicked (like firing an XHR request) } }); });
You can also just pass a function, that will be then registered as the blurCallback
:
jQuery(document).ready(function($){ $('.iframe_wrap iframe').iframeTracker(function(event) { // Do something when the iframe is clicked (like firing an XHR request) }); });
Advanced tracking
jQuery(document).ready(function($){ $('.iframe_wrap iframe').iframeTracker({ blurCallback: function(event) { // Do something when iframe is clicked (like firing an XHR request) // You can know which iframe element is clicked via this._overId }, overCallback: function(element, event) { this._overId = $(element).parents('.iframe_wrap').attr('id'); // Saving the iframe wrapper id }, outCallback: function(element, event) { this._overId = null; // Reset hover iframe wrapper id }, _overId: null }); });
Cancel tracking
You can remove a tracker attached to an iframe by calling .iframeTracker()
with either false
or null
:
$('#iframe_red_1 iframe').iframeTracker(false); $('#iframe_red_2 iframe').iframeTracker(null);
Full tutorial available here (it's in French).
Tested on jQuery 1.4.4
to 1.11.0
, 2.1.4
& 3.2.1
.
Install
With npm :
npm install jquery.iframetracker
With bower :
bower install jquery.iframetracker
About mobile devices
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 ineffective.
Donate
Donations are welcome :) via PayPal, Flattr or Bitcoin at this address : 3G5uTti2JPAT738uDeQXjrN7tUj2NZjt6M
or by flashing this lovely QR code :