Chapter 2: Google Analytics 4 - Understanding Your Users

There is a famous business saying: "You cannot optimize what you do not measure."

Once your website goes live, you need to know:

How many people visit daily?
Which courses interest them most?
Where do they drop off when trying to pay?
Which marketing channels actually bring customers?

Without this data, you are running your business blindfolded, guessing where to invest your time and money.

Google Analytics 4 (GA4) is the world's most popular web analytics platform, completely free. This chapter shows you how to integrate it into your Next.js site.

Why Use Analytics?

Before GA4, website analytics required expensive enterprise tools. GA4 democratized data, giving every site owner access to professional analytics for free.

What You Can Learn

| Insight | How It Helps Your Business | |---------|---------------------------| | Traffic sources | Know which channels drive visitors | | Popular content | Identify what your audience wants | | User demographics | Understand who your users are | | Conversion funnel | Find where users drop off | | Retention rate | Measure returning visitors | | Real-time activity | Monitor campaigns live |

How GA4 Works

GA4 embeds a small JavaScript snippet on every page of your website. When someone visits, the snippet sends anonymized data to Google:

User loads page -> GA4 script runs -> Collects page URL, browser type,
screen size, referrer, approximate location -> Sends to Google ->
Appears in your GA4 dashboard within seconds

Setting Up GA4

Step 1: Create Your GA4 Property

Go to analytics.google.com and sign in with your Google account
Click "Start measuring" or "Create account"
Enter an account name (your company name)
Create a "Property" with your website name
Set the reporting time zone to your local time
Select "Web" as the platform and enter your domain
Copy the Measurement ID (starts with "G-")

Step 2: Install the Next.js Package

In the old React era (Create React App), embedding GA4 required manually copying script tags and using dangerouslySetInnerHTML. This slowed down page loads.

Next.js provides a much better approach with @next/third-parties:

npm install @next/third-parties

Add the environment variable:

NEXT_PUBLIC_GA_ID="G-XXXXXXXXXX"

Step 3: Add GA4 to Your Layout

// app/layout.tsx
import { GoogleAnalytics } from "@next/third-parties/google";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        {process.env.NEXT_PUBLIC_GA_ID && (
          <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_ID} />
        )}
      </body>
    </html>
  );
}

The GoogleAnalytics component loads the GA script asynchronously. It does not block page rendering, so your site performance is not affected.

Understanding GA4 Reports

Realtime Report

Shows live visitor count, active pages, and geographic locations. Use this to monitor campaign launches or content releases.

Acquisition Report

Shows where your visitors come from:

Organic Search: Visitors from Google, Bing
Direct: Visitors who type your URL directly
Referral: Visitors from links on other sites
Social: Visitors from Facebook, Line, Twitter
Email: Visitors from newsletter campaigns

Engagement Report

Shows which content keeps users interested:

Views per page
Average engagement time per page
Events (button clicks, form submissions)
Conversions (signups, purchases)

Practical Business Applications

Find Your Best Content

After a month of data collection, sort your pages by views. The pages with the most engagement tell you what your audience wants. Create more content on those topics.

Fix Checkout Problems

Set up a conversion funnel in GA4:

Homepage -> 2. Course page -> 3. Pricing page -> 4. Payment started -> 5. Payment completed

If 80% of users drop off between steps 3 and 4, your pricing or checkout flow has problems. Maybe the checkout button is broken on mobile, the price is too high, or the form asks for too much information.

Optimize Marketing Investment

Compare conversion rates across channels:

| Channel | Visitors | Conversions | Rate | Cost per Conversion | |---------|:--------:|:-----------:|:----:|:------------------:| | Google Search | 10,000 | 200 | 2.0% | $0 (organic) | | Facebook Ads | 5,000 | 30 | 0.6% | $16.67 | | Email | 2,000 | 100 | 5.0% | $0.50 |

Shift your budget toward channels with the lowest cost per conversion.

Custom Event Tracking

Beyond automatic page views, you can track specific user actions:

// Track when users click "Subscribe"
gtag("event", "subscribe_click", {
  plan_name: "Premium Monthly",
  plan_price: 29.99,
  currency: "USD"
});

The Vibe Coding approach: describe what you need to AI instead of memorizing syntax.

Debugging Your GA4 Installation

After deployment, verify GA4 is working:

Open your website in Chrome
Open DevTools (F12) -> Network tab
Filter by "google-analytics"
Navigate around your site
You should see requests to google-analytics.com
Check your GA4 Realtime report - you should see yourself

If no data appears:

Check that NEXT_PUBLIC_GA_ID is set in your deployment environment
Check browser console for errors
Disable ad blockers temporarily
Wait up to 24 hours for data to appear

Privacy and Compliance

IP addresses are automatically anonymized
No personally identifiable information collected by default
GDPR requires cookie consent in the EU
Data retention defaults to 2 months (configurable)

Chapter Summary

GA4 provides the data you need to make informed decisions about your website and business. Installation with Next.js is clean and performance-friendly.

Key takeaways:

Get your Measurement ID from Google Analytics
Install @next/third-parties and add GoogleAnalytics to layout.tsx
Monitor Realtime, Acquisition, and Engagement reports
Track custom events for button clicks and purchases
Use funnel analysis to find conversion bottlenecks
Let data guide your content and marketing decisions

What's Next: ECPay Payment Integration

With traffic tracking in place, the next step is getting paid. Chapter 3 covers ECPay payment integration, including secure CheckMacValue generation and async webhook handling.

Pro Tip: Set up GA4 before your site launches, not after. You want data from day one to establish baselines and measure growth accurately.