I build a lot of websites.
Personal sites, landing pages, client sites, side projects such as careerleap.app, switchtomac.app, and the ones I build for clients.
Every single one gets the same four analytics tools.
I used to skip this on the small ones. "I'll add analytics later." Later never came. Then a page took off and I had zero data on where the people came from or what they did.
So now it goes on day one.
The four questions
Analytics help you answer four questions.
- How many people came, and to what? That is traffic.
- What did they actually do on the page? That is behavior.
- How are people finding me in Google? That is search.
- And how do I manage all of it without redeploying my site every time? That is the container.
Four questions, four tools.
The stack
Google Tag Manager (GTM). The container. This is the one that loads and manages every other tag. Nothing else goes in the code directly. GTM is the hub.
Google Analytics 4 (GA4). Traffic and events. How many people, which pages, where they came from, what they clicked. The "how many and what" tool.
Microsoft Clarity. Free session recordings and heatmaps. GA4 tells you 40% dropped off the pricing page. Clarity lets you watch ten of them do it. The "why" tool. And it is free, with no seat limits, which still surprises people.
Google Search Console. How you show up in Google search. Impressions, clicks, the actual queries people typed, and whether your pages are even indexed. GA4 shows you the people who already arrived. Search Console shows you the ones deciding whether to.
I keep Vercel Analytics on too, since most of my sites are on Vercel and it is one line. But those four are the real stack.
The one idea that makes this easy: GTM is the hub
Here is the move that turns this from a chore into a twenty-minute habit.
You put one snippet in your code: the GTM container.
That is it. GA4 and Clarity do not go in your code. They go inside GTM, as tags, configured in the GTM dashboard.
Why does that matter?
Because the day you want to add a new tool, change a tracking ID, or fix a tag, you do it in GTM and click publish. No code change. No deploy. No waiting for a build.
This is not theory. Last week I set up GA4 on a site, then had to recreate the property and got a brand new measurement ID. On a normal setup that is a code edit and a redeploy. On this setup it was one field in GTM and a publish. Sixty seconds. The site code never knew the GA4 ID existed. It only knows the container.
One snippet in code. Everything else in the hub.
How I wire it in Next.js
The GTM snippet is the only thing that touches the codebase. I keep the ID in an environment variable so the same code runs on every site.
// layout.tsx
const GTM_ID = process.env.NEXT_PUBLIC_GTM_ID;
// in <head>
{GTM_ID && (
<Script id="gtm" strategy="afterInteractive">
{`(function(w,d,s,l,i){ /* standard GTM snippet */ })(window,document,'script','dataLayer','${GTM_ID}');`}
</Script>
)}
Then NEXT_PUBLIC_GTM_ID=GTM-XXXXXXX in .env.local and in the host (Vercel, for me). The GTM ID is public, it ships in the page anyway, so it is not a secret.
One warning from experience: if you copy a codebase to start a new site, check that GTM ID. I once had a fresh site quietly reporting into an old project's container for weeks because the hardcoded ID came along for the ride. Env variable per site, and this stops happening.
Then, inside GTM, add two tags:
- GA4: a Google Tag with your
G-XXXXXXXXXX measurement ID, trigger "All Pages."
- Clarity: the easiest path is to open Clarity, go to Setup, and pick "Google Tag Manager." Clarity installs its own tag into your container for you. No snippet to paste.
Publish the container. Done.
Search Console is separate and needs no code. Add your domain, verify it, and submit your sitemap.xml. On careerleap.app the DNS is on Cloudflare, so it verified in one click. Then submit your sitemap.xml.
The two mistakes that cost me time
Every time I teach someone this, the same two things trip them up. They tripped me up too.
1. "Google Tag" vs "GA4 Event." When you add GA4 in GTM, pick the tag type called Google Tag. There is another one called "Google Analytics: GA4 Event." That one is for tracking specific actions later, and it forces you to name an event. If you pick it by mistake, you get a red error and no pageviews. You want Google Tag. It sends pageviews automatically. That is all you need to start.
2. Preview is not published. GTM has a Preview mode that shows your tags firing. It feels like it is working. It is only working for you. Real visitors get nothing until you click Submit, then Publish. I have watched people set everything up perfectly, check Preview, see green, walk away, and wonder a week later why their reports are empty. Publish the container.
Do it on day one
That is the whole thing.
Four tools. One snippet in the code. Everything else managed in a dashboard you can change without a deploy.
Traffic, behavior, search, all wired in about twenty minutes.
The best time to add analytics is before you have any traffic. The second best time is now, before the page you forgot about suddenly has some.
Put it on day one. Future you, staring at a spike with no idea where it came from, will thank you.
What is the first thing you wire into every new site?
