How to Check Website Traffic: A Developer's Guide

Master traffic analysis for Next.js applications with GA4 implementation, server-side tracking, Core Web Vitals monitoring, and privacy-compliant analytics strategies.

Why Website Traffic Analysis Matters for Developers

Every web developer eventually faces the question: how do I actually track what's happening on my site? Beyond vanity metrics like total visits, understanding website traffic requires a strategic approach to data collection, analysis, and interpretation. For Next.js developers building modern web applications, the analytics landscape has evolved significantly with privacy regulations, browser restrictions on cookies, and the shift to event-based tracking models.

This guide covers the technical foundations of website traffic analysis from a developer's perspective, focusing on implementation strategies that respect user privacy while delivering actionable insights. We'll explore everything from setting up Google Analytics 4 correctly to implementing server-side tracking, understanding Core Web Vitals, and building dashboards that help you make data-driven decisions about your applications.

The Modern Analytics Challenge

Modern web development presents unique challenges for traffic analysis. Third-party cookies, once the backbone of cross-site tracking, are being phased out by browsers. Safari's Intelligent Tracking Prevention, Firefox's enhanced tracking protection, and Chrome's planned cookie deprecation have fundamentally changed how we collect and interpret visitor data.

For developers building Next.js applications, this shift actually presents an opportunity. Rather than relying on fragile client-side tracking scripts, we can build analytics systems that are more performant, more privacy-compliant, and more accurate. Server-side analytics, combined with modern tools like Vercel Analytics and purpose-built solutions, provide reliable data without the overhead and privacy concerns of traditional approaches.

The key is understanding what metrics actually matter for your application and implementing the right tools to track them effectively.

Essential Traffic Metrics Every Developer Should Track

Understanding Core Traffic Metrics

Website traffic analysis begins with understanding the fundamental metrics that describe how users interact with your site. While the specific metrics that matter most depend on your application's goals, certain measurements provide foundational insights that every developer should understand.

Unique Visitors represent the number of distinct individuals who visit your site within a specified time frame. Unlike total visits, unique visitors count each person only once, providing a clearer picture of your actual audience reach. For Next.js applications, this metric helps you understand whether your content and features are attracting new users or primarily serving repeat visitors. A healthy ratio of new to returning visitors often indicates both effective acquisition and satisfying user experience.

Sessions capture individual visits to your site, including all page views and interactions that occur within a contiguous timeframe. Google Analytics 4 defines a session as a group of user interactions that occur within a 30-minute window, though this can vary based on your configuration. Sessions provide context for understanding engagement - a site with high unique visitors but low sessions per visitor might have an acquisition problem, while high sessions with low engagement might indicate issues with content quality or site performance.

Pageviews count every page load on your site, including repeat views of the same page. This metric helps you understand which content resonates most with your audience. For content-heavy Next.js applications, tracking pageviews across different sections reveals where users spend their time and which features drive the most engagement. Comparing pageviews to unique visitors can also help identify whether users are exploring deeply or bouncing after a single page view.

As noted by MetricsWatch's analysis of key traffic metrics, these foundational measurements provide the baseline for understanding your application's performance and making informed decisions about where to focus development efforts.

Core Traffic Metrics Overview

Key measurements for understanding user behavior on your site

Unique Visitors

Distinct individuals who visit your site, providing a clear picture of your actual audience reach and helping identify acquisition effectiveness.

Sessions

Groups of user interactions within a 30-minute window, providing context for understanding engagement patterns and content effectiveness.

Pageviews

Every page load counted, helping identify which content resonates most and where users spend their time across your application.

Traffic Sources

Categorized origins of your visitors including organic search, direct, referral, social, and paid traffic for understanding acquisition channels.

Bounce Rate

Percentage of visitors who leave after viewing only one page, highlighting potential content relevance or performance issues.

Conversion Rate

Percentage of visitors completing desired actions, directly tying traffic to meaningful business outcomes and ROI.

Traffic Sources and Attribution

Understanding where your traffic comes from is essential for optimizing your acquisition strategies and measuring marketing effectiveness. Traffic sources fall into several broad categories that each tell a different story about your site's performance.

