Vercel

1 post with the tag “Vercel”

How to Set Up Google Analytics on a Site Built with Vercel: A Complete Beginner's Guide

Mar 22, 2026

Shiori

Introduction

Have you ever published a site on Vercel and then wondered whether anyone was actually visiting it?

You built the site and got it online. But when you tried to set up Google Analytics to see the traffic, the unfamiliar terms made it hard to keep going. If that sounds familiar, you are not alone.

In this article, I will walk you through how to set up Google Analytics in a Vercel environment in plain language, step by step. Even if you are not confident with code, you should finish this guide with the feeling that, yes, you can do this yourself.

What you will learn

• What Google Analytics is and why it matters
• How to connect Vercel and Google Analytics
• The meaning of the terms that often appear during setup
• How to verify that everything is working and how to handle common issues

---

Does this sound familiar?

After publishing a site on Vercel, many people run into the same problems:

• What is an “environment variable,” and where do I set it?
• I was told to add something to the code, but I do not know where to put it
• I set everything up, but nothing appears in the Google Analytics dashboard

These are some of the most common sticking points for people who are not engineers. A lot of documentation assumes you already know the basics, which is why the process can feel more confusing than it should.

First, understand the overall flow

The setup has three phases:

1. Prepare Google Analytics and get a measurement ID
2. Configure Vercel and store the measurement ID as an environment variable
3. Update your code so your site sends data to Google Analytics

All three parts are required. If one is missing, the setup will not work, so it is important to follow the steps in order.

In this guide, I will explain how to do this on a site built with Astro.

---

Step-by-step guide

What is Google Analytics?

Google Analytics is a free website analytics tool provided by Google.

It automatically collects information such as:

• Number of visitors: how many people visited your site
• Page views: how many times each page was viewed
• Time on site: how long users stayed
• Traffic sources: where visitors came from, such as Google search, social media, or direct visits
• User flow: how people moved from one page to another

With this data, you can see which pages are popular, where readers leave the site, and what you can improve.

Step 1: Prepare your Google Analytics account

Go to the official Google Analytics site at https://analytics.google.com. Sign in with your Google account and follow the on-screen instructions to create an account and property.

When the setup is complete, you will receive a measurement ID in the form G-XXXXXXXXXX.

Important: You will need this measurement ID in the next step. Make sure you keep it handy.

Step 2: Set an environment variable in Vercel

What is an environment variable?

An environment variable is a secure way to store a value that should only be used in a specific environment, such as your production site.

Think of it like a locked drawer. Instead of writing the measurement ID directly into your code, you place it in this drawer and let the code read it from there. That keeps the value out of any public code repository.

How to set it up

1. Log in to the Vercel dashboard
2. Select the project you want to configure
3. Click the Settings tab at the top
4. Open Environment Variables from the left-hand menu
5. Add a new variable with the following values:

Item	Value
Key	PUBLIC_GA_ID
Value	G-XXXXXXXXXX (your measurement ID)

6. Click Save

Why does the variable name start with PUBLIC_? This is the convention that allows frontend code to read the value. Variables without PUBLIC_ are intentionally hidden from browser-side code for security reasons. In Astro, this is the naming pattern you should use.

Step 3: Add the integration code

Next, add the code that connects your site to Google Analytics. The variable name is PUBLIC_GA_ID, but if you were using Next.js, it would be NEXT_PUBLIC_GA_ID. The exact name depends on the framework you use.

If you are using Astro, create the following file in src/components/:

GoogleAnalytics.astro

---
const gaId = import.meta.env.PUBLIC_GA_ID;
---

{gaId && (
  <>
    {/* Speed up script loading */}
    <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin />
    <link rel="dns-prefetch" href="https://www.googletagmanager.com" />
    <link rel="preconnect" href="https://www.google-analytics.com" crossorigin />

    {/* Google Tag Manager script */}
    <script async src={`https://www.googletagmanager.com/gtag/js?id=${gaId}`}></script>

    {/* Page view tracking script */}
    <script is:inline define:vars={{ gaId }}>
      window.dataLayer = window.dataLayer || [];
      function gtag() { dataLayer.push(arguments); }
      gtag('js', new Date());
      gtag('config', gaId, { send_page_view: false });

      function sendPageView() {
        gtag('event', 'page_view', {
          page_location: window.location.href,
          page_title: document.title,
          transport_type: 'beacon',
        });
      }

      if (!window.__gaListening) {
        window.__gaListening = true;
        document.addEventListener('astro:page-load', sendPageView);
      }

      if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', sendPageView, { once: true });
      } else {
        sendPageView();
      }
    </script>
  </>
)}

Do not worry if the code looks complicated This script reads the measurement ID from an environment variable and sends page view data to Google Analytics. You do not need to understand every line to use it successfully.

Step 4: Add the component to your layout

Now include GoogleAnalytics.astro inside the <head> section of your site so it loads on every page. In many Astro projects, this means adding it to a layout file such as src/layouts/BaseLayout.astro.

---
import GoogleAnalytics from '../components/GoogleAnalytics.astro';
---

<html>
  <head>
    <GoogleAnalytics />
    <!-- Other head content -->
  </head>
  <body>
    <!-- Page content -->
  </body>
</html>

---

Important things to check

After finishing the setup, confirm the following.

How to verify that it works

1. Deploy your changes to Vercel
2. Open the published site in your browser
3. Go to Google Analytics and open Reports > Realtime
4. If you appear as an active user, the setup is working

It may take a few minutes for data to appear. If you do not see anything right away, wait 5 to 10 minutes and check again.

Common issues and fixes

Symptom	Possible cause	Fix
No data is recorded at all	The environment variable name is wrong	Check the spelling of PUBLIC_GA_ID
You do not appear in Realtime	An ad blocker is active	Temporarily disable browser extensions and try again
The measurement ID is not being read	The deployment has not finished	Check the Vercel deployment logs

---

Try it now

Once Google Analytics is set up, data will start collecting automatically. It may look complicated at first, but the actual setup is only a few steps.

Summary

In this article, we covered how to set up Google Analytics on a Vercel site:

• Google Analytics is Google’s free tool for measuring website traffic
• Get your measurement ID (G-XXXXXXXXXX) and store it as a Vercel environment variable
• Add the integration component to your site so every page sends data
• Verify the setup using the Realtime report after deployment

Terms like environment variable and component can feel intimidating at first, but they become manageable once you understand what they do. I hope this guide helps you take the first step toward running your site with confidence.

---

Tags:

• Vercel
• Google Analytics
• Beginners
• Website Launch
• Analytics