How to Add Google Analytics to GitHub Pages

Adding Google Analytics to your GitHub Pages site is one of the quickest ways to start understanding who your visitors are and how they interact with your content. It transforms your project site from a simple online document into a source of valuable data. This guide walks you through the entire process, step-by-step, making it easy to get up and running even if you're not a seasoned developer.

What is GitHub Pages?

Before we add tracking, let's do a quick refresher. GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files directly from a repository on GitHub, optionally runs them through a build process, and publishes a website. It’s incredibly popular for hosting project documentation, portfolios, blogs, and other sites that don’t require a complex server-side backend. Most GitHub Pages sites are either simple, hand-coded HTML pages or built using Jekyll, a static site generator that GitHub supports natively.

Why Add Google Analytics?

Connecting Google Analytics gives you the power to answer critical questions about your audience, such as:

How many people visit my site? Track daily, weekly, and monthly users.
Where do they come from? See traffic sources like search engines, social media, or direct links.
Which pages are most popular? Identify your most engaging content.
What devices are they using? Understand if visitors are on desktop, mobile, or tablets.

This information is crucial for improving your content, understanding user engagement, and demonstrating the reach of your project.

Step 1: Get Your Google Analytics 4 Measurement ID

The first thing you need is a Google Analytics 4 property. This is where all the data from your website will be collected and analyzed. If you have an old "Universal Analytics" property (its ID starts with UA-), you'll need to create a new GA4 property, as Universal Analytics has been discontinued.

How to Set Up a New GA4 Property

If you already have a GA4 property for your site, just find your Measurement ID and skip to the next section. If not, follow these steps:

Go to the Google Analytics website and sign in with your Google account.
Click on the Admin gear icon in the bottom-left corner.
In the "Property" column, click Create Property.
Enter a Property name (e.g., "My Portfolio Site"), select your Reporting time zone and Currency, then click Next.
Fill out the optional business information and click Next.
When asked to "Choose a platform," select Web.
Now, set up your "data stream." This is the source of your data.
- In the Website URL field, enter the URL of your GitHub Pages site (e.g., your-username.github.io). Make sure you select either https:// or http:// correctly.
- Give your data stream a Stream name (e.g., "GitHub Pages Site").
- Click Create stream.
You'll land on a "Web stream details" page. Here you will find your Measurement ID, which looks like G-XXXXXXXXXX. This ID is what uniquely identifies your website to Google Analytics.

Getting the Tracking Code Snippet

On the same "Web stream details" page, under "Installation instructions," find the "Install manually" tab. Google will provide you with a JavaScript code snippet. It’s called the Google tag (or gtag.js) and looks like this:

Copy this entire snippet. Make sure to replace G-XXXXXXXXXX with your actual Measurement ID if it isn't already populated. This is the code we need to add to your site's files.

Step 2: Add the Tracking Code to Your GitHub Pages Site

Now that you have the tracking code, the next step is to place it in the right file(s) in your GitHub repository. The correct method depends on how your site is built.

Method 1: For Simple HTML Sites

If your website is just a collection of plain HTML files without a build tool like Jekyll, you’ll need to add the code snippet to every page you want to track.

Navigate to your project repository on your local machine.
Open your main HTML file, typically index.html.
Paste the entire Google Analytics tracking snippet right before the closing </head> tag. The <head> section is near the top of your HTML file and is meant for metadata, not visible content. Placing it here ensures the script loads early.
Save the file.
Repeat this process for every other HTML page in your project (e.g., about.html, contact.html, etc.). This is a bit tedious, but it's necessary for simple sites to ensure tracking works everywhere.

Once you’ve added the code to your files, commit your changes and push them to GitHub. The changes should be live on your site shortly after.

Method 2: For Jekyll Sites (The Smarter Way)

Most feature-rich GitHub Pages sites use Jekyll. Jekyll helps you avoid repeating code by using includes for common elements like headers, footers, and sidebars. This is perfect for adding the Google Analytics script only once.

1. Find Your Head Include File

In a standard Jekyll project, you'll find a folder named _includes. This folder contains HTML snippets that are reused across your site. Look for a file inside this folder called something like head.html, header.html, or _head.html.

This file defines the content inside the <head> ... </head> tags for every page on your site.

2. Add the Tracking Snippet

Open the head.html (or equivalent) file and paste the Google Analytics tracking snippet inside it, right before the closing </head> statement (if it’s present in the include).

By placing it here, Jekyll will automatically inject the tracking code into every single page it builds. This way, you only have to manage the script in one location.

3. An Even Better Way: Using _config.yml

For more control and better practice, you can use Jekyll's main configuration file, _config.yml, to store your Measurement ID. This method keeps your private ID out of your main theme files and makes it easier to update later.

First, edit _config.yml:

Open the _config.yml file in the root of your repository and add a new line:

google_analytics: G-XXXXXXXXXX

Replace G-XXXXXXXXXX with your actual Measurement ID.

Next, update your head.html file:

Now, go back to your _includes/head.html file. Instead of pasting the full script directly, paste this Jekyll-aware version:

Here's what this code does:

{% if site.google_analytics ... %}: This uses Jekyll’s Liquid templating language. It checks if you've defined google_analytics in your _config.yml file.
and jekyll.environment == 'production': This ensures the tracking script is only included when your site is built on GitHub's servers (the "production" environment), not when you're testing it locally. This prevents your own test visits from polluting your analytics data.
{{ site.google_analytics }}: This injects your Measurement ID from the _config.yml file directly into the script.

This is the recommended approach for any Jekyll-powered GitHub Pages site.

Step 3: Commit, Push, and Verify

Whether you used the simple HTML or Jekyll method, the final steps are to save your work, push it to GitHub, and confirm that everything is working.

1. Commit and Push Your Changes

Use your preferred git workflow (command line or a GUI tool like GitHub Desktop) to commit your changes with a clear message and push them to your repository on GitHub.

2. Wait for GitHub Pages to Rebuild

GitHub Pages needs a minute or two to automatically rebuild your site with the new changes. You can check the build status by going to your repository on GitHub, clicking on the Actions tab, and looking for a recent workflow run associated with "pages-build-deployment." A green checkmark means it's done.

3. Verify the Installation

Once your site is updated, you need to verify that the tracking code is firing correctly.

Check the page source: Open your GitHub Pages website in your browser. Right-click on the page and select "View Page Source." Search for your Measurement ID (G-XXXXXXXXXX). If you find it inside the HTML, you know the script has been added successfully.
Use Google Analytics' Realtime Report: Go back to your Google Analytics dashboard and navigate to Reports > Realtime. When you visit your live GitHub Pages site, you should see yourself appear as a visitor in the Realtime overview within a minute or two. This is the ultimate confirmation that your data is being collected.

Final Thoughts

Adding Google Analytics to a GitHub Pages site is a simple but high-impact task that gives you visibility into your site’s performance. Whether you add the tracking code manually to HTML files or streamline it using Jekyll's _config.yml, you're now equipped to make data-informed decisions about your project, blog, or portfolio.

Once you start collecting all that great data in Google Analytics, the challenge often shifts to making sense of it all. At Graphed, we help you turn that raw data into clear, actionable insights without the hassle. By connecting Google Analytics and your other marketing or sales platforms, our AI lets you ask questions in simple, natural language and instantly build real-time dashboards. This automates the tedious reporting work, freeing you up to focus on what the data is actually telling you.