analytics

11 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Vercel Analytics managed service

Vercel provides a managed analytics service that automatically collects and visualizes Web Vitals metrics for your Next.js application, as an alternative to manually implementing custom analytics reporting.

useReportWebVitals hook for custom analytics

Next.js provides a useReportWebVitals hook that allows you to manage analytics reporting yourself. The hook accepts a callback function that receives a metric object. This hook requires the 'use client' directive when used in the App Router.

instrumentation-client.js for client-side setup

Next.js provides an instrumentation-client.js or instrumentation-client.ts file that runs before the application's frontend code starts executing. This file is ideal for setting up global analytics, error tracking, or performance monitoring tools. Create it in your application's root directory.

Web Vitals metrics tracked by Next.js

Next.js includes six Web Vitals metrics: Time to First Byte (TTFB), First Contentful Paint (FCP), Largest Contentful Paint (LCP), First Input Delay (FID), Cumulative Layout Shift (CLS), and Interaction to Next Paint (INP). These metrics are handled by checking the 'name' property of the metric object passed to useReportWebVitals.

Custom metrics in Pages Router

The Pages Router provides three additional custom metrics beyond core Web Vitals: 'Next.js-hydration' (time for page to start and finish hydrating in ms), 'Next.js-route-change-to-render' (time for page to start rendering after a route change in ms), and 'Next.js-render' (time for page to finish rendering after a route change in ms). These work in all browsers supporting the User Timing API.

App Router WebVitals component pattern

In the App Router, the most performant approach is to create a separate client component for useReportWebVitals and import it in the root layout. This confines the client boundary exclusively to the WebVitals component rather than making the entire layout a client component.

Sending metrics to external services

You can send Web Vitals metrics to external services using navigator.sendBeacon() if available, falling back to fetch() with keepalive: true. The metric object should be JSON stringified and sent to your analytics endpoint via POST request.

Google Analytics integration with Web Vitals

To integrate with Google Analytics, use window.gtag('event', metric.name, {...}) in the useReportWebVitals callback. Values must be integers, so multiply CLS by 1000 but use metric value directly for other metrics. Use metric.id as the event_label (unique per page load) and set non_interaction to true to avoid affecting bounce rate.

App Router useReportWebVitals example

Example of implementing useReportWebVitals in App Router: ```tsx 'use client' import { useReportWebVitals } from 'next/web-vitals' export function WebVitals() { useReportWebVitals((metric) => { switch (metric.name) { case 'FCP': { // handle FCP results } case 'LCP': { // handle LCP results } // ... } }) } ``` Then import and use in root layout: ```jsx import { WebVitals } from './_components/web-vitals' export default function Layout({ children }) { return ( <html> <body> <WebVitals /> {children} </body> </html> ) } ```

instrumentation-client.js example

Example of setting up error tracking in instrumentation-client.js: ```js // Initialize analytics before the app starts console.log('Analytics initialized') // Set up global error tracking window.addEventListener('error', (event) => { // Send to your error tracking service reportError(event.error) }) ```

Use useReportWebVitals hook for Core Web Vitals analytics

The useReportWebVitals hook should be used to send Core Web Vitals data to analytics tools.

Give your agent this brain