Measuring Website Conversions in Webflow using GA4

Introduction

It’s official, Google is getting rid of Universal Analytics and replacing it with GA4. Since they are sunsetting Universal Analytics mid-2023, it makes sense to set-up GA4 soon and get familiar with it.

Luckily, just like with UA, you can still use GA4 to track conversions. You’ll want to keep in mind that Google replaced site “goals” with “conversions”, and even though they have the same function, setting them up is a slightly different process than before.

First of all, let’s quickly cover what a conversion is.

What is a website conversion?

A website conversion is when a user of our website has taken a certain action that we have predetermined ourselves as a desired action.

For example, if a user moves to the pricing page, that’s an action, but it doesn’t mean that much to us because they are just moving around our website. But as soon as they take a desired action such as signing up to a newsletter or buying a product, then we have a conversion that makes sense to track.

Some other examples of website conversions include:

• Filling out a form
• Signing up for an email newsletter
• Clicking a specific button
• Making a sale
• Using a Burger King drive-thru
• Downloading a resource

What website conversions can we track in Webflow with GA4?

The easiest conversions to track in Webflow using Google Analytics 4 are file downloads and page visits. We can’t track form-submissions using just GA4 alone, but there is a simple workaround. The way we can still track this is by sending users to a thank-you page after they have submitted their info to a form, which is what we are going to focus on.

There is a lot more that can be tracked if you’re willing to add Google Tag Manager to your website, but with the added complexity that this adds, it might be worth sticking to just using Google Analytics.

When setting up website tools, make sure they are simple enough that you’re happy to keep coming back to them to check-up on. There’s no point in setting up a complex tool that you immediately abandon.

Preparing website conversions in Webflow

We’re going to track a simple conversion of a user submitting a form by sending that user to a confirmation page.

To do this, we’re first going to add a simple page in Webflow for the confirmation.

Create a new page and give it a simple name like “thank you” or “confirmation”.

‍

Add some simple page content such as the website navigation, footer, and a section letting customers know that the submission has been confirmed.

It might look a little something like this:

‍

Now that we have the confirmation page set-up, we want to go to the forms around our website and redirect them to this page. Let’s do this to the email form on the homepage.

‍

On the top right in the settings for the form, I’ve added a redirect url of /thank-you, which is going to take users to the newly created thank-you page once they have added their email.

‍

We will want to do this for every form submission we want to track. So you’ll want to go around your website and and the new redirect URL to all forms.

If you have multiple types of forms, you’ll want to add different confirmation pages to track the forms separately. So you might have a second confirmation page for users who fill out your contact form opposed to your newsletter form.

Will all of this set-up, we can now republish our Webflow site and hop over to Google Analytics 4.

‍

There is a lot if information to sort through, but for now we are going to focus on events. In the Reports tab, you can find events under Engagement.

When we scroll down, we can see all the different events across our website and how they are tracking.

‍

Currently the event we are wanting to focus on (redirect to a page after form submission) is not being tracked, so we will have to add a new event for this.

Let’s go to Events under the Configure tab to set these custom events up.

‍

Since our desired event isn’t there, we’re going to set it up manually. Click on the “Create event” button in the top right, then in the new create events screen, click “Create”, again in the top right.

‍

This brings up a new custom events instance. We’re going to give our event a name, and then add some conditions for the event.

For the name, we can call it whatever we want that describes the event, so let’s call this one “newsletter_signup”.

To keep things consistent, use lower case lettering and underscores of all event details.

Under the matching conditions, we want the following conditions:

event_name equals page_view

page_location contains /thank-you

Our first condition let’s the system know we are looking for a page view, and our second condition tells the system to only look for page views when a users page location is the Thank You page that we set up.

Make sure you’ve switched the operator from equals to contains to get the page location working. This is because it’s looking at the URL for whether it contains the /thank-you value.

Here’s a view of the full event configuration.

‍

Since this is set-up, we can now click “Create” and our event will show up in the customised events list.

If we go back to events, we can also see that a new event is now on the list, but no events of this kind have been triggered yet. Google Analytics will only tag these new events for new data, not from any of our old data.

We will have to wait a couple of days for data to start showing up, but for now we can mark out new event as a conversion using the blue toggle. With this toggle turned on, the event will now show up under the conversions tab.

Summary

There is a lot of data that we can explore in GA4, but getting conversions set-up is an essential step to be done so that we can clearly record when a user has converted on our Webflow website.

With conversions now set-up, this information will now surface to the home of our analytics, making it easier to keep track of.

Now that you’ve set-up the conversion, you can also work towards optimising the site to convert more customers, and you’ll finally have an accurate number to compare against.