How to Install Google Analytics on Webflow

Connecting Google Analytics to your Webflow site is the first critical step toward understanding how visitors interact with your content. It turns guesswork into a data-driven strategy by revealing who your audience is, where they come from, and what they do on your pages. This tutorial will walk you through exactly how to set up Google Analytics 4 on your Webflow site, verify the connection is working, and troubleshoot common issues.

What is Google Analytics 4?

Google Analytics 4 is the newest version of Google's analytics platform. It's designed to be more user-centric, tracking visitor journeys across both websites and apps in a unified way. Unlike its predecessor, Universal Analytics, GA4 uses an event-based data model. This means that instead of focusing on "sessions" and "pageviews" as separate hit types, almost every interaction - a page view, an outbound click, a file download - is treated as an event. This model provides a more flexible and detailed understanding of user behavior.

Other key differences include:

• Enhanced Measurement: GA4 automatically tracks certain events out-of-the-box, such as scrolls, outbound clicks, site search, and video engagement, without needing additional custom code.
• Predictive Metrics: Using machine learning, GA4 can predict future user behavior, like the probability of a user churning or making a purchase.
• BigQuery Integration: GA4 offers a free, native integration with BigQuery, allowing you to run complex queries on your raw, unsampled analytics data.

For any new website, setting up GA4 from the start is the recommended practice, as Universal Analytics has been fully sunsetted by Google.

Setting Up Your Google Analytics 4 Property

Before you can connect anything to Webflow, you need a Google Analytics account and a GA4 property. If you already have one, you can skip to the next section and just find your Measurement ID. If you're starting from scratch, follow these steps.

Step 1: Create a Google Analytics Account

If you don't already have one, head over to analytics.google.com and log in with your Google account. Click the blue "Start measuring" button.

1. Account setup: The first step is to create an account. An "Account" is the highest level of organization and can contain multiple "Properties." It's best practice to use your company or organization's name for the Account Name. For example, "My Awesome Company."
2. Account Data Sharing Settings: Review the data sharing options. These settings control how your data is shared with Google. For most users, leaving the defaults checked is fine. Click "Next."

Step 2: Create a GA4 Property

A "Property" represents your website or app. If your business has a website, an Android app, and an iOS app, you could have three different data streams within a single property.

1. Property Name: Give your property a descriptive name. This is typically the name of your website, e.g., "My Webflow Site."
2. Reporting Time Zone and Currency: Select the primary time zone and currency your business operates in. This is important for the accurate reporting of time-based data and e-commerce revenue.
3. Business Details: Fill in the optional business information, such as your industry category and business size.
4. Business Objectives: Select the objectives that are most relevant to your business goals. This helps GA4 customize the reports it shows you by default. Click "Create."

Step 3: Create a Web Data Stream and Get Your Measurement ID

A "Data Stream" is your source of data. Since you're tracking a website, you'll need to create a "Web" data stream.

1. Choose a platform by clicking on "Web."
2. Enter your website's URL (make sure to select https://) and give your stream a name (e.g., "Webflow Website Stream").
3. Ensure the "Enhanced measurement" option is toggled on. This is what enables GA4 to automatically track events like scrolls and outbound clicks.
4. Click "Create stream."

After you create the stream, a new window will pop up with the stream details. The most important piece of information here is your Measurement ID, located in the top-right corner. It will be in the format G-XXXXXXXXXX. Copy this ID to your clipboard, you will need it for the next steps.

Method 1: Installing GA4 with Webflow's Native Integration

Webflow offers a simple, direct integration for Google Analytics, making this the easiest and most common installation method for most users.

1. Log in to Webflow: Open your Webflow dashboard and navigate to the project you want to track.
2. Go to Project Settings: Once in the Project view, click on "Project Settings" at the top of the left-hand sidebar or from the project's dropdown menu.
3. Navigate to the Integrations Tab: Inside Project Settings, find and click on the "Integrations" tab.
4. Paste Your Measurement ID: Scroll down until you see the "Google Analytics" section. There will be a field labeled "Measurement ID". Paste the G-XXXXXXXXXX ID you copied from your GA4 data stream into this field.
5. Save and Publish: Click the "Save Changes" button, and then be sure to publish your website to your selected domain(s). The changes will not be live until you publish the site.

