Analytics Integration
Vercel Analytics, Google Analytics, custom events, and performance monitoring.
Overview
Analytics help understand user behavior and app performance.
Key Concepts
- Vercel Analytics β Web Vitals tracking
- Google Analytics β User behavior analytics
- Custom Events β Track specific user actions
- Performance Monitoring β Server and client metrics
- Error Tracking β Capture and report errors
Code Examples
// app/layout.js
import { Analytics } from '@vercel/analytics/react';
export default function Layout({ children }) {
return (
<html>
<body>
{children}
<Analytics />
</body>
</html>
);
}
// Custom analytics hook
'use client';
import { useEffect } from 'react';
export function useAnalytics() {
const trackEvent = (eventName, properties) => {
// Send to your analytics endpoint
fetch('/api/analytics', {
method: 'POST',
body: JSON.stringify({ event: eventName, properties, timestamp: Date.now() })
});
};
const trackPageView = (url) => {
trackEvent('page_view', { url });
};
const trackClick = (element) => {
trackEvent('click', { element: element.dataset.trackId });
};
return { trackEvent, trackPageView, trackClick };
}
// Usage
'use client';
function ProductCard({ product }) {
const { trackClick } = useAnalytics();
return (
<div
data-track-id={`product-${product.id}`}
onClick={(e) => trackClick(e.currentTarget)}
>
{product.name}
</div>
);
}
Practice
Implement analytics tracking for user interactions and page views.