You built an app or a content site. You shipped it. Now you need to answer two questions: how many people are actually using it, and can you make money from the traffic? Google Analytics 4 (GA4) answers the first question. Google AdSense answers the second. This guide covers how to set up both, what to track, and what kind of revenue to realistically expect.

Installing GA4 on a Static HTML Site

If your site is plain HTML — no frameworks, no build step — installing GA4 takes about two minutes. Go to analytics.google.com, create a property, and get your Measurement ID (it looks like G-XXXXXXXXXX).

Add this snippet to the <head> section of every HTML page:

<!-- Google tag (gtag.js) -->
<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>

Replace G-XXXXXXXXXX with your actual Measurement ID. That is it. GA4 will start tracking page views automatically. If you have dozens of HTML files, the fastest way to add it is to ask your AI coding assistant to insert the snippet into every page: "Add the GA4 tracking snippet with ID G-XXXXXXXXXX to the head section of all HTML files in the site directory."

Installing GA4 on a Next.js App

For Next.js apps, you have a few options. The cleanest approach is using the @next/third-parties package, which Google and Vercel maintain together:

npm install @next/third-parties

Then add it to your root layout (app/layout.tsx):

import { GoogleAnalytics } from '@next/third-parties/google';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <GoogleAnalytics gaId="G-XXXXXXXXXX" />
      </body>
    </html>
  );
}

This component loads the GA4 script with proper performance optimization (deferred loading, no render blocking). It tracks page views automatically, including client-side navigations in the Next.js App Router.

Alternatively, you can use the Script component from Next.js directly with the raw gtag snippet. Both approaches work. The @next/third-parties package just handles the details for you.

What to Track: Key Events That Matter

GA4 tracks page views out of the box, but page views alone do not tell you much. You want to know what users do on your site. GA4 calls these "events," and you should set up a few custom ones.

For a content site or blog:

For a SaaS or web app:

To track a custom event, use the gtag function:

// Track a button click
gtag('event', 'cta_click', {
  event_category: 'engagement',
  event_label: 'newsletter_signup',
});

Do not over-track. Five to ten meaningful events are better than fifty noisy ones. Focus on the events that answer "is my product working?" and "where do users drop off?"

Understanding GA4 Reports

GA4's interface is notoriously confusing, even for experienced users. Here are the reports that actually matter for vibe coders:

For a simpler analytics experience, consider Plausible or Umami as alternatives. They are privacy-friendly, have cleaner interfaces, and show the essentials without the complexity. The trade-off is that they do not integrate with AdSense, and their free tiers are more limited (Umami is self-hosted; Plausible starts at $9/month).

Setting Up Google AdSense

AdSense is Google's ad network for publishers. You place ad units on your site, Google serves relevant ads, and you earn money when visitors view or click them. It is the simplest way to monetize a content site.

Requirements to get approved:

To apply, go to adsense.google.com, add your site, and place the verification code in your <head>. Google typically reviews applications within 1–2 weeks. If rejected, you can reapply after addressing the feedback.

Ad Placement Best Practices

Where you place ads matters more than how many you place. Poor ad placement annoys users and hurts your search rankings (Google penalizes sites with excessive above-the-fold ads).

Effective placements for content sites:

Placements to avoid:

Start with 2–3 ad units per page. You can test more later, but more ads do not linearly mean more revenue. Past a certain point, they just drive users away.

Realistic Revenue Expectations

This is the part most guides avoid. Here are honest numbers for content sites in the tech/developer niche:

Monthly page views Estimated AdSense revenue RPM range
1,000 $2–8 $2–8
10,000 $20–80 $2–8
50,000 $100–400 $2–8
100,000 $200–800 $2–8

RPM (Revenue Per Mille) is how much you earn per 1,000 page views. For tech content, RPM typically ranges from $2 to $8, depending on your audience's location (US traffic pays more), the specificity of your content (niche topics attract higher-paying ads), and your ad placement.

The honest truth: AdSense alone will not make you rich. At 10,000 monthly page views, you might earn enough for a coffee subscription. The real value of AdSense is as a foundation. It validates that your site has traffic and ad potential, which opens the door to higher-paying options: affiliate partnerships, sponsored content, premium ad networks (like Mediavine at 50K sessions/month or AdThrive at 100K), and your own products.

Privacy and GDPR Considerations

If your site has visitors from the European Union (and it will, eventually), you need to handle cookie consent. Both GA4 and AdSense use cookies, and GDPR requires explicit consent before setting them.

The practical implementation:

For a simple implementation, use a cookie consent library. Several open-source options exist: CookieConsent by Orest Bida is lightweight and popular. Ask your AI assistant to "add a GDPR-compliant cookie consent banner that controls GA4 and AdSense loading."

GA4 Alternatives Worth Considering

GA4 is free and powerful, but it is also complex, privacy-invasive, and adds weight to your pages. If your primary goal is understanding traffic patterns (not running AdSense), consider these alternatives:

You can run GA4 alongside a privacy-friendly alternative. Use GA4 for AdSense integration and Search Console data, and use Plausible or Umami for your day-to-day analytics dashboard.

Getting Started Checklist

  1. Create a GA4 property at analytics.google.com.
  2. Install the tracking snippet on all pages.
  3. Verify it works in the Realtime report.
  4. Set up 3–5 custom events for your key user actions.
  5. Add a privacy policy page to your site.
  6. Add a cookie consent banner (required for EU visitors).
  7. Wait for 2–4 weeks of data before drawing conclusions.
  8. Apply for AdSense once you have 15+ quality pages and some organic traffic.
  9. Start with 2–3 ad placements and test performance over time.

Analytics is a long game. The value comes from trends over weeks and months, not individual data points. Install it early, check it occasionally, and let the data guide your content and product decisions.

Track What Matters

Analytics is just one piece of launching your project. Explore the full toolkit for vibe coders.

Browse Tools