How to Add Google Analytics to Webflow

Ready to see exactly how people find and use your Webflow site? Connecting it to Google Analytics is the best way to get clear, data-driven answers. This guide will walk you through setting up Google Analytics 4 on Webflow, step-by-step, so you can track visitors, understand audience behavior, and measure what really matters for your business.

Why You Need Google Analytics on Your Webflow Site

Building a great-looking site in Webflow is the first step, but understanding its performance is what drives growth. Without analytics, you're essentially flying blind. You might have a feeling about what's working, but data replaces guesswork with certainty.

Here’s what connecting Webflow to Google Analytics unlocks:

• Understand Your Audience: Discover where your visitors are coming from geographically, what devices they use (desktop vs. mobile), and their basic demographic info. Are they finding you through Google Search, a link on social media, or a paid ad? Analytics tells you.
• See What Content Works: Find out which pages are the most popular on your site. Do people love your blog posts or are they spending more time on your services page? This helps you create more of what your audience wants and less of what they don't.
• Track User Behavior: Analytics shows you the journey visitors take through your site. You can see which page they land on first, where they click next, and where they tend to leave. This is invaluable for finding friction points and improving user experience.
• Measure Your Marketing Efforts: Are your Facebook ads actually driving sign-ups? Is your SEO strategy bringing in the right kind of traffic? By tracking conversions, like form submissions or clicks on your "contact" button, you can measure the true return on your marketing investment.

Getting Your Google Analytics 4 Measurement ID

Before you can connect anything in Webflow, you need to grab a specific code from your Google Analytics account. This is called the "Measurement ID." It acts like a mailing address, telling your website exactly where to send all of its traffic data.

If you don't have a Google Analytics account yet, you'll need to create one first. Don't worry, it's free.

How to Find Your GA4 Measurement ID:

1. Navigate to analytics.google.com and sign in.
2. If you have multiple accounts or properties, make sure you've selected the correct GA4 property you want to use for your Webflow site.
3. In the bottom-left corner of the screen, click on the gear icon labeled Admin.
4. In the Property column (the middle one), click on Data Streams.
5. You should see your website listed as a data stream. Click on it to open its details.
6. On the next page, you'll see your Measurement ID on the top right. It will start with "G-" followed by a string of letters and numbers (e.g., G-XYZ123ABC).

Copy this Measurement ID. This is the key you'll need for the next step inside Webflow.

Method 1: The Easiest Way to Add GA4 Using Webflow's Built-in Integration

For most users, this is the quickest and most reliable method. Webflow has a dedicated spot for your Google Analytics ID, making the entire process a seamless integration.

Follow these steps to connect your accounts:

1. Open Your Webflow Project: Log in to your Webflow account and open the project you want to track.
2. Go to Project Settings: In the top-left of the Designer or your Dashboard, click the Webflow icon and select Project Settings.
3. Navigate to the Integrations Tab: In the Project Settings header menu, find and click on the Integrations tab.
4. Find the Google Analytics Section: Scroll down the page until you see the section labeled "Google Analytics."
5. Paste Your Measurement ID: You'll see a field here asking for your "Google Analytics 4 Measurement ID." Paste the ID (e.g., G-XYZ123ABC) you copied earlier into this box.
6. Save and Publish: Click the Save Changes button. Then, be sure to Publish your site to at least one domain. The changes won't go live until you do.

That's it! Webflow will now automatically add the necessary Google Analytics tracking code to every page of your site. Easy, clean, and no coding required.

Method 2: Manually Adding the Google Analytics Tag with Custom Code

While the built-in integration works great, some situations might call for adding the Google Analytics script manually. For instance, you might want to add additional tracking parameters or load other scripts alongside your GA tag.

This method gives you more control but involves handling a code snippet directly.

Step 1: Get Your Google Tag Script

1. Go back to your Google Analytics dashboard.
2. Navigate to Admin > Data Streams and click on your website's data stream.
3. At the bottom of the page, under "View tag instructions," click View Tag Instructions. A new panel will open.
4. Select the "Install manually" tab.
5. Google will provide you with a code snippet. It starts with <!-- Google tag (gtag.js) -->. Go ahead and copy this entire block of code.

