38 lines
976 B
TypeScript
38 lines
976 B
TypeScript
'use client';
|
|
|
|
import { useOpenPanel } from '@openpanel/nextjs';
|
|
import { usePathname } from 'next/navigation';
|
|
import { useEffect, useRef } from 'react';
|
|
|
|
export function ScrollTracker() {
|
|
const { track } = useOpenPanel();
|
|
const pathname = usePathname();
|
|
const hasFired = useRef(false);
|
|
|
|
useEffect(() => {
|
|
hasFired.current = false;
|
|
|
|
const handleScroll = () => {
|
|
if (hasFired.current) {
|
|
return;
|
|
}
|
|
|
|
const scrollTop = window.scrollY;
|
|
const docHeight =
|
|
document.documentElement.scrollHeight - window.innerHeight;
|
|
const percent =
|
|
docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
|
|
|
|
if (percent >= 50) {
|
|
hasFired.current = true;
|
|
track('scroll_half_way', { percent: Math.round(percent) });
|
|
}
|
|
};
|
|
|
|
window.addEventListener('scroll', handleScroll, { passive: true });
|
|
return () => window.removeEventListener('scroll', handleScroll);
|
|
}, [track, pathname]);
|
|
|
|
return null;
|
|
}
|