How-To Guide

How to Add Google Analytics to Your Website

Know exactly how many people visit your site, where they come from, and what they do. Google Analytics is free and installs in under 10 minutes.

📊 Why Add Analytics?

You can't improve what you don't measure. Google Analytics tells you:

How many visitors your site gets (daily, weekly, monthly)
Where they come from — Google search, social media, direct
Which pages are most popular
How long visitors stay on each page
What devices they use (mobile, desktop, tablet)
Which countries they're browsing from
Where visitors drop off in your site

💡 It's completely free, even for commercial sites. No traffic limits, no paid tier needed.

🆕 Google Analytics 4 (GA4)

Google replaced the old Universal Analytics (UA) with Google Analytics 4 in 2023. If any tutorial tells you to use a "UA-XXXXXXXX-X" tracking ID, it's outdated.

GA4 uses a new data model:

Measurement ID format: G-XXXXXXXXXX
Events-based (everything is an "event" — even page views)
Better cross-platform tracking (web + mobile apps)
Privacy-focused (IP anonymization by default)

💡 Heads up: GA4's interface is different from the old UA. If a tutorial looks confusing, check that it's dated 2024 or later.

📋 What You'll Need

A Google account (Gmail works — free)
A live website — publish one free with GitHub Pages if you haven't
Access to edit your site's HTML files
About 10 minutes

Create a Google Analytics Account

Go to:

👉 analytics.google.com

Click "Start measuring"
Enter an Account name (e.g., "My Personal Sites")
Choose your data-sharing settings (defaults are fine)
Click "Next"

Create a Property

A "property" represents one website (or app).

Property name: your site name (e.g., "My Portfolio")
Reporting time zone: your local time zone
Currency: your currency (used if you add e-commerce later)
Click "Next"

Next screen — "Business details":

Industry category: pick what fits
Business size: "Small" is fine
How you intend to use Analytics: check anything relevant
Click "Create"

Accept the Terms of Service.

Set Up a Data Stream

A "data stream" tells Google where your site lives.

Choose "Web" as the platform
Website URL: enter your full URL (e.g., https://makuistudio.com)
Stream name: "My Website" (anything works)
Make sure "Enhanced measurement" is ON (tracks scrolls, outbound clicks, etc.)
Click "Create stream"

Copy Your Measurement ID

After creating the stream, you'll see a panel with your Measurement ID. It looks like:

G-AB12CD34EF

Copy this — you'll need it in the next step.

⚠️ Save this somewhere. You can always find it again at Admin → Data Streams → [your stream], but copying it now saves time.

Add the Tracking Code to Your Site

Google shows you the tracking snippet to copy. It looks like this (your ID will differ):

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-AB12CD34EF"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-AB12CD34EF');
</script>

Paste it inside the <head> tag of every page you want to track. If you have 50 HTML files, paste it into all 50.

A cleaner way — use a shared JavaScript file:

If you already use a shared file like navbar.js, you can add the tracking code there instead. Or create a new file called analytics.js in your repo root:

// analytics.js
(function() {
  var script = document.createElement('script');
  script.async = true;
  script.src = 'https://www.googletagmanager.com/gtag/js?id=G-AB12CD34EF';
  document.head.appendChild(script);

  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-AB12CD34EF');
})();

Then in every page's <head>:

<script src="/analytics.js"></script>

💡 Which approach? For a single-page site, paste the code directly. For 10+ pages, use the external file so you only update it once.

Push, Deploy, and Verify

Save your changes and deploy your site. Then verify analytics is working:

Open Google Analytics
Go to Reports → Realtime (left sidebar)
Visit your live site in a new browser tab
Within 30 seconds, you should see 1 active user — that's you

✅ If you see 1 active user, Analytics is working. If not, see the Common Issues section below.

Explore Your Reports

Once you have a few days of data, these are the reports to check:

Realtime

Who's on your site right now — useful after launching a post.

Acquisition → Traffic acquisition

Where your visitors come from. Organic Search = Google. Direct = typed URL or bookmark. Referral = link from another site. Social = Twitter, LinkedIn, etc.

Engagement → Pages and screens

Your most-visited pages and how long people stay. Sort by "Views" to find your best content.

Engagement → Events

Individual actions (scrolls, clicks, form submits). Useful for spotting drop-offs.

User → Demographics → Overview

Countries, cities, and languages of your visitors. Great for deciding what content to make next.

🚫 What NOT to Do

❌ Install the old UA tracking code

If the code uses UA-XXXXXX-X, it's the old Universal Analytics. It stopped collecting data on July 1, 2023. Always use GA4 (G-XXXXXXXXXX).

❌ Paste the code in <body> instead of <head>

Technically works, but Google recommends the <head> section. It loads earlier, so slower pages are still tracked accurately.

❌ Forget to add the code to every page

Each page needs its own tracking code. This is why the shared JS file approach is recommended — you only maintain it in one place.

❌ Skip the privacy policy

If your site is public, you should have a privacy policy mentioning that you use cookies and analytics. GDPR (EU) and CCPA (California) require it. Google won't reject you, but it protects you legally.

❌ Over-analyze on day one

Analytics needs 3-7 days of data to be meaningful. Don't refresh the Realtime report every 5 minutes — focus on building content.

🔧 Common Issues (and Fixes)

❌ Realtime report shows 0 active users

Causes and fixes:

Did you save and deploy the file? Refresh your live site.
Is the Measurement ID correct? Copy it again from Admin → Data Streams.
Do you have ad-blockers enabled? Disable them temporarily to test.
Is the code inside the <head>? Check "View Page Source" in your browser.

❌ Data shows "not set" for traffic source

Usually means the visitor typed your URL directly (Direct traffic). Normal. If all traffic shows "not set" it might mean the tracking code was added twice.

❌ Duplicate pageviews (each visit counts as 2)

You pasted the tracking code twice — once directly in the page AND in an external file. Remove one of them. Check by searching for gtag in your site's source code.

❌ Analytics shows "Data collection is not enabled"

Your site probably still uses the old UA code. Replace it with the GA4 code as shown in Step 5.

❌ Only see traffic from one country (my own)

You haven't gotten visitors from elsewhere yet — that's not an analytics problem, that's a promotion problem. See our traffic guide or start writing Dev.to articles to drive real traffic.

❌ Confused by the new GA4 interface

GA4's layout is a big change from UA. Start with just three reports — Realtime, Acquisition → Traffic acquisition, and Engagement → Pages. Ignore the rest for the first month.

🔒 Privacy & Cookies (Read This)

Google Analytics uses cookies to identify unique visitors. If your site is public, you should:

Add a privacy policy page that mentions analytics and cookies
Add a cookie consent banner if you have EU visitors (GDPR)
Turn on IP anonymization in GA4 (on by default in most regions)
Consider Google Consent Mode if you need strict compliance

💡 Simple privacy policy template: "This website uses Google Analytics to understand visitor behavior. Google Analytics uses cookies. You can opt out by installing the Google Analytics Opt-out Browser Add-on."

📚 Contact us if you need help writing your privacy policy →

🤔 Alternatives to Google Analytics

If you care about privacy or want a simpler interface:

Plausible

Privacy-first, lightweight (1 KB script), GDPR-compliant without cookies. Paid (~$9/mo).

Umami

Open-source, self-hosted, free. Requires a server.

Fathom

Privacy-focused, one dashboard, no cookies. Paid (~$14/mo).

Simple Analytics

Clean interface, no cookie banners needed. Paid.

💡 When to use paid alternatives: If you're serving EU users and want to avoid cookie banners entirely, Plausible or Fathom are excellent. For 99% of beginners, Google Analytics is fine.