.svg)
How to Add Conversion Tracking to Webflow Forms
Setting up conversion tracking for a Webflow site is a simple first step to making the website a more effective marketing tool. By tracking conversion events, Google Analytics 4 data becomes immensely more useful, as it can help you identify the which traffic sources, pages, and user behaviors lead to the highest conversion rates.
Google Analytics 4 does have an automatically collected event called form_submit, but since its release many users have reported inconsistencies with the number of form_submit events in GA4 and the actual number of form submissions they’ve received. A common workaround for form submission tracking is creating an event triggered by the Pageview on the thank you page, which works well if you’re okay with sending the user to a new page.
In the case of setting up our conversion tracking for FlowCamp’s newsletter sign up forms, it didn’t make sense for us to redirect the user to a thank you page, as it could pull them away from a tutorial they still needed. With that in mind, we implemented conversion tracking using the Element Visibility trigger type in Google Tag Manager. This approach works by triggering an event when the success state of a Webflow form is visible on the page.
In this article, we’ll walk you through the steps to create this trigger and tag in Google Tag Manager, then test to confirm the event is working as expected, and finally set it as a Key Event in Google Analytics 4.
Install Google Tag Manager
Step 1: Create an Account
Visit the Google Tag Manager website and create a new account if you don’t already have one.
Step 2: Install the Google Tag Manager Code on Webflow
After creating an account in Google Tag Manager, the Install Google Tag Manager popup will appear on your dashboard.
First, copy the code in the first field and paste it into the Head Code in your Webflow project settings. You can find this field by going to Site Settings → Custom Code → Head Code. Be sure to click Save after pasting the code.
The next step in Google Tag Manager asks you to paste a <noscript> tag into the opening <body> tag of every page of the website. Please note that this code is not GDPR compliant, therefore we do not recommend following this step. Google Tag Manager can run as normal without this code, aside from not being able to run in the case that the user has Javascript disabled.
Step 3: Test the Code Installation
Once you’ve published the code on your Webflow site, enter the site URL into the Test your website (optional): field in the popup in GTM then select the Test button to confirm the installation was done properly.
Install Google Analytics 4
Step 1: Copy your GA4 Measurement ID
1. Sign up for Google Analytics: If you don't already have an account, visit the Google Analytics website and sign up.
2. Create an Account: Under Admin, select Create, then select Account and give your Account a name.
3. Set Up a Property: Click next to add a property to the account. Under Data Collection, choose the Web platform option.
4. Copy Your Measurement ID: Copy the string of letters and numbers under Measurement ID. It should start with ‘G-’.
Step 2, Option 1: Webflow Settings Integration
The simplest way to install Google Tag Manager is to paste your Measurement ID into the Google Analytics field in the Site Settings. To find this field, navigate to Site Settings → Apps & Integrations, then paste your Measurement ID into the Google Analytics field.
Step 2, Option 2: Add Google Tag to Google Tag Manager
If you prefer to manage all of your scripts inside of Google Tag Manager, then you can actually install Google Analytics using GTM instead.
1. In the Google Tag Manager dashboard, navigate to the Tags tab then select the New button.
2. Select Tag Configuration → Google Analytics → Google Tag.
3. Paste your Measurement ID into the Tag ID field.
4. Then select Triggering and choose the All Pages / Page View option.
5. Give the Tag a name like GA4, then click Save.
6. To confirm that the new tag is firing properly, select the Preview button and connect to your site. You should see the new GA4 tag listed under Tags Fired when the page loads.
Create the Element Visibility Trigger in Google Tag Manager
Now that Google Tag Manager and Google Analytics are installed, we can work on setting up the custom event to track our Webflow form submissions.
1. Navigate to the Triggers tab in Google Tag Manager, then click the New button
2. Select Trigger Configuration, then choose Element Visibility in the trigger type menu.
3. Update the Selection Method dropdown to CSS Selector.
4. In the Element Selector field, add .w-form-done. This class is on the success state for all Webflow forms, so you don’t need to worry about changing classes on your Webflow form success states.
5. Update the Minimum Percent Visible field to 1.
6. Check the box next to Observe DOM changes
7. Give the Trigger a name (i.e. Visibility - form success message), then click Save.
8. To test the trigger configuration, select the Preview button and connect Tag Assistant to your site. If you submit a form in the preview mode, you should now see this Element Visibility trigger in the Summary column.
Create the Tag in Google Tag Manager
Next we’ll create the actual tag that will be fired by this trigger.
1. Navigate to the Tags tab in Google Tag Manager, then click the New button.
2. Select Tag Configuration, then choose Google Analytics → Google Analytics: GA4 Event in the tag type menu.
3. Paste your GA4 Measurement ID into the Measurement ID field.
4. Add a name for the event in the Event Name field. We suggest using lowercase letters and underscores for spaces to match GA4’s event naming convention.
5. Select Triggering then choose the visibility trigger you created in the previous step.
6. Give the tag a name (i.e. Newsletter Form Submission), then click Save.
7. To test the tag is firing as expected, select the Preview button and connect Tag Assistant to your site. If you submit a form in the preview mode, you should now see the tag you created in under Tags Fired.
8. To further test and confirm the event is being recorded in GA4, navigate to Admin → Data display → DebugView. Form submissions on your site should now trigger the event you created in real time (with a little delay).
Mark as Key Event in GA4
To upgrade the new you’ve created from a regular GA4 event to a conversion, you’ll need to mark it as a key event. It may take about 24 hours before the event shows up in your events list, so you may need to wait a day to complete this step.
In Google Analytics, navigate to Admin → Data display → Events.
Locate the event you created, in our case ‘newsletter_signup’, then click the switch under Mark as key event.
We hope this article has helped you with setting up conversion tracking on your Webflow site. You might also want to check out our articles on How to Integrate Webflow Forms with Mailchimp and How to Add Schema Markup in Webflow.
We hope this article has helped you with implementing custom bullet points in Webflow. If you liked this article, then please subscribe to our newsletter or follow us on X.
