Add Google Analytics to Vercel

Vercel provides basic analytics for performance but Google Analytics provides much deeper insights. This blog post will guide you through adding Google Analytics to your Vercel-hosted projects, step by step.

Let's dive in!

Before we dig in I want to show you something. I promise it's worth it...

Google Analytics is great, but also complex and a bit clunky. If you just want a straightforward dashboard with the insights you need, GA is not a great place to start. Additionally, Google doesn't care about privacy and GA requires an annoying cookie banner.

That's why I built Simple Analytics, a privacy-friendly and simple analytics tool - no personal data, no cookies, just the insights you need in a straightforward dashboard.

Here is how it looks vs GA. Feel free to check our live analytics to get an idea for your project. (It is free btw)

All right, enough about us. Now let's get into answering your question!

Can you spot the difference between the dashboards?

Set Up Google Analytics

To integrate GA with your Vercel-hosted project, first ensure you have a Google Analytics account set up for your website. Here's how to get started:

Create a Google Analytics Account: Visit the Google Analytics website and sign in with your Google account. If you don’t have one, you’ll need to create it.
Set Up a New Property: Follow the instructions to create a new GA4 property, choosing "Web" as your platform type.
Obtain Your Measurement ID: Once your property is configured, Google will provide you with a Measurement ID (formatted as "G-XXXXXXXXXX"). This ID is crucial for integrating GA with your Vercel projects.

Add Google Analytics to Your Vercel Project

Adding Google Analytics to a project hosted on Vercel varies slightly depending on the framework or static site generator you're using. Below is a general approach for Next.js projects, which are commonly hosted on Vercel:

For Next.js Projects:

Install the GA Library: you can use the next-ga library or a similar package for easy integration. Install the library by running npm install next-ga or yarn add next-ga in your project directory.
Set Up the GA Component: Create a new component (e.g., Analytics.js) in your project where you will import the GA library and initialize it with your Measurement ID. Here's a basic example:

import React from 'react';
import { useEffect } from 'react';
import ReactGA from 'react-ga';

const Analytics = () => {
  useEffect(() => {
    ReactGA.initialize('Your-GA-Measurement-ID');
    ReactGA.pageview(window.location.pathname + window.location.search);
  }, []);

  return null;
};

export default Analytics;

Include the Analytics Component: Add the Analytics component to your _app.js or individual pages to ensure GA tracks page views across your site.

For Other Projects:

For projects not using Next.js, the approach involves manually adding the GA tracking script to your HTML or JavaScript files. Typically, you would include the GA script in a global component or layout template that renders across your site.

(Optional) Create New Properties

To track multiple websites, create more GA properties and use the corresponding Measurement IDs. This prevents GA from conflating the data.

Verify the Integration

After integrating Google Analytics into your Vercel project:

Deploy Your Changes: Push your changes to your Vercel project and wait for the deployment to complete.
Check Google Analytics: Visit your site to generate some traffic, then log into your Google Analytics account and navigate to the "Realtime" section to see if your visit is being tracked.

Final Thoughts

Adding Google Analytics to your Vercel-hosted projects can give you great insights. However, ask yourself: is Google Analytics the right tool for you?

GA is an overpowered solution for straightforward analytics. If you're looking for a simple and intuitive dashboard with the insights you need, there are better alternatives. Yes, I’m talking about my own product (Simple Analytics), but there are others out there as well.

I hated using Google Analytics for my projects. It's clunky, there are hundreds of dashboards and it doesn't look appealing. Also Google doesn't care about privacy or ethics. That's why I decided to build my own and more intuitive web analytics tool.

If this resonates with you, feel free to give Simple Analytics a spin. You just need to add the script and off you go. This takes about one minute- and there is a free version as well!

Enjoy!

Google Analytics Begrippenlijst