Conversational Form Event Tracking with Google Analytics (GA4)
We have other guides regarding regular Fluent Forms event tracking with Google Analytics Universal Analytics and Google Analytics GA4 via Google Tag Manager where we used Google Tag Manager only on our website and then fetched forms events data and processed as per our requirement and then pushed data to the Google Analytics. Please check any of these guides before proceeding to configure Google Tag Manager with Fluent Forms to know the in-depth steps regarding creating containers and other necessary steps.
We will focus only on setting up the Google Tag Manager configuration and testing our form events.
|Type||Click Classes||Click -> All Elements||GA4 Configuration,|
Ok and Submit Click Events
Steps at a glance:
- Creating Fluent Forms Variables
- Creating Fluent Forms Trigger
- Creating Fluent Forms Tags
- Test Conversational Form
- The final result in Google Analytics
1. Creating Google Tag Manager Variables
Go to the workspace you are using for your site and then go to Variables. On the right side of the Built-In Variables click on Configure and check the Click Classes Data Layer Variable which we will be using for this guide.
After that Click Classes Data Layer Variable will be listed as an available variable.
2. Creating Google Tag Manager Trigger for Fluent Forms:
Now we need to create our target triggers using the Click Classes variable as below.
To create the trigger for the OK or SKIP button of the conversational form, go to Triggers and click on New. Select All Elements under the Click section.
Then check Some Clicks under This trigger fires on. From the dropdown, select Click Classes with the condition Contains and the value is “o-btn-action” and finally Give a name for the Trigger.
Here we used “ConversationalFormOkButton” and save the trigger.
Now we need to create another trigger in the same way for the Submission Event. This time the value for Click Classes containing some clicks would be “ff-btn o-btn-action ff-btn-md default“.
The name for the trigger used here is “ConversationalFormSubmitButton“.
After creating those 2 triggers you will see them listed in your triggers list.
3. Creating GA4 Event Tags:
Now we need to create 2 separate event tags which will require a GA4 Configuration tag containing Google Analytics GA4 Web Stream ID. To know more about this please check the GA4 Configuration guide here.
To create the Tag for the Next Step of the Conversational Form containing the OK and SKIP button, Go to Tags and then click on New and select Google Analytics: GA4 Event.
Then select the configured GA4 Configuration and set a name for the Event which will be displayed in Google Analytics as an event.
Here we used “ConversationalFormNextStep” which is based on the “ConversationalFormOkButton” Trigger.
Now we will create another event tag in the same way for Form Submission. This time the “ConversationalFormSubmitButton” trigger is selected and the name we used is “ConversationalFormSubmissionEvent“
Now we are done adding the necessary variables, triggers, and tags for this guide. We need to publish the container or workspace but clicking on Submit in the Top Right corner and put the necessary details.
4. Test a Conversational Form
Here is an example of a conversational form for Data Input or skipping a field without data.
And this one is an example of the Submission button of the conversational Form.
5. The Final Result in Google Analytics
This one is an example of a ConversatinalFormNextStep Event.
This one is an example of a ConversatinalFormSubmission Event.
That’s it. Now you will get events data to Google Analytics for all the Fluent Forms Conversational type of forms on your website.