Adding analytics to Next.js

what is the best way to add analytics to a next.js site hosted on netlify

Excellent question — and one that depends a little on what kind of analytics you want (privacy-respecting, detailed user tracking, or performance metrics). Here’s a clear breakdown of **the best modern options** for adding analytics to a **Next.js site hosted on Netlify**, organized by goals 👇 --- ## 🧭 1. Privacy-Friendly & Simple (Best for Personal Sites / Blogs) ### **Option A: Netlify Analytics** - **Zero setup** — built directly into your Netlify dashboard. - **Tracks**: Page views, unique visitors, top pages, referrers, and resource usage. - **No client-side JS**, so it doesn’t affect performance or require cookies. - **Downside:** It’s a paid feature (~$9/mo per site) and doesn’t allow event tracking or custom funnels. ✅ **To enable:** 1. Go to your site’s **Netlify Dashboard → Analytics → Enable Analytics**. 2. That’s it — no code changes needed. --- ### **Option B: Plausible / Umami / Fathom (Lightweight, Privacy-Focused)** These are popular open-source or privacy-friendly services with great UX. #### Example: Plausible 1. Create an account at [https://plausible.io](https://plausible.io). 2. Add your domain and get your tracking snippet. 3. In your Next.js app, edit your `_app.tsx` or `_document.tsx`: ```tsx import Script from "next/script"; export default function MyApp({ Component, pageProps }) { return ( <> <Script strategy="afterInteractive" data-domain="yourdomain.com" src="https://plausible.io/js/script.js" /> <Component {...pageProps} /> </> ); } ``` 4. Redeploy to Netlify. 🧩 You can also **self-host Plausible or Umami** on Render, Fly.io, or your own VPS to avoid external dependencies. --- ## 📊 2. Full-Feature Analytics (Best for Marketing, Funnels, or E-Commerce) ### **Option A: Google Analytics 4 (GA4)** Still the most powerful if you want granular event tracking. ✅ **Steps:** 1. Create a property in Google Analytics → GA4. 2. Copy your Measurement ID (G-XXXXXX). 3. Add the GA4 tag in `_app.tsx`: ```tsx import Script from "next/script"; const GA_MEASUREMENT_ID = "G-XXXXXX"; export default function MyApp({ Component, pageProps }) { return ( <> <Script src={`https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`} strategy="afterInteractive" /> <Script id="ga-setup" strategy="afterInteractive"> {` window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '${GA_MEASUREMENT_ID}'); `} </Script> <Component {...pageProps} /> </> ); } ``` Optionally add event tracking with: ```tsx gtag('event', 'click', { event_category: 'button', event_label: 'signup' }); ``` --- ## 🧠 3. Developer-Centric or Self-Hosted Options | Tool | Highlights | |------|-------------| | **Umami** | 100% open source, simple UI, lightweight | | **PostHog** | Self-hosted product analytics with session replay and funnels | | **Tinybird / LogSnag** | Great for event streaming and custom dashboards | | **OpenPanel.io** | New open-source GA alternative, simple integration | For example, with Umami: ```tsx <Script async defer data-website-id="YOUR_UMAMI_ID" src="https://analytics.yourdomain.com/umami.js" /> ``` --- ## ⚡ 4. Performance + User Experience Metrics If you want to track **Core Web Vitals** or frontend performance: ### Use `next/script` with Vercel Analytics (works even on Netlify): ```bash npm install @vercel/analytics ``` Then: ```tsx import { Analytics } from "@vercel/analytics/react"; export default function App({ Component, pageProps }) { return ( <> <Component {...pageProps} /> <Analytics /> </> ); } ``` This gives you **real-user metrics (RUM)** and anonymous usage data. --- ## 🧩 Recommended Setup (Balanced & Modern) If you care about **speed, privacy, and simplicity**: > ✅ Use **Plausible** or **Umami** + optionally **@vercel/analytics** for Web Vitals. If you care about **marketing funnels and event tracking**: > ✅ Use **GA4** + a tag manager setup (e.g., Google Tag Manager). If you just want a quick overview: > ✅ Enable **Netlify Analytics** — zero setup. --- Would you like me to give you a **ready-to-copy integration snippet and dashboard setup** for one specific tool (e.g., Plausible, Umami, or GA4)? I can tailor it exactly to your Next.js + Netlify stack.

