feat(analytics): add blog engagement, ToC tracking, and 404 monitoring
- Added BlogEngagementTracker for reading time and completion tracking - Added ToC click tracking in blog posts - Added global 404 error monitoring in not-found.tsx - Completed 'Total Transparency' suite
This commit is contained in:
53
components/analytics/BlogEngagementTracker.tsx
Normal file
53
components/analytics/BlogEngagementTracker.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect } from 'react';
|
||||
import { useAnalytics } from './useAnalytics';
|
||||
import { AnalyticsEvents } from './analytics-events';
|
||||
|
||||
interface BlogEngagementTrackerProps {
|
||||
title: string;
|
||||
slug: string;
|
||||
category?: string;
|
||||
readingTime: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* BlogEngagementTracker
|
||||
* Tracks reading time and article completion.
|
||||
*/
|
||||
export default function BlogEngagementTracker({
|
||||
title,
|
||||
slug,
|
||||
category,
|
||||
readingTime,
|
||||
}: BlogEngagementTrackerProps) {
|
||||
const { trackEvent } = useAnalytics();
|
||||
|
||||
useEffect(() => {
|
||||
// Article start
|
||||
trackEvent(AnalyticsEvents.BLOG_POST_VIEW, {
|
||||
title,
|
||||
slug,
|
||||
category,
|
||||
estimated_reading_time: readingTime,
|
||||
location: 'blog_post_pdp',
|
||||
});
|
||||
|
||||
const startTime = Date.now();
|
||||
|
||||
return () => {
|
||||
const dwellTime = Math.round((Date.now() - startTime) / 1000);
|
||||
|
||||
// We only consider it a "read" if they stay a reasonable amount of time
|
||||
// or if they scroll (covered by ScrollDepthTracker)
|
||||
trackEvent('blog_dwell_time', {
|
||||
title,
|
||||
slug,
|
||||
seconds: dwellTime,
|
||||
reading_time_completion: Math.min(100, Math.round((dwellTime / (readingTime * 60)) * 100)),
|
||||
});
|
||||
};
|
||||
}, [title, slug, category, readingTime, trackEvent]);
|
||||
|
||||
return null;
|
||||
}
|
||||
Reference in New Issue
Block a user