I have a page with embedded content where a user is tracked using AJAX GET requests. When they change tab/minimize window the window.onblur event stops the tracking, when they return window.onfocus starts the tracking again.
This all works fine, until I introduce this embedded element (with a fullscreen option). So I have used a series of flags to determine if the user is looking at the embedded element or not.
This all seems to work fine, the problem I seem to be having is when the user leaves the embedded element the focus is just staying on it anyway and therefore never stops the tracking again unless I click on the body of the page.
I tried to use this.embedded.onmouseout = function() { window.focus(); }, but this doesn't seem to help me. I also tried this.body.onmouseover = function() { this.body.focus(); }
This is tested on Firefox so far... All suggestions greatly appreciated!
Here's my snippet with the flagging logic:
this.startTracking(); // start tracking right away
this.isLeaving = new Boolean(false); // flag for if the user is leaving page
this.isComing = new Boolean(true); // flag for if the user is entering page
this.embedded = document.getElementsByTagName('embed');
this.prevFocus = undefined;
window.onfocus = function() {
if(tracker.prevFocus !== tracker.embedded[0]) { // if the previously focused element was not the embedded document
if(tracker.isComing != true && tracker.isLeaving != true) { // if user is not leaving or entering
tracker.startTracking();
}else{
tracker.isComing = false;
}
}else{
tracker.prevFocus = undefined;
}
}
window.onblur = function() {
if(document.activeElement !== tracker.embedded[0]) { // if they are are not focused on the document
if(tracker.isComing != true && tracker.isLeaving != true) { // if user is not leaving or entering
tracker.stopTracking();
}
}else{
tracker.prevFocus = tracker.embedded[0];
}
}
window.onbeforeunload = function() {
tracker.stopTracking();
tracker.isLeaving = true;
alert('Training module has been closed');
}