jQuery iframeTracker: detect click on iFrame

iframeTracker is a jQuery plugin that can track clicks on iframes embedded in a webpage on your website. Many famous services use iframe to load their external content, they are Google Ads, Facebook Like button, Google+ button, Youtube embed video player, etc…

This plugin tracks clicks based on the blur event associated to a page/iframe boundary monitoring system telling over which iframe is the mouse cursor at any time. It doesn’t read iframe content directly from the parent page because of the Same Origin Policy.

Add script

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="jquery.iframetracker.js"></script>

Script usage

//first method: use blurCallback
$('#iframe').iframeTracker({
	blurCallback: function(event) {
		// your action
	}
});

//second method: pass a function
$('#iframe').iframeTracker(function(event) {
	// your action
});

//advanced usage
$('#iframe').iframeTracker({
	blurCallback: function(event) {
		//your action
	},
	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
});

Tracking can be canceled by calling iframeTracker() with either false or null

$('#iframe').iframeTracker(false);
$('#iframe').iframeTracker(null);

Leave a Comment

Your email address will not be published. Required fields are marked *

We care about your privacy and data security. Google serves cookies to analyse traffic and show ads on this site. By using this site you agree to these cookies being set. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close