There is a TD;DR at the bottom of this step by step guide. Jump ahead if you would like!
Frustration Turns into Understanding
If you are like us, having a beautiful website that functions just as well, if not better, is crucial. Google is always updating their tools and moving things around for you to find. With the recent update of GA4, this is no different. As soon as you feel you have got it all figured out, BAM! Google releases something new for you to learn. However, with this newly released, fresh looking update of Google Analytics comes a couple of items that require a few different steps to achieve what you used to do with the prior Google Analytics (Universal) account.
First, Though, A Little Background Before We Dive into the Grit
When I first saw that Google was updating Google Analytics, I was less than thrilled, as I would assume most were/are. Who likes that much change with a tool utilized so frequently. However, after messing around with their new dashboard and leveraging some of their new and improved features, I am growing more fond of this change every day. I even wrote a blog about it…
Where to Get Started
Let us start this step by step guide off in the right direction. It is super simple to add the GA4 dashboard to your existing Universal code snippet in the back end of your site. If, by chance, you do not have a Google Analytics account attached to your site. No worries! You can find a perfect step by step tutorial here. For a complete setup without Universal and just a GA4 account, you can go here to follow the setup instructions. You can also create both a Universal and GA4 account simultaneously, but in this blog/step by step guide, we will assume you already have a Universal account.
What you will need to execute this properly:
- Google Analytics GA4 Account
- Google Analytics Universal Account (Optional)
- Google Tag Manager Account
- Webflow Website/Landing Page with Webflow Form
- Google Ads Account (Optional)
Google Analytics 4 (GA4) with Existing Analytics (Universal) Account Setup
First, you need to head over to your admin panel:
This can be found in the bottom left of your navigation panel.
At this point, you could upgrade your account to a GA4 by going through the “GA4 Setup Assistant” found directly under your Property column but in our case, we already created a GA4 account and just needed to connect the two.
This was completed by copying your property ID code and adding this to your Connected Tags feature inside your Universal Admin Settings.
The code copied can be found under your GA4 Property Settings-Data Streams-(click your newly created/existing website data stream)-Measurement ID-Copy
To paste this code, head back to your Universal Analytics (UA) and go to Property column-Tracking Info-Tracking Code-Connected Site Tags-Paste and Connect
As you can see from the images above, we have already connected our Analytics accounts.
**Just as a note**
Per Google:
“If your site uses the gtag.js, tag, you have the option to Enable data collection using your existing tags. However, if you use a website builder/CMS (e.g. Wix, etc), Google Tag Manager, or your website is tagged with analytics.js, the wizard can’t reuse your existing tagging and you’ll need to add the tag yourself (instructions).”
Google provides in more in depth instructions here for all of you connection needs.”
(That is right, Google made a typo)
Another note from Google:
OK! You have made it this far. Congratulations! Now time for tracking a form submission on your Webflow landing page.
Small Disclaimer
After multiple attempts to make sure everything was connected correctly, we found a way. This does come with a caveat. At the time of writing this, this solution only will work with 1 form on your site. If you have more than one form (event) you are tracking on your landing page, a different approach will be needed. Keep in mind though a landing page should have a 1:1 conversion ratio to be a proper landing page by definition. To find out more about landing page optimization and conversation ratios, head over to here and dive deep as you would like (it goes pretty deep).
Now that we have gotten the disclaimer out of the way, let us start tracking!
What you will need to execute this properly:
- Google Analytics GA4 Account
- Google Analytics Universal Account (Optional)
- Google Tag Manager Account
- Webflow Website/Landing Page with Webflow Form
- Google Ads Account (Optional)
We have already lightly talked about how to set up your GA4 account. I will not go into more detail in this blog about how to set up others as there are plenty of sites that give you amazing walkthroughs with a great level of detail.
Here are some for ease of access:
- Website Site Creation: https://webflow.com/blog/how-to-build-a-website-in-webflow-in-3-hours-or-less
- Google Tag Manager Creation: https://www.analyticsmania.com/post/how-to-install-google-tag-manager/
- Google Ads Account Creation: https://adespresso.com/guides/google-ads-beginners/account-setup/
Google Tag Manager (GTM) with Google Analytics: GA4 Configuration Setup
Now we will connect Google Tag Manager to your GA4 account then we will follow the same process to create the Trigger that will Fire when your Webflow Form is submitted.
Now head on over to Google Tag Manager (GTM) and click on Add a new tag.
You will need to create a new Tag Configuration and a new Trigger to make it Fire.
Let us start with Tag Configuration. Once you click on it, you will be presented with a ton of Featured tags to choose from. For this walkthrough, we will choose Google Analytics: GA4 Configuration
Next set your GTM Measurement ID as your GA4 Measurement ID (This is the same step you did earlier to connect UA to GA4 and can be found GA4 Property Settings-Data Streams-(click your newly created/existing website data stream)-Measurement ID).
Once pasted, check the box for Send a page view event… and leave the drop-down items underneath the same.
Now time for the Trigger. Click Trigger and choose the option of All Pages.
At this point, it should look something like this:
Time to check if your hard work…worked.
This process is one of those improved features I mentioned earlier in this post that GA4 gives you and will be something you will leverage every time you create a new connection. Or not, that is up to you.
**Just as a note**
Naming conventions are important. Not just for your organization, but also how Google reads some of the connections, which we will discuss in a bit. For now, I labeled this configuration tag setup as “GA4 Configuration – G-XXXXXXXXXX”
Click save and let us test this thing.
After saving, you will be pushed back to the home screen and then click Preview…right after you check out one of our sweet Memoji icon.
**Just as a note**
I did all of this in Safari. It was at this point I repeated this process way too many times, all of which lead to me realizing you need to turn off your pop-up blockers. I switched to Chrome and had no issues.
Type in your URL and hit start.
A pop-up will… pop up and gives you a debug version of the URL you have just entered. The nice part about this, GA4 has a debug channel in the not so much bottom left of your dashboard. In a separate tab or window, go to your GA4 dashboard, under the Configure tab, then click DebugView.
Back when you were creating your GA4 account, if you selected Enhanced measurements:
You might see something like this in your GA4 DebugView:
You can now close out the pop-up of your site if you would like or keep playing around to see how yet another great feature of GA4 (preset Enhanced Measurements) is triggered. These do take some time to populate, depending on the situation. I believe, while one time I was setting up a tag, I did not see anything in the screen above. To resolve this, I just repeated the process. Then made sure all of the pages were refreshed and tried again.
The final check to see if your connection worked is the screen that follows after you close out your pop window, Tag Assistant. This will give you a surefire (oh yea, pun intended) way to check if your GA4 Configuration fired.
It will look something like this:
Once you see this, close out the Tag Assistant tab and back over to your GTM home dashboard. Click publish.
You can title this whatever you would like and can always go back to a different saved version you have previously published just in case during testing you broke something. I wouldn’t know anything about that. Don’t look at me that way, I don’t know what you’re talking about.
WOOHOO! You have successfully made it past Round 1.
Now it is time for Round 2!
(shoutout to @darkhorse for the gif and MKA for clip)
Google Tag Manager (GTM) with Google Analytics: GA4 Event Setup
Though, it is not going to be much of a fight as you already know how to complete the next steps. How exciting right!?
So now let us rinse and repeat as directed by a great bottle of shampoo once said.
Head back over to your home dashboard in GTM and create a new tag.
This time, however, instead of choosing Google Analytics: GA4 Configuration, you’ll select Google Analytics: GA4 Event.
In the drop-down menu, you might see the GA4 Configuration tag from before. If you do, select it. If not, no worries. Just copy and paste as you have done in the previous steps.
For the event name, this is where your naming convention will matter. I personally like Title case but feel free to keep them all lowercase as this is exactly how Google’s events show up in GA4.
The key here is to separate them by underscores. In the example shown above, for our Augmented Reality services form submission, it looks like this, “AR_Form_Submission”. I have seen others use “.” (
AZ Creates
If you are interested in learning more about Augmented Reality or have a project where you think it would work for your business, Ads, Mobile Apps, Web AR, etc, Check out our Augmented Reality service page HERE to learn more.
Back to it. This is where the magic happens.
With Webflow, you can create stunning websites that are not just beautiful but also interactive. Think Apple-Esque. The thing about these sites, they are kind of difficult to track a form submission. Some parts due to their beauty but also their lack of a destination page, which most tracking tools leverage to validate submissions. Instead, they give you a modern success closeout, if you will.
Which can look like this:
You have come all this way and how unfortunate would it be if we never found a solution to present to you. That would be mean and is not how we roll.
So here we go! Now we have added the Tag for the event, let us set up the Trigger that fires when your Webflow form receives a submission.
In the same process as before, click Triggering, but now instead of choosing the All Pages option, we will click the + sign in the top right of the window.
When you do, yet another screen shows up. This is your Trigger Configuration setup. Click it. Then, choose the not so obvious one, Element Visibility. You would think Form Submission, but not in this case.
Once there, select CSS Selector as your Selection Method. For Element Selector use “.success-message”. We like ours to only fire Once per page but feel free to set that up to how you would like. If you have other Triggers firing on that page and want this Trigger to be a priority, you can adjust the percent value. We left ours at 50.
Finally, the opinion of This trigger fires on, select Some Visibility Events.
The proper setting for this to work is as follows:
Page URL | starts with | (your URL of the landing page your Webflow form is on)
It will look like this when you are finished:
It is time to save this thing and give it a test!
Do not forget to name everything with respect to what it is and does. This can get out of hand pretty quickly if you are not somewhat organized.
Click preview from the GTM home dashboard and open a new tab to check the DebugView in GA4.
Notice the change in the URL of the Tag Assistant.
If everything was done correctly, you will now see this:
TADA!! You have successfully now added an event from a form submission on your Webflow landing page in your Google Analytics GA4 account with Google Tag Manager.
**Just as a note**
If yours does not look like the image above but the event did show up. No worries! Simply wait until your GA4 account recognizes this event and mark it as a conversion. This page can be found in your GA4 side panel, underneath Events, then All Events.
Right here:
Like this:
Now go off and track everything! Though this is not all necessarily needed as GA4 records quite a bit of events out of the box.
But What About…
Now you might be wondering what about the Google Ads integration I said that was optional. Well, I am glad you asked. We offer SEM and PPC efforts at AZ Creates and manage over 1.5 million in annual Ad Spend inside of successful PPC campaigns. We would love to know what your goals are and then present a path that best meets those goals. To find out more on all things paid advertising offered, check out our service page HERE and schedule a call today!
Google Ads Conversion Setup with Google Analytics (GA4) with Google Tag Manager (GTM)
Now time for the cherry on top of your metaphorical business ice cream sundae.
Head over to your Google Ads account and under the top navigational panel, click Tools, then Conversion.
Once there, click the big blue + sign located underneath the Conversion Actions tab.
A new page will appear. You will be presented with four options. Click the last one, Import. After that, select Google Analytics 4 properties then, Web, and then click Continue.
Following those simple steps, you will be shown all of the events you have created. In this example of the Augmented Reality Form, select it, and click Import and Continue.
That is it! You have successfully imported your GA4 event that is triggered by your Webflow landing page Form tracked implemented with Google Tag Manager into your Google Ads account.
That is a long sentence, but it is true! You are awesome!
TL;DR
In Conclusion
This is just one way to leverage all of the aforementioned tools to accomplish your goals. This is a route we found to be successful but do not feel confined to any of these steps as we, AZ Creates, wanted to share these findings with our community to help them along any journey they decide to embark on. If you have any questions about any of the mentioned steps, feel free to reach out! Simple tap HERE to head over to our contact page. We would love to hear from you.