How to collect both Google Analytics 4 and Universal Analytics data on your Webflow website

[small updates made March 2022]

Google released Google Analytics 4 in October 2020. It’s a completely different version of GA, so you can’t simply “upgrade” your old Google Analytics (aka Universal Analytics) and be set. GA4 is a completely new install, so you’ll have two entirely separate data tracking properties for your website (yes, that is very frustrating).

Should we install GA4 now or wait?

It’s a good idea to install now, because a GA4 property will only collect data from the time it is created and moving forward. In July 2023, Google will sunset Universal Analytics, forcing everyone to use GA4. Installing GA4 now is the best way to ensure that you’ll have at least 12 months' worth of historical data on your website traffic, behavior, etc.

I’m not going to cover how to install GA4 in this post, but here are some recommended resources:

• ‍Add a GA4 property to a site that already has Analytics (Google guide)‍
• How to install GA4 with Google Tag Manager (video)‍
• What’s new in GA4 (blog post)

Should we continue to use Universal Analytics?

Yes — for two reasons:

1. GA4 feels incredibly half-baked at the moment. Basic website analytics best practices — like filtering out internal traffic, setting up alerts, creating events, and tracking conversions — are either missing or incredibly convoluted to set up. Other features — like the ability to tie GA4 to Google Search Console — are not currently possible. I’ve spoken to many of my peers, and I’ve yet to hear anything close to a glowing review of GA4.
2. We are in a transition period, so it’s a good idea to have both sets of Google Analytics active right now. This Search Engine Land article puts it well: To keep your Universal Analytics property firing while we all learn the new GA4 interface, “you will have to have both tags firing on your site. This is key to keep using the GA UA reporting we are all familiar with.”

How to properly track both GA4 and GA UA with Webflow

As you all know, I despise WordPress, and virtually all of my clients are on Webflow. So I’m going to focus on the Webflow CMS in this blog post.

When GA4 was first released, Webflow would throw an error if you tried incorporating your new GA4 tag inside Webflow > Project Settings > Integrations > Google Universal Analytics Tracking ID.

In that field, you can now add either your UA tag (format UA-12345678-1) or your new GA4 tag (format G-0123456789) — but you can’t add both. Here’s my recommendation on how to track both.

If you’re NOT using Google Tag Manager

1. Add (or keep) your Universal Analytics tracking ID in the aforementioned spot in Webflow. This is sufficient to continue tracking your current Google Analytics (GA UA) data.
2. Just below that, it is critical that you disable the “Use global site tag” field so it reads, “No.” If you skip this step inside Webflow, your GA implementation will be incorrect, Google Tag Assistant will throw errors, and/or your GA4 property won’t collect data. See screenshot:

The confusing part here is that you actually are going to be using gtag.js for GA4 data collection, but it will live in the Webflow “Custom Code” area, per the following steps.

3. Inside your GA4 implementation within Google Analytifcs, you need to grab 2 code bits. Find these by going to GA4 > Admin (gear on the lower left side of the screen) > Data Streams > [click on your stream name] > within the “Tagging Instructions” area (wrench icon), click Global Site Tag (gtag.js). Copy that code.
4. Now go to Webflow > Project Settings > Custom Code. Paste the script code into the “Head Code” area. Publish your Webflow site.
5. Finally, use Google Tag assistant (a very useful Chrome browser extension) to verify correct implementation of both old GA and new GA.

If you ARE using Google Tag Manager (recommended)

If you’re using Google Tag Manager (GTM) to push your Google Analytics tracking code, you should already have a Google Universal Analytics "page view" tag set up in GTM. Since we now also want to collect GA4 data, here's how to create a new GA4 "page view" tag and leverage it on your Webflow site:

1. GTM > create a new tag, and select “Google Analytics: GA4 Configuration.”
2. Paste in your GA4 measurement ID.
3. Set the trigger to “All pages”, publish your tag, save your changes, and publish GTM!
4. GTM > “Admin” tab > “Install Google Tag Manager” > Grab the 2 bits of code.
5. Now go to Webflow > Project Settings > Integrations. Make sure the "Google Universal Analytics Tracking ID" field is blank. Why? Because we're going to push all GA-related code in the next step, and we don't want GA tracking to be duplicated.
6. Now go to Webflow > Project Settings > Custom Code. Paste the two GTM code snippets from Step 4 above — one in the "Head Code" field, and one in the "Footer" field. Publish your Webflow site. These GTM code lines will push both all the code associated with your GA UA tag as well as your new GA4 tag.
7. Now use Google Tag assistant to verify correct implementation of both old GA and new GA.

Questions? Contact me anytime.