Login/Register
Is there a way track the focus on tab with Javascript?
Asked Answered
Solved javascriptgoogle-analyticsevent-handlinganalyticsdom-events
O

5

12
  • We need to track the EFFECTIVE time on site of our users
  • Most users, when they're done, leave the tab open and move to another tab
  • Time on site it's extremely inaccurate

Is there a Javascript Event to track the "loss of focus" of the current tab ?

Ocular answered 5/9, 2010 at 22:43 Comment(3)
hmm, I thought the blur event would fire when the user puts focus onto another tab? which of course only fires if the window had the physical focus to begin with. – Crenelate
Interesting question. I think the answer is "No" however. You can add a "mouseout" handler to the <body> or something, and track when the mouse leaves the window (which it will when the mouse is moved to select another tab), but you don't really know whether that's what's going to happen. – Inexpressible
@Crenelate I'm not seeing any "blur" events from <body> in Chrome at least. I do see "mouseout". – Inexpressible
K
15

This should work both on tab switch and on browser window losing focus:

function onBlur() {
    document.body.className = 'blurred';
};
function onFocus(){
    document.body.className = 'focused';
};

if (/*@cc_on!@*/false) { // check for Internet Explorer
    document.onfocusin = onFocus;
    document.onfocusout = onBlur;
} else {
    window.onfocus = onFocus;
    window.onblur = onBlur;
}
Knickerbocker answered 5/9, 2010 at 23:10 Comment(4)
If that actually works, that's one cool piece of code, lashtal! – Fart
Did it work? I have wondered about this myself. If you had to make any modifications, I would like to see your complete solution. Thanks! – Sydel
I just tested this; it works on both minimize and tab switch in Chrome, IE8, FF3.5. – Wincer
This doesn't seem to be triggering anything for me in Chrome v24 – Turfman
N
4

I would do something with mousemove and scroll and count a visitor as active as long as either of those trigger within some interval. That will also cover them leaving the browser open and leaving the computer.

Novgorod answered 10/9, 2010 at 9:15 Comment(0)
A
1

Which tab you are talking about? Is it your Nav/menu tab or Browser tab. I feel, you mean browser tab! I think it is not possible accurately. But what if you track few events like mousemove, focus etc and then fire an event that same some data (counter) on server. When user is on your page then he will do something something like move mouse, click somewhere etc. So difference in first page load and last event can tell the usage stat.

Attainment answered 15/9, 2010 at 11:50 Comment(0)
E
1

Though question was asked long ago, it might still be found by someone. In this case, use Page Visibility API:

https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API

document.visibilityState - to get a current tab state.
document.onvisibilitychange - to add a callback for state change.

Execration answered 6/9, 2021 at 14:12 Comment(0)
D
0
  <script>
    document.onvisibilitychange = () => {
      if (document.visibilityState === "hidden") {
        console.log("tab inactive");
      }
      if (document.visibilityState === "visible") {
        console.log("tab active");
      }
    };
  </script>
Dichroic answered 20/10, 2022 at 0:39 Comment(0)

© 2022 - 2025 — McMap. All rights reserved.