Traffic Source	Characteristics	Best Practices
Organic Search	Users find you via search engines, indicates active intent	Focus on technical SEO implementation, proper metadata, semantic HTML
Direct Traffic	URL typed directly or bookmarked usage	Build brand recognition, encourage bookmarking
Referral Traffic	Links from external websites	Cultivate partnerships, create shareable content
Social Traffic	Visitors from social media platforms	Tailor content for each platform's audience
Paid Traffic	Ads and sponsored content	Implement proper attribution modeling

Organic search traffic represents visitors who found your site through search engines like Google, Bing, or DuckDuckGo. This traffic is particularly valuable because it indicates that users actively searched for something your site provides. For Next.js applications, organic search performance is closely tied to technical SEO implementation, including proper metadata, semantic HTML, and performance optimization that search engines reward with better rankings.

Direct traffic captures visitors who type your URL directly into their browser or use bookmarks. This often indicates strong brand recognition and loyal users who return frequently. However, direct traffic can also include visitors from apps, email clients, or other sources that browsers can't properly categorize, so it's not always a clean metric.

Referral traffic comes from external websites that link to your pages. This traffic source reveals which external sites find your content valuable enough to link to and can help identify partnership opportunities. For developers, referral analysis can also reveal if other sites are hotlinking to your assets or if competitors are analyzing your traffic patterns.

Social traffic originates from social media platforms like Twitter, LinkedIn, Facebook, or Reddit. This traffic often correlates with content marketing success and community engagement. The quality of social traffic varies significantly by platform - LinkedIn visitors might have higher conversion intent than Twitter visitors, for example.

Paid traffic from advertising campaigns requires careful attribution to understand true return on investment. Modern analytics tools provide sophisticated attribution models that help you understand which campaigns and keywords drive valuable actions, though these models involve assumptions that can significantly affect the results.

As covered in Kinsta's comprehensive analysis of traffic analysis tools, understanding these source categories helps you allocate development and marketing resources more effectively.

Implementing Google Analytics 4 in Next.js

Setting Up GA4 with the Next.js Integration

Google Analytics 4 represents Google's next-generation measurement platform, built around an event-based data model rather than the session-based model of Universal Analytics. For Next.js developers, GA4 offers several advantages including automatic event tracking, better integration with Google's advertising products, and improved support for privacy regulations.

The official @next/third-parties library provides the recommended approach for implementing GA4 in Next.js applications. This library offers optimized loading that minimizes impact on page performance while ensuring accurate tracking. As documented in the Next.js Third Parties documentation, this integration handles the complexities of proper script loading and event tracking automatically.

The following examples demonstrate both automatic and manual event tracking approaches for comprehensive GA4 implementation in your Next.js projects.

Google Analytics 4 Integration for Next.js

1import { GoogleAnalytics } from '@next/third-parties/google';2 3export default function Analytics({ GA_MEASUREMENT_ID }) {4 return (5 <GoogleAnalytics6 gaId={GA_MEASUREMENT_ID}7 nonce="use-random-nonce-here"8 />9 );10}11 12// lib/analytics.ts - Custom event tracking13export function trackEvent({14 action,15 category,16 label,17 value,18}: {19 action: string;20 category: string;21 label?: string;22 value?: number;23}) {24 if (typeof window !== 'undefined' && window.gtag) {25 window.gtag('event', action, {26 event_category: category,27 event_label: label,28 value: value,29 });30 }31}32 33// Track page views manually if needed34export function trackPageView(url: string, title: string) {35 if (typeof window !== 'undefined' && window.gtag) {36 window.gtag('config', process.env.NEXT_PUBLIC_GA_ID, {37 page_path: url,38 page_title: title,39 });40 }41}

Understanding GA4's Event Model

GA4 fundamentally changes how you think about analytics by treating everything as an event. Unlike Universal Analytics, which distinguished between pageviews, events, transactions, and other hit types, GA4 consolidates everything under a unified event model. This approach provides more flexibility and enables more sophisticated analysis.

The GA4 event model includes four distinct categories:

Automatically collected events: page_view, scroll, click - tracked without any code changes
Enhanced measurement events: file_download, video_progress, scroll - enabled in GA4 interface
Recommended events: purchase, login, sign_up, add_to_cart - industry-standard events
Custom events: User-defined events for specific use cases unique to your application

