Building a great web app is only half the job — you also need to know how users interact with it. Google Analytics (GA) helps you collect and analyze that data so you can make informed decisions about performance, content, and UX.

🧠 What is google analytics?

Google Analytics is a tracking platform that monitors:

  • How users arrive at your site.
  • What pages they visit.
  • How long they stay.
  • Which actions they take (clicks, purchases, sign-ups).

There are two main versions:

  1. Universal Analytics (UA) — older, being sunset.
  2. Google Analytics 4 (GA4) — the current standard, event-based, privacy-oriented.

🔍 Why should developers care?

  • Understand real user behavior.
  • Measure conversion funnels.
  • Optimize Core Web Vitals and performance.
  • Track A/B tests and feature adoption.
  • Support SEO and marketing decisions.

⚙️ How google analytics works

  1. You add a tracking code (JavaScript snippet) to your site.
  2. GA sets cookies or uses signals to identify sessions.
  3. Events (page views, clicks) are sent to GA servers.
  4. You analyze data in the GA dashboard or via APIs.

Example GA4 snippet:

<!-- GA4 Tag -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

🛠️ Tracking basics

1. Page views

Automatically tracked when you call gtag('config', 'G-ID').

2. Custom events

Track actions like button clicks:

gtag('event', 'sign_up', {
  method: 'Google',
});

3. User properties

Identify user attributes (e.g., plan type):

gtag('set', 'user_properties', {
  plan: 'premium',
});

✅ Best practices for developers

  • Place GA scripts as early as possible (head section).
  • Use Google Tag Manager for easier event management.
  • Respect privacy laws (GDPR, CCPA → add consent banners).
  • Avoid duplicate hits (especially in SPAs).
  • Test tracking using GA’s DebugView.

🧪 Google analytics in single page applications (SPAS)

For React, Vue, or Next.js, manual page view tracking is necessary:

import { useEffect } from 'react';
import { useRouter } from 'next/router';

export default function AnalyticsTracker() {
  const router = useRouter();
  useEffect(() => {
    const handleRouteChange = (url) => {
      window.gtag('config', 'G-XXXXXXXXXX', { page_path: url });
    };
    router.events.on('routeChangeComplete', handleRouteChange);
    return () => router.events.off('routeChangeComplete', handleRouteChange);
  }, [router]);
}

📉 Common mistakes

  • Not migrating from Universal Analytics to GA4.
  • Forgetting to track SPA route changes.
  • Overloading GA with too many custom events.
  • Ignoring consent compliance.
  • Relying only on GA without validating with server logs.

🧩 Alternatives to google analytics

If privacy or simplicity is a concern:

  • Plausible
  • Fathom
  • Matomo
  • Umami

📎 Final thoughts

Google Analytics is powerful but requires proper setup. For developers, it’s not just “paste a script” — it’s about tracking the right metrics, respecting user privacy, and ensuring data accuracy.