jQuery Plugin to track click on iframes (like Google Adsense or Facebook Like button)
HTML JavaScript
Latest commit 56960cc Jun 18, 2015 @vincepare Untrack feature
- Added the ability to cancel tracking (#12)
- JSDoc style header comment
- Updated git URL after repository transfer (from @finalclap)
Permalink
Failed to load latest commit information.
demo Untrack feature Jun 18, 2015
.gitignore First commit Mar 31, 2013
.npmignore Publish on npm Dec 29, 2014
LICENSE.txt Untrack feature Jun 18, 2015
README.md Untrack feature Jun 18, 2015
bower.json Untrack feature Jun 18, 2015
jquery.iframetracker.js Untrack feature Jun 18, 2015
package.json Untrack feature Jun 18, 2015

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(){
            // Do something when the iframe is clicked (like firing an XHR request)
        }
    });
});

Advanced tracking

jQuery(document).ready(function($){
    $('.iframe_wrap iframe').iframeTracker({
        blurCallback: function(){
            // 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){
            this._overId = $(element).parents('.iframe_wrap').attr('id'); // Saving the iframe wrapper id
        },
        outCallback: function(element){
            this._overId = null; // Reset hover iframe wrapper id
        },
        _overId: null
    });
});

Cancel tracking

You can remove tracker attached to on 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 : http://www.finalclap.com/tuto/track-iframe-click-jquery-87/ (it's in French).

Tested on jQuery 1.4.4, 1.8.2, 1.9.1, 1.11.0 & 2.1.4.


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 useless.

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