Track click coordinates of a page, including iframes

Question

I'm working on creating a basic heatmap for a site using the following:

$(document).ready(function() { 

   $(document).on('mousedown', function(evt) {
      console.log('X: '+ evt.pageX);
      console.log('Y: '+ evt.pageY);
      $.post('clickmap.php', {
          x:evt.pageX,
          y:evt.pageY        
       });
   });
});'

fiddle: http://jsfiddle.net/8jjo7q5y/

Works great, besides when also including click coordinates of a click over an iframe. It appears that this is possible when using CrazyEgg and I've personally tested CrazyEgg by clicking a Google Ad (housed inside an iframe) and the heatmap data returned properly to CrazyEgg.

Any ideas on how to accomplish click tracking an entire page body with iframes included.

This might not work if the iframe has a page loaded from a different domain. In your jsFiddle example you're loading a page from `fiddle.jshell.net` from `jsfiddle.net`. In theory this means that CrazyEgg would not be able to attach itself to the iframe, I don't know if that is how it tracks the clicks. — Halcyon, Aug 11 '14 at 14:37
http://stackoverflow.com/questions/2381336/detect-click-into-iframe-using-javascript — john Smith, Aug 11 '14 at 15:09

score 1 · Answer 1 · answered Aug 11 '14 at 15:32

HTML:

<div></div>
<iframe src="http://www.jsfiddle.net"></iframe>

CSS:

 div {
    position: absolute;
    width: 300px;
    height: 150px;
    z-index: 2;
  }

 iframe {
    position: absolute;
    width: 300px;
    height: 150px;
    z-index: 1;
 }

JavaScript:

    $(window).click(function(e) {
          console.log("x:" + e.pageX + ", y:" + e.pageY);
    });

FIDDLE http://jsfiddle.net/a9owgqrv/

Rick Hitchcock · Answer 2 · 2014-08-11T15:46:06.567

0

If the iframe content doesn't need any user interaction at all (clicking, scrolling, etc.), you could place a ~~transparent~~ div on top of it, which would capture the mouse clicks. Otherwise, I think you're out of luck.

(Thanks to @Andranik for showing that the div doesn't actually need transparent (opacity) styling.)

edited Aug 11 '14 at 15:46

answered Aug 11 '14 at 15:12

Rick Hitchcock

35,202
5
48
79

john Smith · Answer 3 · 2014-08-12T08:41:47.033

short answer for iframes pointing to different domain without making use of proxys or putting a div over the iframe that causes not to be able to click in the iframe: no

nevertheless here is some bloody attempt

it uses the blur event that gets fired when clicked "outside" of window e.g inside iframe, i added mousemove event to have the coordinates where user clicks into iframe, but this only works once, to work again the user must click outside the iframe and inside again, but its better than nothing ;-)

$(document).ready(function() { 
    var mouse = {x: 0, y: 0};
    document.addEventListener('mousemove', function(e){ 
        mouse.x = e.clientX || e.pageX; 
        mouse.y = e.clientY || e.pageY 
    }, false);
    $(window).blur( function(e){
        console.log("clicked on iframe")
      console.log('X: '+ mouse.x);
      console.log('Y: '+ mouse.y);
});
   $(document).on('mousedown', function(evt) {
      console.log('X: '+ evt.pageX);
      console.log('Y: '+ evt.pageY);
      //$.post('clickmap.php', {
          //x:evt.pageX,
          //y:evt.pageY        
       //});
   });
});

http://jsfiddle.net/8jjo7q5y/1/

Track click coordinates of a page, including iframes

3 Answers3