Step 2: Add the Script to Your Webflow Site

1. Return to your Project Settings in Webflow.
2. Click on the Custom Code tab in the header.
3. Look for the section called Head Code. Paste the entire Google Tag script you just copied into this box. It’s important to place it in the <head> section to ensure it loads at the right time.
4. Click Save Changes.
5. Finally, Publish your site for the changes to take effect.

This method accomplishes the same goal as the first one but keeps the control in your hands. Just remember: only use one of these methods. Using both the integration and the manual code will cause duplicate tracking and mess up your data.

How to Verify Your Google Analytics Tag is Working

After installing Google Analytics, don’t just assume it’s working. You should always verify that data is being sent correctly. Here are three simple ways to check.

1. Use the Real-Time Report

This is the simplest way to see if everything is connected properly.

• Go to your Google Analytics property.
• In the left-hand menu, navigate to Reports > Real-Time.
• Now, open your published Webflow website in a new browser window (using Incognito Mode is a good idea to ensure it's a "new" visit).
• Keep an eye on the Real-Time report in GA4. Within a minute or two, you should see "Users in last 30 minutes" change to 1 (or more). You might also see your location appear on the map. If you see activity, it’s working!

2. Use Google's Tag Assistant

This is a handy Chrome extension that's perfect for checking tags on any site.

• Install the official Google Tag Assistant extension from the Chrome Web Store.
• Navigate to your live Webflow website.
• Click on the Tag Assistant icon in your browser's toolbar and enable it for your site.
• Refresh the page.
• Click the Tag Assistant icon again. It will show you a list of all the Google tags it found. You should see your GA4 tag listed with a green or blue smiley face, indicating it loaded successfully.

3. Check with Browser Developer Tools

If you're a bit more technical, this is a surefire way to confirm the connection.

• On your Webflow website, right-click and choose "Inspect," or press F12 to open the Developer Tools.
• Go to the Network tab.
• In the filter box near the top, type collect?.
• Refresh your page.
• You should see one or more network requests pop up with names containing 'collect?v=2...'. This is the tracking data being sent from your site to Google Analytics. If you see this, you are good to go.

Bonus: Tracking Webflow Form Submissions

One of the most valuable actions you can track is when a user submits a contact or lead form. It's a key conversion that directly measures business interest. The best practice for tracking this is to redirect users to a "Thank You" page after they submit the form.

1. Create a "Thank You" Page: In your Webflow project, create a new, simple page. Something like yourdomain.com/thank-you. Style it with a brief "Thanks for your message!" text. It's crucial this page is set to not be indexed by search engines in the Page Settings to avoid accidental visits from Google Search.
2. Set Up Form Redirect: Select your form in the Webflow Designer. Open the Element Settings panel on the right. Under the Form Settings, you'll see a field for Redirect URL. Paste the slug of your Thank-You page here (e.g., /thank-you).
3. Publish Your Site: Once saved, publish your changes. Now, every successful form submission will send the user to this confirmation page.
4. Create a GA4 Conversion Event: In Google Analytics, navigate to Admin > Events. Click Create event and then "Create." Name your new event (e.g., form_submission). For the matching condition, set page_location contains thank-you. This tells Google to log an event every time someone lands on your new confirmation page.
5. Mark as a conversion: Go To Admin > Conversions. After about 24 hours, you'll see your form_submission event in the list or you can click New conversion Event on the top of the Conversions page, enter form_submission - this will make it an official business metric you view throughout Google Analytics. This is a powerful, low-effort way to tell marketing value.

Final Thoughts

Connecting your Webflow site to Google Analytics is one of the most important steps you can take after launching. It moves you from guessing what works to knowing exactly what your visitors are doing, which campaigns are driving results, and where you should focus your energy to grow.

Once you’re collecting all that valuable data, the next challenge is making sense of it. Sorting through the GA4 interface to track down specific insights can feel like looking for a needle in a haystack. We made Graphed to solve exactly this problem. Simply connect your Google Analytics account, and you can instantly start building real-time dashboards and getting answers just by asking questions in plain English - no technical skills required.