Implementing AdSense and Google Analytics: What the Guides Don't Tell You
There's no shortage of tutorials on adding Google AdSense and GA4 to a website. Most of them cover the happy path — copy this snippet, paste it here, done. What they skip over is why certain decisions matter, what breaks if you get the order wrong, and how these two systems actually interact once they're both running.
I went through this setup twice: once for the OneTechly blog on Blogger, and once for PixelPerfect Screenshot API — a React SPA with a proper build pipeline. The second one was where things got genuinely interesting, because the standard advice for adding AdSense to a static HTML site doesn't quite translate to a build-based React project. There are file placement rules, CSP header implications, and an ads.txt authorization step that everyone mentions but few explain properly.
This article covers both tools — what they actually do, how to implement them correctly for React SPAs specifically, and how to use them together once they're running.
- Track visitor behavior
- Monitor page views
- Analyze traffic sources
- User demographics
- Display targeted ads
- Generate revenue
- Automated ad matching
- Payment processing
The relationship: Analytics tells you which content attracts people and keeps them engaged. AdSense turns that traffic into money. They're separate systems that become more valuable when used together.
What Each Tool Actually Does
Before getting into implementation, it's worth being clear about what you're actually adding to your site, because the two tools are often lumped together when they work very differently.
Google AdSense — The Revenue Side
AdSense is Google's publisher advertising network. You add a script to your site, Google's algorithm reads your content and your visitor's behavior, and it serves ads that are statistically likely to generate clicks. You get paid per click (CPC) and per thousand impressions (CPM). Google handles the advertiser relationships, the auction, the ad creative, and the payment — your job is just to put the script in the right place and have content worth advertising against.
The catch is that AdSense has a review process. Adding the script doesn't mean ads immediately appear. Google reviews your site for content quality, policy compliance, and sufficient original content before activating your account. The script serves as both ownership verification and the future delivery mechanism for ads once approved.
For SaaS products specifically: AdSense is appropriate for public-facing pages — your marketing landing page, blog, FAQ, documentation. It should never appear inside authenticated areas like your dashboard, settings, or any page that requires login. Users who've paid for your product shouldn't see ads alongside their subscription tools. Set up URL exclusions in AdSense for every authenticated route.
Google Analytics 4 — The Intelligence Side
GA4 is Google's current analytics platform, and it works fundamentally differently from the older Universal Analytics it replaced. UA counted sessions and page views. GA4 counts events — any interaction you define can be tracked: clicks, scrolls, form submissions, video plays, API calls, whatever matters to your product.
For a content site, the most important out-of-the-box events are page views (automatic), scroll depth (automatic), and outbound clicks (automatic). For a SaaS product, you'd instrument custom events: user registered, screenshot taken, batch job submitted, subscription upgraded. GA4 gives you the data; what you do with it is up to you.
The connection to AdSense is indirect but real: GA4 tells you which pages attract the most traffic, where users come from, and what keeps them engaged. That tells you where to focus content creation, which in turn determines where AdSense ads will have the most impressions and the most relevant audience match.
GA4 starts collecting data the same day you deploy. AdSense can take days to weeks to approve your site and serve real ads. Implement both early — GA4 data from before AdSense approval is still valuable.
Implementation for React SPAs — The Part Guides Skip
Most AdSense and GA4 guides are written for traditional multi-page websites where you edit HTML files directly. For a React Single Page Application built with Create React App or Vite, the rules are slightly different and the mistakes are different.
The key insight: in a React SPA, there is exactly one HTML file — public/index.html. Everything else is JavaScript. This means adding the tracking/ad scripts to that one file is equivalent to adding them to every page, because React Router handles all navigation client-side without ever loading a new HTML document.
Adding GA4
Get your Measurement ID from Google Analytics (it looks like G-XXXXXXXXXX). Add this to your public/index.html in the <head> section, before your other meta tags so tracking starts as early as possible:
<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. The async attribute means this script loads in parallel with your page content — it doesn't block rendering.
SPA caveat: Standard GA4 automatically tracks page views on initial load. But since React Router changes the URL without loading a new HTML document, subsequent navigation won't trigger new page view events unless you instrument it. For a basic content site this may be acceptable; for a SaaS product where you want to track which features users navigate to, add route-change tracking using a GA4 library or manual gtag('event') calls on route changes.
Adding AdSense
The AdSense script goes in public/index.html as well, also in the <head>:
<script async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX"
crossorigin="anonymous">
</script>
The ads.txt File — This One Actually Matters
The ads.txt (Authorized Digital Sellers) file is an industry standard that declares who is authorized to sell advertising inventory on your domain. Without it, AdSense will flag your site as "Unauthorized" and may limit ad serving.
Create a file called ads.txt in your public/ folder. The file contains exactly one line:
Open your site in one tab, open GA4 Realtime report in another. Your own visit should appear within 30 seconds. If it doesn't, check for ad blockers — they also block GA4 tracking.
The most common mistake: deploying the script tag, seeing "Unauthorized" in AdSense, and not understanding why. The script tag handles ownership verification but ads.txt handles seller authorization — they're different things and both are needed.
Script Ordering in index.html — Why It Matters
The order of scripts in your <head> has real consequences. Both GA4 and AdSense use async so they don't block rendering, but earlier placement means earlier initialization.
Using Analytics to Inform AdSense Strategy
Once both are running, the interesting part starts. GA4 data directly shapes how you configure AdSense — not in a technical sense, but in terms of where you spend your content creation effort and where you place ads.
The practical workflow: check GA4 weekly. Find your highest-traffic pages. Those are where ad impressions are most valuable, where content investment pays off fastest, and where you should be producing related content.
The compounding effect is real but slow. Expect months, not weeks. Sites that stick with the data-driven content cycle consistently outperform those that publish randomly.
Privacy and Consent — Don't Skip This
Both GA4 and AdSense use cookies and collect user data. If any of your visitors are in the EU, UK, or Switzerland, GDPR applies and you need a consent mechanism before setting cookies. Google provides a free Consent Mode implementation that works with both tools.
The simplest implementation: use Google's built-in CMP (Consent Management Platform) which you can configure directly in the AdSense interface. It handles the consent banner automatically for regulated regions without requiring additional code.
Common Mistakes Worth Avoiding
- ads.txt in the wrong folder. In a React project,
ads.txtbelongs inpublic/, notsrc/. - Testing with an ad blocker. Both GA4 and AdSense are blocked by most ad blockers. Use an incognito window without extensions when verifying.
- Adding ads inside authenticated routes. Set up URL exclusions for
/dashboard,/settings, etc. before ads go live. - Expecting immediate AdSense results. Review takes days to weeks. After approval, the algorithm needs time to learn your content.
Steps 5-7 repeat indefinitely. The sites that generate meaningful AdSense revenue treat analytics as an ongoing practice, not a one-time setup.
Comments
Post a Comment