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 an iframe to load their external content, they are Google Ads, Facebook Like button, Google+ button, Youtube embeds video player, etc…

This plugin tracks clicks based on the blur event associated with 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 the 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);