auto-claude: subtask-4-5 - Add JSDoc to useScrollTracking.ts hook
This commit is contained in:
@@ -1,8 +1,37 @@
|
|||||||
|
/**
|
||||||
|
* Scroll Tracking Hook
|
||||||
|
* Tracks user scroll depth and sends events to Google Tag Manager
|
||||||
|
*/
|
||||||
|
|
||||||
import { useEffect, useRef } from 'react';
|
import { useEffect, useRef } from 'react';
|
||||||
import { trackScrollDepth } from '../services/gtm';
|
import { trackScrollDepth } from '../services/gtm';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Hook to track scroll depth for GTM
|
* Custom hook to track scroll depth for GTM analytics
|
||||||
|
*
|
||||||
|
* Monitors user scroll behavior and triggers GTM events when the user reaches
|
||||||
|
* specific depth milestones (25%, 50%, 75%, 90%, 100%). Each milestone is
|
||||||
|
* tracked only once per page visit to avoid duplicate events.
|
||||||
|
*
|
||||||
|
* Features:
|
||||||
|
* - Debounced scroll event handling (100ms) for performance
|
||||||
|
* - Tracks depth milestones: 25%, 50%, 75%, 90%, 100%
|
||||||
|
* - Prevents duplicate tracking of the same milestone
|
||||||
|
* - Automatically resets tracking state on route changes
|
||||||
|
* - Checks initial scroll position on mount
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* ```tsx
|
||||||
|
* function MyPage() {
|
||||||
|
* useScrollTracking();
|
||||||
|
* return <div>...</div>;
|
||||||
|
* }
|
||||||
|
* ```
|
||||||
|
*
|
||||||
|
* @remarks
|
||||||
|
* This hook should be used at the page/route level component to ensure
|
||||||
|
* accurate tracking across navigation. The tracking state is automatically
|
||||||
|
* reset when the URL pathname changes.
|
||||||
*/
|
*/
|
||||||
export const useScrollTracking = () => {
|
export const useScrollTracking = () => {
|
||||||
const trackedDepths = useRef(new Set<number>());
|
const trackedDepths = useRef(new Set<number>());
|
||||||
|
|||||||
Reference in New Issue
Block a user