Google Analytics
The most widely used web analytics platform. Track user behavior, conversions, and marketing campaign performance across websites and apps. Free tier covers most small to medium businesses.
Why Google Analytics?
You need comprehensive web analytics
You're running digital marketing campaigns
You want free powerful analytics tools
Signal Breakdown
What drives the Trust Score
Download Trend
Last 12 months
Tradeoffs & Caveats
Know before you commitYou need advanced privacy controls (GA4 has limitations)
You're building privacy-first applications
You want real-time analytics without sampling
Pricing
Free tier & paid plans
GA4 free for most use cases
GA 360: $50K+/yr (enterprise)
GA4 is free for <10M hits/mo
Alternative Tools
Other options worth considering
Often Used Together
Complementary tools that pair well with Google Analytics
Learning Resources
Docs, videos, tutorials, and courses
Get Started
Repository and installation options
View on GitHub
github.com/googleanalytics/ga4-web-measurement
npm install gtag.js<!-- Add gtag script to <head> of your HTML -->Quick Start
Copy and adapt to get going fast
// app/layout.tsx — Next.js App Router with @next/third-parties
import { GoogleAnalytics } from '@next/third-parties/google';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
<GoogleAnalytics gaId="G-XXXXXXXXXX" />
</html>
);
}
// Track a custom event
import { sendGAEvent } from '@next/third-parties/google';
sendGAEvent('event', 'button_click', { button_name: 'upgrade' });Code Examples
Common usage patterns
Track custom conversion events
Send ecommerce purchase events to GA4
// After a successful purchase
gtag('event', 'purchase', {
transaction_id: order.id,
value: order.total,
currency: 'USD',
items: order.items.map(item => ({
item_id: item.sku,
item_name: item.name,
price: item.price,
quantity: item.quantity,
})),
});SPA route change tracking
Track page views on client-side navigation in Next.js
'use client';
import { usePathname, useSearchParams } from 'next/navigation';
import { useEffect } from 'react';
export function AnalyticsTracker() {
const pathname = usePathname();
const searchParams = useSearchParams();
useEffect(() => {
if (typeof window.gtag === 'function') {
window.gtag('config', process.env.NEXT_PUBLIC_GA_ID!, {
page_path: pathname + searchParams.toString(),
});
}
}, [pathname, searchParams]);
return null;
}User ID tracking
Associate analytics data with authenticated users
// After user logs in
gtag('config', 'G-XXXXXXXXXX', {
user_id: user.id,
});
// Set user properties
gtag('set', 'user_properties', {
plan: user.plan,
signup_date: user.createdAt,
});Community Notes
Real experiences from developers who've used this tool