The following example demonstrates e-commerce event tracking for a Next.js application, capturing both add_to_cart and purchase events with full product details.

E-commerce Event Tracking in Next.js

1'use client';2 3import { trackEvent } from '@/lib/analytics';4 5interface Product {6 id: string;7 name: string;8 price: number;9 category: string;10}11 12export function trackAddToCart(product: Product, quantity: number = 1) {13 trackEvent({14 action: 'add_to_cart',15 category: 'Ecommerce',16 label: product.name,17 value: product.price * quantity,18 });19 20 // GA4 recommended event parameters21 if (typeof window !== 'undefined' && window.gtag) {22 window.gtag('event', 'add_to_cart', {23 currency: 'USD',24 value: product.price * quantity,25 items: [{26 item_id: product.id,27 item_name: product.name,28 item_category: product.category,29 price: product.price,30 quantity: quantity,31 }],32 });33 }34}35 36export function trackPurchase(orderId: string, items: Product[], total: number) {37 trackEvent({38 action: 'purchase',39 category: 'Ecommerce',40 label: `Order ${orderId}`,41 value: total,42 });43 44 if (typeof window !== 'undefined' && window.gtag) {45 window.gtag('event', 'purchase', {46 transaction_id: orderId,47 value: total,48 currency: 'USD',49 items: items.map(item => ({50 item_id: item.id,51 item_name: item.name,52 item_category: item.category,53 price: item.price,54 })),55 });56 }57}

Server-Side Analytics for Better Performance

Why Server-Side Tracking Matters

Client-side analytics scripts, while convenient, come with significant drawbacks for modern web applications. They add JavaScript overhead that can delay page rendering, they can be blocked by browser extensions and privacy tools, and they often provide incomplete data due to increasing browser restrictions on third-party cookies.

Server-side analytics solves these problems by collecting data on your server before sending it to your analytics provider. For Next.js applications running on Vercel or similar platforms, server-side tracking can be implemented using Edge Functions or API routes that capture interaction data and forward it to analytics services. This approach is particularly valuable when combined with AI-powered automation workflows that can process analytics data in real-time.

This approach offers several advantages. First, server-side tracking is more reliable because it's not subject to browser blocking or network issues on the client side. Second, it can capture events that happen before JavaScript loads, providing more complete data. Third, it often performs better because you're not adding client-side JavaScript that the browser needs to download and execute.

Vercel Analytics provides an excellent option for server-side analytics that's specifically designed for Next.js applications. The integration works automatically with Vercel's edge network, collecting Web Vitals metrics and page view data without any client-side JavaScript.

Vercel Analytics Integration

1import { Analytics } from '@vercel/analytics/react';2 3export default function RootLayout({ children }) {4 return (5 <html lang="en">6 <head>7 <meta charSet="utf-8" />8 <meta name="viewport" content="width=device-width, initial-scale=1" />9 </head>10 <body>11 {children}12 <Analytics />13 </body>14 </html>15 );16}

Server-Side Event Collection API

1import { NextRequest, NextResponse } from 'next/server';2 3export async function POST(request: NextRequest) {4 const body = await request.json();5 6 if (!body.event || !body.properties) {7 return NextResponse.json(8 { error: 'Invalid event data' },9 { status: 400 }10 );11 }12 13 const enrichedEvent = {14 ...body,15 timestamp: new Date().toISOString(),16 url: request.headers.get('referer'),17 userAgent: request.headers.get('user-agent'),18 ip: request.ip || 'unknown',19 };20 21 await sendToAnalyticsService(enrichedEvent);22 return NextResponse.json({ success: true });23}24 25async function sendToAnalyticsService(event: Record<string, unknown>) {26 const response = await fetch('https://your-analytics-endpoint.com/collect', {27 method: 'POST',28 headers: {29 'Content-Type': 'application/json',30 'Authorization': `Bearer ${process.env.ANALYTICS_API_KEY}`,31 },32 body: JSON.stringify(event),33 });34 35 return response.ok;36}

Core Web Vitals: The Performance Metrics That Matter

Understanding Core Web Vitals

Core Web Vitals are Google's set of three specific performance metrics that measure user experience: Largest Contentful Paint (LCP), First Input Delay (FID) / Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS). These metrics directly impact both user experience and search engine rankings, making them essential for any web developer to understand and optimize.

Largest Contentful Paint (LCP) measures loading performance. It marks the point in page load timeline when the largest image or text block is rendered on screen. A good LCP score is 2.5 seconds or less, while anything above 4 seconds is considered poor. For Next.js applications, optimizing LCP typically involves ensuring critical content loads quickly, using appropriate image sizing and formats, and minimizing render-blocking resources.

Interaction to Next Paint (INP) measures interactivity - the response to user input. INP has replaced FID as the Core Web Vitals metric for interactivity. A good INP is 200 milliseconds or less. For developers, this metric highlights the importance of minimizing JavaScript execution time and breaking up long tasks that could delay response to user input.

Cumulative Layout Shift (CLS) measures visual stability. It quantifies how much visible content shifts unexpectedly during page load. A good CLS score is 0.1 or less. This metric is particularly important for preventing user frustration - nothing is more annoying than trying to click a button that moves away as the page loads.

The following code example demonstrates how to implement comprehensive Web Vitals monitoring using the web-vitals library, sending data to your analytics endpoint for production monitoring.

Web Vitals Monitoring in Production

1import { onCLS, onFID, onLCP, onFCP, onTTFB } from 'web-vitals';2 3type ReportHandler = (metric: {4 name: string;5 value: number;6 rating: string;7 delta: number;8 id: string;9}) => void;10 11export function reportWebVitals(handler: ReportHandler) {12 onCLS(handler);13 onINP(handler);14 onLCP(handler);15 onFCP(handler);16 onTTFB(handler);17}18 19// Default handler that sends to analytics20export function sendToAnalytics(metric: ReportHandler extends (h: infer T) => void ? T : never) {21 const body = JSON.stringify({22 name: metric.name,23 value: metric.value,24 rating: metric.rating,25 delta: metric.delta,26 id: metric.id,27 url: window.location.href,28 userAgent: navigator.userAgent,29 });30 31 // Use sendBeacon for reliable delivery32 if (navigator.sendBeacon) {33 const blob = new Blob([body], { type: 'application/json' });34 navigator.sendBeacon('/api/analytics/vitals', blob);35 } else {36 fetch('/api/analytics/vitals', {37 method: 'POST',38 body,39 keepalive: true,40 });41 }42}43 44// Initialize in your root layout45export function initWebVitals() {46 reportWebVitals(sendToAnalytics);47}

Core Web Vitals Benchmarks

2.5s or less

LCP (Good)

200ms or less

INP (Good)

0.1 or less

CLS (Good)

4.0s or more

LCP (Poor)

Building Effective Traffic Dashboards

Creating Actionable Analytics Views

Raw analytics data becomes useful when organized into dashboards that highlight actionable insights. For developers managing Next.js applications, effective dashboards combine traffic metrics with performance indicators and business outcomes.

The key to effective dashboards is focusing on metrics that connect technical performance to business outcomes:

Traffic volume and trends over time
Traffic source breakdown and acquisition cost by channel
Core Web Vitals distribution and trends
Conversion rates by traffic source and page
Error rates and performance incidents

The following dashboard component demonstrates how to combine multiple data sources into an actionable traffic overview with trend visualization.

Traffic Overview Dashboard Component

1'use client';2 3import { useMemo } from 'react';4 5interface TrafficOverviewProps {6 data: {7 dailyVisitors: { date: string; count: number }[];8 trafficSources: { source: string; visitors: number; conversions: number }[];9 webVitals: { date: string; lcp: number; cls: number; inp: number }[];10 };11}12 13export default function TrafficOverview({ data }: TrafficOverviewProps) {14 const conversionRateBySource = useMemo(() => {15 return data.trafficSources.map(source => ({16 name: source.source,17 rate: ((source.conversions / source.visitors) * 100).toFixed(2),18 }));19 }, [data.trafficSources]);20 21 const totalVisitors = useMemo(() => {22 return data.dailyVisitors.reduce((sum, day) => sum + day.count, 0);23 }, [data.dailyVisitors]);24 25 const avgLCP = useMemo(() => {26 const sum = data.webVitals.reduce((s, v) => s + v.lcp, 0);27 return (sum / data.webVitals.length).toFixed(2);28 }, [data.webVitals]);29 30 return (31 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">32 <div className="bg-white p-6 rounded-lg shadow border">33 <h3 className="text-gray-500 text-sm">Total Visitors</h3>34 <p className="text-3xl font-bold">{totalVisitors.toLocaleString()}</p>35 </div>36 <div className="bg-white p-6 rounded-lg shadow border">37 <h3 className="text-gray-500 text-sm">Avg LCP</h3>38 <p className="text-3xl font-bold">{avgLCP}s</p>39 </div>40 <div className="bg-white p-6 rounded-lg shadow border">41 <h3 className="text-gray-500 text-sm">Conversion Rate</h3>42 <p className="text-3xl font-bold">43 {(data.trafficSources.reduce((s, src) => s + src.conversions, 0) /44 data.trafficSources.reduce((s, src) => s + src.visitors, 0) * 10045 ).toFixed(2)}%46 </p>47 </div>48 <div className="bg-white p-6 rounded-lg shadow border">49 <h3 className="text-gray-500 text-sm">Data Freshness</h3>50 <p className="text-3xl font-bold">Live</p>51 </div>52 </div>53 );54}

Setting Up Alerts and Monitoring

Proactive monitoring through automated alerts helps you respond to traffic anomalies before they become significant problems. Most analytics platforms support alert configuration based on various triggers.

Google Analytics 4 offers automated insights that detect significant changes in your data, but you can also create custom alerts for specific metrics. Common alert configurations include:

Sudden drops in traffic indicating server issues or broken links
Unusual spikes that could signal bot traffic or successful campaigns
Performance regressions beyond acceptable thresholds
Error rate increases in tracked conversion events

For critical applications, implementing custom alerting through your own infrastructure provides more control and flexibility. The following example demonstrates a flexible alert monitoring system that can integrate with notification services like Slack or PagerDuty.

Custom Alert Monitoring System

1interface AlertCondition {2 metric: string;3 operator: 'gt' | 'lt' | 'change';4 threshold: number;5 timeWindow: number;6}7 8export async function checkAlertConditions(9 conditions: AlertCondition[],10 currentData: Record<string, number>11): Promise<{ triggered: boolean; condition: AlertCondition }[]> {12 const triggered = [];13 14 for (const condition of conditions) {15 const currentValue = currentData[condition.metric];16 if (currentValue === undefined) continue;17 18 let isTriggered = false;19 20 switch (condition.operator) {21 case 'gt':22 isTriggered = currentValue > condition.threshold;23 break;24 case 'lt':25 isTriggered = currentValue < condition.threshold;26 break;27 case 'change':28 isTriggered = false;29 break;30 }31 32 if (isTriggered) {33 triggered.push({ triggered: true, condition });34 await sendAlert(condition, currentValue);35 }36 }37 38 return triggered;39}40 41async function sendAlert(condition: AlertCondition, value: number) {42 await fetch(process.env.ALERT_WEBHOOK_URL!, {43 method: 'POST',44 body: JSON.stringify({45 alert: 'Traffic Alert',46 message: `${condition.metric} is ${condition.operator} ${condition.threshold}: ${value}`,47 timestamp: new Date().toISOString(),48 severity: condition.operator === 'lt' ? 'warning' : 'info',49 }),50 });51}

Privacy-Compliant Analytics in 2025

Navigating the Privacy Landscape

Privacy regulations (GDPR, CCPA) and browser changes have fundamentally changed how we collect and analyze website traffic data. For developers implementing analytics in 2025, privacy compliance is essential. As discussed in Kinsta's analysis of analytics tools, the industry is moving toward privacy-first approaches that provide useful data while respecting user privacy.

The key principles for privacy-compliant analytics include:

Collecting only data you actually need
Providing clear privacy notices and obtaining consent where required
Anonymizing or masking personal data wherever possible
Implementing data retention policies that delete old data
Ensuring your analytics providers meet your compliance requirements

Privacy-first analytics also supports your SEO strategy by avoiding the penalties that can come from aggressive tracking practices.

The following utilities demonstrate practical implementations for privacy-compliant analytics, including user ID anonymization, PII stripping, and anonymous user identification.

Privacy-Compliant Analytics Utilities

1// Hash user identifiers for anonymization2export async function hashUserId(userId: string): Promise<string> {3 const encoder = new TextEncoder();4 const data = encoder.encode(userId);5 const hashBuffer = await crypto.subtle.digest('SHA-256', data);6 const hashArray = Array.from(new Uint8Array(hashBuffer));7 return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');8}9 10// Strip personally identifiable information from event data11export function sanitizeEventData(12 event: Record<string, unknown>13): Record<string, unknown> {14 const sensitiveFields = ['email', 'name', 'phone', 'address', 'ip'];15 const sanitized = { ...event };16 17 for (const field of sensitiveFields) {18 if (field in sanitized) {19 delete sanitized[field];20 }21 }22 23 return sanitized;24}25 26// Generate a random user identifier that persists locally27export function getOrCreateAnonymousId(): string {28 if (typeof window === 'undefined') return '';29 30 let id = localStorage.getItem('anonymous_id');31 if (!id) {32 id = crypto.randomUUID();33 localStorage.setItem('anonymous_id', id);34 }35 return id;36}

Best Practices for Traffic Analysis Implementation

Code Organization and Maintainability

As your analytics implementation grows, proper code organization becomes essential. Rather than scattering tracking calls throughout your application, centralize your analytics logic in dedicated modules that provide consistent interfaces and easy configuration. Our web development services include comprehensive architecture review to ensure your analytics implementation scales with your application.

A well-organized analytics module should provide:

Consistent event naming conventions across your application
Type-safe tracking functions with proper TypeScript definitions
Easy configuration for different environments
Graceful degradation when analytics aren't available
Debugging utilities for development and testing

The following TypeScript implementation demonstrates a comprehensive GA4 analytics service with proper typing, initialization handling, and privacy-compliant user identification.

Comprehensive GA4 Analytics Service

1export type AnalyticsEvent = {2 action: string;3 category: string;4 label?: string;5 value?: number;6 properties?: Record<string, unknown>;7};8 9export interface AnalyticsService {10 track(event: AnalyticsEvent): void;11 pageView(path: string, title?: string): void;12 identify(userId: string, traits?: Record<string, unknown>): void;13}14 15export class GA4Service implements AnalyticsService {16 private initialized = false;17 private readonly measurementId: string;18 19 constructor(measurementId: string) {20 this.measurementId = measurementId;21 }22 23 private ensureInitialized() {24 if (this.initialized || typeof window === 'undefined') return;25 26 if (window.gtag) {27 this.initialized = true;28 }29 }30 31 track(event: AnalyticsEvent) {32 this.ensureInitialized();33 if (typeof window !== 'undefined' && window.gtag) {34 window.gtag('event', event.action, {35 event_category: event.category,36 event_label: event.label,37 value: event.value,38 ...event.properties,39 });40 }41 }42 43 pageView(path: string, title?: string) {44 this.ensureInitialized();45 if (typeof window !== 'undefined' && window.gtag) {46 window.gtag('config', this.measurementId, {47 page_path: path,48 page_title: title,49 });50 }51 }52 53 identify(userId: string, traits?: Record<string, unknown>) {54 this.ensureInitialized();55 if (typeof window !== 'undefined' && window.gtag) {56 window.gtag('set', 'user_properties', {57 user_id: this.hashUserId(userId),58 ...traits,59 });60 }61 }62 63 private async hashUserId(userId: string): Promise<string> {64 const encoder = new TextEncoder();65 const data = encoder.encode(userId);66 const hashBuffer = await crypto.subtle.digest('SHA-256', data);67 const hashArray = Array.from(new Uint8Array(hashBuffer));68 return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');69 }70}71 72// Factory function for creating analytics service73export function createAnalyticsService(): AnalyticsService {74 return new GA4Service(process.env.NEXT_PUBLIC_GA_ID!);75}

Testing Analytics Implementation

Testing analytics implementations is often overlooked but is essential for ensuring data quality. Without proper testing, you might deploy changes that break tracking entirely or send incorrect data that invalidates your analysis.

Effective analytics testing includes:

Unit tests for tracking functions and event formatting
Integration tests that verify events reach your analytics provider
End-to-end tests that validate tracking in realistic user flows
Debug tools that help verify tracking during development

The following Jest test examples demonstrate how to properly test your analytics functions, including proper mocking of the global gtag object.

Analytics Testing with Jest

1import { trackEvent, trackPageView } from '../analytics';2import { jest } from '@jest/globals';3 4// Mock gtag before each test5beforeEach(() => {6 (window as Window & { gtag?: jest.Mock }).gtag = jest.fn();7});8 9// Clear mocks after each test10afterEach(() => {11 jest.clearAllMocks();12});13 14describe('Analytics', () => {15 describe('trackEvent', () => {16 it('should call gtag with correct parameters', () => {17 trackEvent({18 action: 'purchase',19 category: 'Ecommerce',20 label: 'Premium Plan',21 value: 99,22 });23 24 expect(window.gtag).toHaveBeenCalledWith('event', 'purchase', {25 event_category: 'Ecommerce',26 event_label: 'Premium Plan',27 value: 99,28 });29 });30 31 it('should handle events without optional parameters', () => {32 trackEvent({33 action: 'button_click',34 category: 'Engagement',35 });36 37 expect(window.gtag).toHaveBeenCalledWith('event', 'button_click', {38 event_category: 'Engagement',39 });40 });41 42 it('should not throw on server-side', () => {43 const originalWindow = global.window;44 delete (global as unknown as { window?: Window }).window;45 46 expect(() => {47 trackEvent({48 action: 'test',49 category: 'Test',50 });51 }).not.toThrow();52 53 global.window = originalWindow;54 });55 });56 57 describe('trackPageView', () => {58 it('should call gtag config with page path and title', () => {59 trackPageView('/products', 'Products Page');60 61 expect(window.gtag).toHaveBeenCalledWith(62 'config',63 expect.any(String),64 { page_path: '/products', page_title: 'Products Page' }65 );66 });67 68 it('should work with just path', () => {69 trackPageView('/about');70 71 expect(window.gtag).toHaveBeenCalledWith(72 'config',73 expect.any(String),74 { page_path: '/about', page_title: undefined }75 );76 });77 });78});

Frequently Asked Questions

How do I set up GA4 in my Next.js application?

Use the official @next/third-parties library for optimized GA4 integration. Simply import GoogleAnalytics and add it to your layout component with your measurement ID. This provides automatic page view tracking and optimized loading that minimizes performance impact. Configure your measurement ID in environment variables and use the Next.js App Router conventions for proper integration.

What's the difference between client-side and server-side analytics?

Client-side tracking uses JavaScript running in the user's browser to collect data, which can be blocked by extensions or privacy tools. Server-side tracking collects data on your server before sending it to analytics providers, offering better reliability, privacy compliance, and performance. Server-side tracking is particularly valuable for privacy-conscious implementations and accurate data collection.

How do Core Web Vitals affect my site's traffic?

Core Web Vitals (LCP, INP, CLS) are Google ranking factors that also influence user behavior. Sites with poor Core Web Vitals tend to have higher bounce rates and lower conversion rates. [Optimizing these metrics](https://web.dev/vitals/) improves both SEO performance and user experience. Monitoring Web Vitals alongside traffic data helps identify performance issues before they significantly impact your business metrics.

What analytics tools work best for privacy compliance?

Privacy-first tools like Fathom, Plausible, and Simple Analytics don't use cookies and collect minimal data, making them excellent choices for smaller sites. For enterprise needs, server-side tracking with proper data anonymization and consent management provides both accuracy and compliance with regulations like GDPR and CCPA. Consider your specific compliance requirements when selecting tools.

How often should I review my analytics data?

Set up automated alerts for significant changes and review dashboards weekly for trends. Conduct deeper analysis monthly to understand patterns and inform development priorities. Consistency in review helps identify issues early and measure the impact of changes. The key is establishing a regular cadence that works for your team and sticking to it.

Ready to Build High-Performing Web Applications?

Our team specializes in building Next.js applications with integrated analytics, performance optimization, and SEO best practices.

Testing TypeScript Apps Using Jest

Learn how to set up comprehensive testing for your TypeScript applications with Jest, including unit tests, integration tests, and best practices for test organization.

Learn more

Understanding Using Globs Node.js

Master glob patterns in Node.js for file matching, batch operations, and building tools that work with file systems efficiently.

Learn more

Idempotent API Design

Build reliable APIs with idempotent operations that can handle network failures, retries, and concurrent requests safely.

Learn more