3

Perfect — you picked **Option 3 (Developer-Centric or Self-Hosted)** 👨‍💻 That’s a great choice for your stack — it fits well with how you already like to self-host services (like Supabase or Ollama) and keep control of your data. Let’s go step-by-step with **Umami**, the best open-source option for this scenario: lightweight, Next.js-friendly, privacy-respecting, and easy to self-host on Render, Supabase, or even a local VPS. --- ## 🧱 Step-by-Step: Add **Umami Analytics** to a Next.js Site on Netlify ### **1. Deploy Umami Backend** You have a few ways to host it: #### Option A: Free + Simple (Render) 1. Go to [https://render.com](https://render.com). 2. Click “New → Web Service” → “Deploy from a Git repo”. 3. Use the Umami repo: ``` https://github.com/umami-software/umami ``` 4. Set: - **Environment:** Node - **Build command:** `npm install && npm run build` - **Start command:** `npm run start` 5. Add **PostgreSQL** as a Render add-on (or connect to your existing Supabase DB). 6. Add these environment variables: ```bash DATABASE_URL=postgresql://user:pass@host:5432/dbname HASH_SALT=randomstring ``` After it deploys, note your **Umami dashboard URL** and **script URL**: ``` https://your-umami-app.onrender.com ``` --- ### **2. Create Your Website in Umami Dashboard** 1. Visit your Umami dashboard (`/login`). 2. Default credentials: `admin / umami`. 3. Go to **Settings → Websites → Add Website**. 4. Enter your site name and domain, e.g.: ``` Name: My Next.js Site Domain: mysite.netlify.app ``` 5. Copy the **Website ID**. --- ### **3. Add Umami Tracking to Next.js** In your Next.js app, open `pages/_app.tsx` (or `_document.tsx`). Add this code: ```tsx import type { AppProps } from "next/app"; import Script from "next/script"; export default function MyApp({ Component, pageProps }: AppProps) { return ( <> <Script async defer data-website-id="YOUR_UMAMI_WEBSITE_ID" src="https://your-umami-app.onrender.com/umami.js" strategy="afterInteractive" /> <Component {...pageProps} /> </> ); } ``` Replace: - `YOUR_UMAMI_WEBSITE_ID` with the one from the Umami dashboard. - `your-umami-app.onrender.com` with your actual deployed backend URL. --- ### **4. Redeploy to Netlify** Commit your `_app.tsx` changes and push to your Git repo. Netlify will redeploy automatically. Once it’s live, go to your Umami dashboard — you’ll start seeing: - Live visitors - Top pages - Referrers - Countries - Devices - And you can add custom **events** or **funnels** later if needed. --- ### **5. (Optional) Add Custom Event Tracking** You can trigger custom events anywhere in your site: ```tsx window.umami?.track("Signup Button Clicked"); ``` --- ### ✅ Benefits of this Setup - 100% data ownership - Works perfectly on Netlify - Fast and lightweight (<1 KB script) - GDPR-compliant / no cookies - Easy to add events or export data --- ### 🚀 Bonus: Self-Host with Supabase If you already have a Supabase Postgres database: 1. Create a new schema `umami`. 2. Run Umami’s SQL schema file (`/sql/schema.postgresql.sql`). 3. Deploy the app anywhere (e.g., Render or Docker) and point `DATABASE_URL` to your Supabase DB. --- Would you like me to generate a **ready-to-deploy Render YAML file** (so you can one-click deploy Umami to Render with your Supabase connection)? That will give you a copy-paste configuration that sets up the database and app automatically.