That's it! This method takes less than a minute and is all most users need to start collecting basic website data.

Method 2: Manually Adding the GA4 Tracking Code

If you want more control over your tracking setup — for instance, to add custom event parameters or use Google Tag Manager later on — you might prefer to install the tracking code manually. This method involves adding the raw Google Analytics script (gtag.js) to your website’s head code.

Step 1: Get the Global Site Tag (gtag.js)

1. Go back to your Google Analytics account.
2. If you've closed the "Web stream details" window, navigate to Admin > Data Streams and click on your web stream.
3. Under "Installation instructions," find the "Install manually" tab.
4. Here you'll see a JavaScript snippet. Click the copy icon in the top right of the code block. It will look like this:

<-- 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>

Step 2: Add the Code to Webflow's Custom Code Area

Heads up: You must have a paid Webflow Site plan or an account-level paid plan to use the custom code feature.

1. Navigate back to your Webflow Project Settings.
2. Click on the "Custom Code" tab.
3. In the "Head Code" section, paste the entire gtag.js script you just copied from Google Analytics.
4. Click "Save Changes."
5. Publish your website for the changes to take effect.

Important Note: Use only one of these methods. If you add the Measurement ID in the integrations tab and the gtag.js script in the custom code, your tracker will fire twice for every page view, which will inflate your traffic data and make your analytics unreliable.

How to Verify the Installation is Working

After setting up analytics, it’s essential to confirm that data is being collected correctly. Don’t just assume it's working! Here are a few ways to check.

1. Use the Real-time Report in GA4

This is the simplest way to check your connection.

1. In Google Analytics, go to Reports > Real-time.
2. Open a new incognito browser window (to avoid interference from browser extensions or being logged into your Webflow account).
3. Navigate to your published Webflow website's homepage.
4. Switch back to the GA4 Real-time report. After about 30-60 seconds, you should see at least "1" in the "Users in last 30 minutes" card. You may also see data appear in other cards, like "Views by Page title" showing your homepage.

If you see your activity, the setup was successful!

2. Use Google's Tag Assistant

For a more technical confirmation, you can use the official Tag Assistant Companion browser extension from Google.

1. Install the Tag Assistant Companion from the Chrome Web Store.
2. Go to tagassistant.google.com.
3. Click "Add domain" and enter the full URL of your published Webflow site.
4. Click "Connect." A new browser tab will open to your website with the Tag Assistant debug mode active.
5. In the original Tag Assistant tab, you should see a "Connected!" message. Look for your Google Analytics tag (usually starting with G-…). If you see a green checkmark next to it with events firing, such as page_view, it means the tag has been found and is working correctly.

Common Troubleshooting Tips

"I waited but I don't see myself in the Real-time report."

• Did you publish the site? In Webflow, saving changes is not enough. You must click the "Publish" button for any updates to go live.
• Typos in the ID/Code: Double-check that you copied the Measurement ID or script perfectly. Even one character out of place will break the connection.
• Ad Blockers or Browser Extensions: An aggressive ad-blocker or other privacy extension might be blocking the Google Analytics script from running. Try opening your site in an incognito window or temporarily disabling your extensions to check.
• Wait a bit longer: Although usually quick, sometimes it can take a few minutes for a visitor to appear in the Real-time reports. Give it 2-3 minutes just to be sure.

"My traffic numbers look doubled!"

This almost always means you've installed the code twice. Check both Webflow's "Integrations" tab and the "Custom Code" tab. Remove one of the installations, save, and republish your site.

Final Thoughts

Connecting Google Analytics 4 to your Webflow site is a fast, straightforward process that serves as the foundation for your entire digital analytics strategy. By following these steps, you can start gathering valuable data to understand your audience, improve your content, and measure success.

Once your data is flowing, the challenge shifts to analyzing it and deriving actionable insights. With Graphed, we simplify that next step. You can connect your Google Analytics account in seconds and use simple, conversational language to build real-time dashboards and reports. Instead of grappling with complex reporting interfaces, just ask questions like, "Show me a chart of my top traffic sources this month," and we’ll instantly create the visualization, helping you find answers and get back to growing your business.