New to Google Analytics 4? This step-by-step tutorial shows two simple ways to add Google Analytics to website pages: (A) paste the GA4 tracking code manually, or (B) connect through popular platforms (WordPress, Shopify, Wix, Squarespace). I’ll also show you exactly where to add Google Analytics code, what to screenshot, and how to confirm data is flowing.
What you’ll need first (one-time setup)
- A Google account.
- A GA4 property already created in Google Analytics.
- Your Measurement ID (looks like
G-XXXXXXX). You can find it via Admin → Data Streams → Web.
If you’re wondering how to reach the code screen, think “Google Analytics get tracking code” inside the Admin area—then open your Web data stream.
A. Manual install: paste the GA4 tag into your site’s <head>
This is the most universal method and works for any CMS or custom site.
Step A1 — Copy your GA4 tag
- In Google Analytics, go to Admin → Data Streams → Web → View tag instructions → Install manually.
GA4 Data Streams section where the Measurement ID is located
Click “Add stream,” then select “Web”
Enter the website address and name the stream, then click “Create & continue”
- Copy the snippet that starts with
<script async src="https://www.googletagmanager.com/gtag/js?id=G-..."></script>.
Step A2 — Paste the tag in the <head> of every page
Add this snippet right before the closing </head> tag on your site template so it loads on all pages.
<!-- 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>
Where exactly? If your site uses a common header file (e.g.,
header.php,_document.js,base.html, or a theme “Header” field), place it there so every page inherits it.
Why the <head>? It ensures the google analytics code for website loads early and reliably, so pageviews and other events are captured.
B. Platform-specific: connect GA4 without touching code
If you’re using a popular platform, you can often paste only the Measurement ID (or a field for the whole snippet). Here’s how to add Google Analytics to website builders most beginners use.
WordPress (no custom code)
- Many themes or SEO plugins have a field for GA or “Header scripts.”
- Example flow: Dashboard → Appearance (or Theme Options) → Header → Scripts in Header. Paste the snippet there.
Tip: Some plugins ask only for the Measurement ID; if so, paste G-XXXXXXX and the plugin injects the tag for you. That’s still considered a valid way to add Google Analytics to website pages.
Shopify
- Go to Shopify Admin → Online Store → Themes → Edit code (for a manual paste) and add the snippet inside
theme.liquid<head>. - Or use the Customer events / Pixels interface if available in your plan to add GA4 more cleanly.
Wix
- In Settings → Custom Code, choose “Head” and paste the snippet to apply site-wide.
Squarespace
- Use Settings → Advanced → Code Injection → Header and paste the snippet there.
Different platforms, same idea: put the tag in a global header so every page is measured. This is the simplest answer to how to connect Google Analytics to website templates.
C. (Optional) Google Tag Manager alternative
If you prefer to manage all tags in one place, you can deploy GA4 via GTM:
- Install GTM container on your site once, then add a GA4 Configuration tag in GTM (set Measurement ID and trigger on All Pages).
- This is tidy for teams who plan to add more tracking later, but it’s a separate tool to learn.
D. Verify your setup in minutes
- Open your site in a fresh browser tab (or incognito).
- In GA4, go to Reports → Realtime.
Navigate around your site; you should see at least one active user in the map/timeline.
If Realtime stays empty after a few minutes:
- Double-check you didn’t paste a staging Measurement ID.
- Confirm the tag is in the
<head>and loads on every page. - Look for caching: some themes delay injecting scripts until after publishing changes.
- Ensure you don’t have an ad blocker enabled while testing.
FAQ
Do I need both UA and GA4?
No—Universal Analytics sunsetted. GA4 is the default going forward.
Will it slow my site?
The gtag.js script is loaded asynchronously, so it won’t block the visible content.
Is this enough for basic tracking?
Yes. GA4’s base tag automatically captures page views and a few enhanced events (like scrolls and outbound clicks) if Enhanced Measurement is enabled in your Web data stream.
Additional questions
- Many people search “where to add Google Analytics code”—the answer is: the global
<head>so it loads on every page. - If you ask “how to add Google Analytics to website” or “how to connect Google Analytics to website,” the easiest path is either a global header field (WordPress/Wix/Squarespace) or the Install manually snippet.
- Your GA4 tracking code and Measurement ID live in Admin → Data Streams → Web—that’s the place to Google Analytics get tracking code.
- The snippet is your google analytics code for website pages; paste it once in a shared header and you’re done.
Troubleshooting cheat sheet
| Symptom | Likely cause | Quick fix |
|---|---|---|
| Realtime shows 0 users | Ad blocker or wrong property | Test in incognito; confirm the Measurement ID matches your property |
| Only some pages track | Code added to a single template | Move the tag to a global header (theme or code injection) |
| Duplicate pageviews | Multiple GA4 tags or plugin + manual tag | Keep one GA4 injection method (plugin or manual), not both |
| Missing outbound clicks/scrolls | Enhanced Measurement off | In your Web data stream, toggle Enhanced Measurement on |
You’re done!
Whether you pasted the snippet or used a platform field, you’ve now added the google analytics code for website measurement. Keep the code in a shared header, verify in Realtime, and you’re ready to analyze traffic and content performance in GA4.
Leave a Reply