Guides

Step by Step Guide (with Photos): How to Track Webflow Landing Page Form Submissions with Google Analytics 4 (GA4) 2020

In this comprehensive guide we will show you how to track Webflow form submissions on your landing page utilizing Google Tag Manager (GTM) and Google Analytics (GA4) with photos.

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:

  1. Google Analytics GA4 Account
  2. Google Analytics Universal Account (Optional)
  3. Google Tag Manager Account
  4. Webflow Website/Landing Page with Webflow Form
  5. Google Ads Account (Optional)

Google Analytics 4 (GA4) with Existing Analytics (Universal) Account Setup

First, you need to head over to your admin panel:

Admin Button in GA4 | AZ Creates
Admin Button in GA4


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.

GA4 Setup Assistant | AZ Creates
GA4 Setup Assistant


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

GA4 Measurement ID | AZ Creates
GA4 Measurement ID


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

GA4 Connected SiteTag | AZ Creates
GA4 Connected SiteTag


Connecting UA to GA4 | AZ Creates
Connecting UA to GA4


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:

 Note from Google | AZ Creates
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:

  1. Google Analytics GA4 Account
  2. Google Analytics Universal Account (Optional)
  3. Google Tag Manager Account
  4. Webflow Website/Landing Page with Webflow Form
  5. 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:

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.

Add New Tag in GTM | AZ Creates
Add New Tag in GTM


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

GA4 Configuration Tag in GTM | AZ Creates
GA4 Configuration Tag in GTM


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.


GTM Measurement ID | AZ Creates
GTM Measurement ID


Now time for the Trigger. Click Trigger and choose the option of All Pages.

At this point, it should look something like this:

Tag Configuration Over in GTM | AZ Creates
Tag Configuration Over in GTM


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.

Preview Workspace Changes in GTM | AZ Creates
Preview Workspace Changes in GTM


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

Test Created Tags with Tag Assistant in GTM | AZ Creates
Test Configuration Tag with Tag Assistant in GTM


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.

DebugView in GA4 | AZ Creates
DebugView in GA4


Back when you were creating your GA4 account, if you selected Enhanced measurements:

View Enhanced Measurements in GA4 | AZ Creates
View Enhanced Measurements in GA4


You might see something like this in your GA4 DebugView:

View Tested Tags in DebugView in GA4 | AZ Creates
View Tested Tags in DebugView in GA4


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:

View Fired Tested Tag Assistant in GTM | AZ Creates
View Fired Tested Tag Assistant in GTM


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!

Mortal Kombat Round 2 GIF | AZ Creates
Mortal Kombat Round 2 GIF


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

 Google Analytics: GA4 Event Tag Type in GTM | AZ Creates
Google Analytics: GA4 Event Tag Type in GTM


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.

Google Analytics: GA4 Event Tag Configuration in GTM | AZ Creates
Google Analytics: GA4 Event Tag Configuration in GTM


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:

Webflow Form Success Closeout on AZ Creates Website | AZ Creates
Webflow Form Success Closeout on AZ Creates Website


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.

Add New Trigger Button in GTM | AZ Creates
Add New Trigger Button in GTM


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.

Element Visibility Trigger Button in GTM | AZ Creates
Element Visibility Trigger Button in GTM


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:

Element Visibility Trigger Configuration in GTM | AZ Creates
Element Visibility Trigger Configuration in GTM


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.

Test Element Visibility Tag with Tag Assistant in GTM | AZ Creates
Test Element Visibility Tag with Tag Assistant in GTM


If everything was done correctly, you will now see this:

View Element Visibility Conversion Tracked in DebugView in GA4 | AZ Creates
View Element Visibility Conversion Tracked in DebugView in GA4


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:

Find All Events Tracked in GA4 | AZ Creates
Find All Events Tracked in GA4


Like this:

View All Events Tracked and Turn into Conversion in GA4 | AZ Creates
View All Events Tracked and Turn into Conversion in GA4


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.

Find Conversions in Google Ads | AZ Creates
Find Conversions in Google Ads


Once there, click the big blue + sign located underneath the Conversion Actions tab.

Add New Conversions Button in Google Ads | AZ Creates
Add New Conversions Button in Google Ads


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.

Import Conversion From GA4 Process in Google Ads | AZ Creates
Import Conversion From GA4 Process in Google Ads


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.

Select Preferred Conversion in Google Ads | AZ Creates
Select Preferred Conversion in Google Ads


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.

Successful Import of GA4 Conversions Screen in Google Ads | AZ Creates
Successful Import of GA4 Conversions Screen in Google Ads


That is a long sentence, but it is true! You are awesome!

TL;DR

  1. Create all of the required tools necessary for this step by step guide
    1. Webflow Website/Landing Page with Webflow Form
    2. Google Tag Manager Account
    3. Google Analytics GA4 Account
    4. Google Ads Account (Optional)
  2. Create a Google Analytics: GA4 Configuration Tag
  3. Test with Google Tag Manager and GA4 DebugView
  4. Create a Google Analytics: GA4 Event Tag
    1. Element Visibility, not Form Submission
  5. Test with Google Tag Manager and GA4 DebugView
  6. Import Event into Google Ads through Google Analytics 4 properties


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.

Latest Articles

View All

7 Benefits of Augmented Reality for Business

Augmented reality for business can create a 3D, innovative world for you to enhance your business or product with. How? Learn more here.

March 14, 2021

How and Why You Should Conduct Market Research For Your Business

By evaluating the strengths and weaknesses of your competition, you can begin to formulate how to give your company an advantage.

March 14, 2021

How to Get Started On Shopify (Step-by-Step Guide)

In this guide we will talk you through some of the most important aspects that every business owner should consider when getting started on Shopify.

March 14, 2021