How to collect both Google Analytics 4 and Universal Analytics data on your Webflow website
January 9, 2021
Google recently released Google Analytics 4. 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. Sometime in the next 2-4 years, Google will more than likely sunset Universal Analytics and force everyone to use GA4. Installing GA4 now is the best way to ensure that you’ll have plenty 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:
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.
We are merely 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.
Add (or keep) your Universal Analytics tracking ID in the aforementioned spot in Webflow.
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 but it will live in the Webflow “Custom Code” area, per the following steps.
Inside your GA4 implementation, 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.
Now go to Webflow > Project Settings > Custom Code. Paste the scripts code into the “Head Code” area. Publish your Webflow site.
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
If you’re using GTM and you want to use both GA4 and Google Universal Analytics, then there’s no need to add anything into Webflow’s project settings. Simply do the following:
GTM > create a new tag, and select “Google Analytics: GA4 Configuration.”
Paste in your GA4 measurement ID.
Set the trigger to “All pages”, publish your tag, save your changes, and publish GTM!
Now use Google Tag assistant to verify correct implementation of both old GA and new GA.