use-page-view/dist/use-page-view-BY9Dsxki.js

A React hook for tracking page views and user engagement time. This hook provides real-time tracking of how long users spend on a page, their activity status, and the ability to persist time tracking across page reloads.

import{useInterval as e}from"./use-interval-OzNazv7J.js";import*as t from"react";function n({pageId:n,userId:r,minTimeThreshold:i=5,heartbeatInterval:a=30,inactivityThreshold:o=30,onPageView:s,trackOnce:c=!1,trackOnceDelay:l=0}){let[u,d]=t.useState(0),[f,p]=t.useState(!0),m=t.useRef(0),h=t.useRef(0),g=t.useRef(s),_=t.useRef(!1);return t.useEffect(()=>{m.current=Date.now(),h.current=Date.now()},[]),t.useEffect(()=>{g.current=s},[s]),t.useEffect(()=>{if(c&&!_.current&&g.current&&m.current>0)if(l>0){let e=setTimeout(()=>{_.current||(_.current=!0,g.current?.({pageId:n,userId:r,timeSpent:l,isActive:!0}))},l*1e3);return()=>clearTimeout(e)}else _.current=!0,g.current({pageId:n,userId:r,timeSpent:0,isActive:!0})},[c,n,r,l]),t.useEffect(()=>{let e=()=>{document.hidden?p(!1):(p(!0),h.current=Date.now())},t=()=>{h.current=Date.now(),p(!0)};document.addEventListener(`visibilitychange`,e);let n=[`mousedown`,`mousemove`,`keypress`,`scroll`,`touchstart`,`click`];return n.forEach(e=>{document.addEventListener(e,t,{passive:!0})}),()=>{document.removeEventListener(`visibilitychange`,e),n.forEach(e=>{document.removeEventListener(e,t)})}},[]),e(()=>{if(m.current===0)return;let e=Date.now(),t=Math.floor((e-m.current)/1e3),n=e-h.current,r=n<o*1e3;d(t),p(r)},1e3),e(()=>{!c&&u>=i&&g.current&&m.current>0&&g.current({pageId:n,userId:r,timeSpent:u,isActive:f})},a*1e3),t.useEffect(()=>{let e=m.current;return()=>{if(!c&&e>0){let t=Math.floor((Date.now()-e)/1e3);t>=i&&g.current&&g.current({pageId:n,userId:r,timeSpent:t,isActive:!1})}}},[n,r,i,c]),{timeSpent:u,isActive:f}}export{n as usePageView};