How to track total time spent in view?

[ParthGandhi]

Im trying to track which sections of a dynamic page are most viewed. I've been able to track when an element enters/exits the view, but unsure how to track the total time a component is in view?

Specifically, where should I store the enter/exit timestamps? And how to handle the case where an element comes into view right after it exits, but possibly before the previous callback is run?

[ParthGandhi]

@thebuilder any thoughts on how to do this? Would appreciate it if you could point me in the right direction. Thank you!

[thebuilder]

You could have a useState that contains the start/exit timestamp, and calculate the time based on that.
You could use onChange to trigger the state updates/calculations you might need to do.

[hgrias]

@ParthGandhi Hey there, did you end up using this method to track how long a component is visible for? I want to send impression events only when the component is on the screen for over a second or so

[thebuilder]

Is the inView triggered correctly?

Also make sure to add impressionTracked in the dependency array, so it trigger the useEffect.

const [impressionTracked, setImpressionTracked] = useState(false);

const {ref, inView} = useInView()

useEffect(() => {
  if (!inView || impressionTracked) return;
  const timeout = setTimeout(() => {
    dataLayer.push('event');
    setImpressionTracked(true);
  }, 1000);

  return () => clearTimeout(timeout);
}, [inView, impressionTracked]);

[hgrias]

I don't think inView is being triggered correctly. Is this due to the ref not being attached to the div correctly? I don't need to wrap the div in the <InView> tag, correct?

[ParthGandhi]

Nah, you don't need to wrap in <InView>. When you say not being triggered correctly, do you mean it isn't triggered at all or that theres some cases where it doesn't trigger?

Other things I added:

1. use react-beforeunload to register the last event (because I sent 1 new event every second) before the tab was closed
2. use react-page-visibility so that the time is only registered when the tab is in focus.

If you're still unable to figure it out I can clean up our internal implementation and create a gist.

[hgrias]

It is not being triggered at all, unfortunately.

[hgrias]

I think I found the culprit - I needed to use ùseEffect instead of useInView as such:

const { ref, inView } = useInView({ threshold: 0.75 });

useEffect(() => {
  if (!inView || impressionTracked) return;
  const timeout = setTimeout(() => {
    console.log('IMPRESSION TRACKED');
    setImpressionTracked(true);
  }, 1000);

  return () => clearTimeout(timeout);
}, [inView, impressionTracked]);

Thank you both so much for your insight, I truly appreciate your time!