The Hybrid Analytics Architecture

Privacy-First Analytics for Modern Web Apps (Part 4)

A modern and practical solution is to combine two analytics systems:

• Layer 1: privacy-first analytics for all visitors
• Layer 2: Google Analytics only for users who explicitly accept cookies

This architecture separates two different goals:

• understanding product usage
• running detailed analytics and marketing analysis

By splitting these responsibilities, you get useful insights without relying entirely on cookie-based tracking.

Why a hybrid analytics setup helps

When using Basic Consent Mode, users who decline analytics cookies are completely invisible in Google Analytics. Your analytics becomes incomplete.

A hybrid architecture solves this by using a privacy-first analytics platform for baseline reporting while keeping Google Analytics behind explicit consent.

In practice this means:

• everyone contributes to anonymous product analytics
• only consenting users are tracked in Google Analytics

The result is a better balance between:

• privacy
• product insight
• legal safety

Layer 1 — Privacy-first analytics

For the first layer, you use a tool designed to work without cookies and without persistent identifiers.

Popular options include:

• Umami
• Plausible

These tools typically provide:

• pageviews
• referrers
• country / region statistics
• device types
• simple product-usage events

They intentionally avoid:

• cross-site tracking
• persistent user identifiers
• advertising profiles

This makes them easier to justify from a privacy perspective.

Example: Event tracking with Unami

Setting up Umami

Umami offers both cloud hosting and self-hosting.

Typical onboarding steps are:

• Create an account at Umami Cloud.
• Add your website domain.
• Copy the tracking script from the dashboard.
• Insert it into your app’s HTML template.
• Verify pageviews appear in the analytics dashboard.

At the time of writing, Umami Cloud offers a Hobby tier with around 100k events/month for free, though pricing can change.

The dashboard typically shows:

• top pages
• traffic sources
• device types
• countries
• custom events

This is already enough to answer many product questions.

Event tracking with Umami in React + TypeScript

Add the Umami tracker script to your main HTML template.

<script defer src="https://cloud.umami.is/script.js" data-website-id="YOUR_UMAMI_WEBSITE_ID"></script>

This automatically tracks pageviews.

Create a helper wrapper in your React project.

// src/lib/analytics/umami.ts

declare global {
  interface Window {
    umami?: {
      track: (event: string, data?: Record<string, unknown>) => void
    }
  }
}

export function trackEvent(
   name: string,
   data?: Record<string, unknown>
) {
   window.umami?.track(name, data)
}

Add the event tracking helper in a component

import { trackEvent } from "../lib/analytics/umami"

export function OpenEditorButton() {
   return (
      <button
         onClick={() => {
             trackEvent("open_editor")
         }}>
      Open editor
      </button>
   )
}

This event will appear in the Umami dashboard. Typical product-analytics events might include:

• open_editor
• view_gallery_item
• view_pricing_page
• start_publish
• publish_complete

Layer 2 — Google Analytics (opt-in only)

For users who explicitly accept analytics cookies, you can enable Google Analytics. Google Analytics provides deeper analysis including:

• user journeys
• funnels
• campaign attribution
• conversion analysis
• returning sessions

Because GA uses cookies and identifiers, it should only be initialized after consent.

Example: Remember consent and track GA events only with given content

Add a remember consent helper

// src/lib/analytics/consent.ts

export function getConsent(): boolean | null {
   const value = localStorage.getItem("cookie_consent")

   if (value === "true") return true
   if (value === "false") return false

   return null
}

export function setConsent(value: boolean) {
   localStorage.setItem("cookie_consent", value ? "true" : "false")
}

Add google analytics helper

// src/lib/analytics/googleAnalytics.ts

import ReactGA from "react-ga4"

const GA_ID = process.env.REACT_APP_GA_ID

let initialized = false

export function initGA() {
  if (!GA_ID || initialized) return

  ReactGA.initialize(GA_ID)
  initialized = true
}

export function trackPageView(path: string) {
  if (!initialized) return

  ReactGA.send({
    hitType: "pageview",
    page: path
  })
}

Enable GA only after consent

Example cookie consent handler:

import { setConsent } from "../analytics/consent"
import { initGA } from "../analytics/googleAnalytics"

export function acceptAnalytics() {
  setConsent(true)
  initGA()
}

export function declineAnalytics() {
  setConsent(false)
}

Initialize GA on page load if previously accepted

import { useEffect } from "react"
import { getConsent } from "./analytics/consent"
import { initGA } from "./analytics/googleAnalytics"

export function App() {
  useEffect(() => {
    if (getConsent()) {
      initGA()
    }
  }, [])

  return <Routes />
}

How the two layers work together

With the hybrid setup, the user journey looks like this:

Visitor arrives
  ↓
Umami analytics runs for everyone
  ↓
Cookie banner appears
  ↓
Accept → Google Analytics is initialized
Decline → Google Analytics stays disabled

This provides:

• baseline product analytics for all visitors
• deeper insights for consenting users
• a clearer privacy model

What each layer is best at

Privacy-first analytics (Umami / Plausible)

Best for:

• product decisions
• feature usage
• top pages
• referrers
• general traffic insight

Google Analytics

Best for:

• funnels
• marketing analysis
• campaign attribution
• deeper engagement analysis

Separating these roles is exactly why the hybrid architecture works well.

Practical recommendation

For most modern web apps — especially developer tools — a good starting setup is:

• Umami for all visitors
• Google Analytics only after consent
• no Advanced Consent Mode initially

This gives you:

• useful analytics from day one
• less legal ambiguity
• a clean foundation if you later introduce advertising or subscriptions

One final note on privacy

Privacy-first analytics tools often market themselves as cookie-free and simpler from a compliance perspective. That can reduce complexity, but it does not remove your responsibility to review your own legal obligations.

A good rule of thumb is simple transparency:

• anonymous product analytics help improve the product
• optional analytics cookies enable deeper reporting

Users usually respond well to that level of honesty.

---

Series: Privacy-First Analytics for Modern Web Apps

1. Why Cookie Consent Breaks Your Analytics
2. Google Consent Mode Explained (React + TypeScript)
3. Ads, Tracking, and the Legal Reality in the EU and UK
4. The Hybrid Analytics Architecture

---

About this series

This series is based on real-world work building CSSEXY, a visual UI platform where understanding user behaviour is essential for improving the product.

All articles are also available on CSSEXY and there in the Gallery.