jQuery Plugin to track click on iframes (like Google Adsense or Facebook Like button)
Clone or download
Latest commit 492d108 Mar 26, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo 2.1.0 Mar 26, 2018
dist 2.1.0 Mar 26, 2018
src Fix issue #2 : focus theft Mar 26, 2018
test/unit Fix issue #2 : focus theft Mar 26, 2018
.eslintrc Build: Eslint Sep 12, 2017
.gitignore Build: new repository layout + setup Grunt and UglifyJS Sep 11, 2017
.npmignore QUnit test suite Sep 13, 2017
.travis.yml QUnit test suite Sep 13, 2017
CONTRIBUTING.md Add CONTRIBUTING.md Dec 30, 2017
Gruntfile.js Add UMD boilerplate Nov 5, 2017
LICENSE.txt Build: new repository layout + setup Grunt and UglifyJS Sep 11, 2017
README.md Fix URL scheme issue (http => https) Mar 26, 2018
bower.json 2.1.0 Mar 26, 2018
package-lock.json Add UMD boilerplate Nov 5, 2017
package.json 2.1.0 Mar 26, 2018

README.md

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 :

qrcode for bitcoin address 3G5uTti2JPAT738uDeQXjrN7tUj2NZjt6M