@shware/analytics 2.17.3 → 3.0.0

package/dist/hooks/use-web-session-analytics.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/hooks/use-web-session-analytics.ts"],"sourcesContent":["/**\n * reference:\n * - Discover how long someone spends engaged on your website or app in Google Analytics](https://support.google.com/analytics/answer/11109416?hl=en)\n */\nimport { throttle } from '@shware/utils';\nimport { useCallback, useEffect, useRef } from 'react';\nimport { SESSION_TIMEOUT } from '../setup/session';\nimport { sendBeacon, track } from '../track/index';\n\n/**\n * 1. send session_start event when the page is loaded\n * 2. send scroll event when the user scrolls more than 90% of the page\n * 3. send user_engagement event when the page is hidden or the user is not focused\n */\nexport function useWebSessionAnalytics(pathname: string) {\n  const isActive = useRef(true);\n  const isFocused = useRef(true);\n  const isVisible = useRef(true);\n\n  const startTime = useRef(Date.now());\n  const accumulatedTime = useRef(0);\n\n  const hasSendScroll = useRef(false);\n\n  const updateAccumulator = useCallback(() => {\n    const now = Date.now();\n    if (isFocused.current && isVisible.current && isActive.current) {\n      const delta = now - startTime.current;\n      if (delta > 0 && delta < SESSION_TIMEOUT) {\n        accumulatedTime.current += delta;\n      }\n    }\n    startTime.current = now;\n  }, []);\n\n  const sendUserEngagement = useCallback(() => {\n    updateAccumulator();\n    const engagement_time_msec = accumulatedTime.current;\n    accumulatedTime.current = 0;\n    if (engagement_time_msec <= 0) return;\n    sendBeacon('user_engagement', { engagement_time_msec });\n  }, [updateAccumulator]);\n\n  const sendScroll = useCallback(() => {\n    updateAccumulator();\n    const engagement_time_msec = accumulatedTime.current;\n    accumulatedTime.current = 0;\n    if (engagement_time_msec <= 0) return;\n    track('scroll', { engagement_time_msec }, { enableThirdPartyTracking: false });\n  }, [updateAccumulator]);\n\n  // reset scroll state when the pathname changes, so we can send scroll when the user navigates to\n  // a new page\n  useEffect(() => {\n    hasSendScroll.current = false;\n  }, [pathname]);\n\n  useEffect(() => {\n    isFocused.current = typeof document !== 'undefined' && document.hasFocus();\n    isVisible.current = typeof document !== 'undefined' && document.visibilityState === 'visible';\n    startTime.current = Date.now();\n\n    track('session_start', undefined, { enableThirdPartyTracking: false });\n\n    const onFocus = () => {\n      updateAccumulator();\n      isFocused.current = true;\n    };\n\n    const onBlur = () => {\n      updateAccumulator();\n      isFocused.current = false;\n    };\n\n    const onPageShow = () => {\n      updateAccumulator();\n      isActive.current = true;\n    };\n\n    const onPageHide = () => {\n      updateAccumulator();\n      isActive.current = false;\n      sendUserEngagement();\n    };\n\n    const onVisibilityChange = () => {\n      updateAccumulator();\n      if (document.visibilityState === 'visible') {\n        isVisible.current = true;\n      } else {\n        isVisible.current = false;\n        sendUserEngagement();\n      }\n    };\n\n    const onScroll = throttle(() => {\n      updateAccumulator();\n      if (hasSendScroll.current) return;\n\n      // only send scroll when the user has scrolled more than 90% of the page\n      const scrollTop = window.scrollY || document.documentElement.scrollTop;\n      const windowHeight = window.innerHeight;\n      const docHeight = document.documentElement.scrollHeight;\n      if (docHeight === 0) return;\n      const scrollPercent = (scrollTop + windowHeight) / docHeight;\n      if (scrollPercent < 0.9) return;\n      hasSendScroll.current = true;\n\n      sendScroll();\n    }, 500);\n\n    const checkpointEvents = ['mousedown', 'keydown', 'touchstart'];\n    const checkpoint = throttle(updateAccumulator, 1000);\n\n    window.addEventListener('focus', onFocus, { passive: true });\n    window.addEventListener('blur', onBlur, { passive: true });\n    window.addEventListener('pageshow', onPageShow, { passive: true });\n    window.addEventListener('pagehide', onPageHide, { passive: true });\n    window.addEventListener('scroll', onScroll, { passive: true });\n    document.addEventListener('visibilitychange', onVisibilityChange, { passive: true });\n\n    // save checkpoint\n    checkpointEvents.forEach((event) => {\n      window.addEventListener(event, checkpoint, { passive: true, capture: true });\n    });\n\n    return () => {\n      window.removeEventListener('focus', onFocus);\n      window.removeEventListener('blur', onBlur);\n      window.removeEventListener('pageshow', onPageShow);\n      window.removeEventListener('pagehide', onPageHide);\n      window.removeEventListener('scroll', onScroll);\n      document.removeEventListener('visibilitychange', onVisibilityChange);\n\n      checkpointEvents.forEach((event) => {\n        window.removeEventListener(event, checkpoint);\n      });\n\n      onScroll.cancel();\n      checkpoint.cancel();\n    };\n  }, []);\n}\n"],"mappings":"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","names":[]}