How To Track Fluent Forms With Google Tag Manager

Setting Up Data Layer Events For Fluent Forms Interactions

Firstly we will set up a custom HTML tag to fire data layer events and information tracking when the form is viewed and fired.

Tag type: Custom HTML

Trigger: All pages (that the form is on)

HTML code:

<script>
   (function($){
     var fluentForms = $('form.frm-fluent-form');
     fluentForms.each(function() {
       var $form = $(this);
       var formId = $form.attr('data-form_id');
       dataLayer.push({
        'event': 'fluentForms',
        'eventAction': 'formView',
        'fluentFormID' : formId
      });
   $form.on('fluentform_submission_success', function() {
     dataLayer.push({
       'event': 'fluentForms',
       'eventAction': 'formSubmitted',
       'fluentFormID' : formId
     });
   });
  });
 }(jQuery));
</script>

Explanation:

This javascript will fire data layer events when the form is viewed and when the form is successfully submitted. The event it is tracked under is the same “fluentForms” event, however, the view and submission can be distinguished with the variable “eventAction”.

Creating Variables For Fluent Forms Tag Manager Tracking

To access the variables pushed to the data layer, we will need to create data layer variables in Google Tag Manager.

We need to do this for two variables:

• eventAction
• fluentFormID

Please note: If you already have the same data layer variable for “eventAction” from other tracking that is set up, you won’t need to create another one.

User-defined variable name: DLV – eventAction

Variable type: Data Layer Variable

Data layer variable name: eventAction

Data layer version: Version 2

Example variable screenshot:

User-defined variable name: DLV – fluentFormID

Variable type: Data Layer Variable

Data layer variable name: fluentFormID

Data layer version: Version 2

Example variable screenshot:

When creating these variables, the data layer variable name must exactly match the name pushed to the data layer.

Tracking Fluent Forms Events to Google Analytics 4

We can then use this event and variables to create a trigger and track information to third parties such as Google Analytics 4.

This assumes you already have the Google Analytics 4 configuration tag set up.

Tag type: Google Analytics: GA4 Event

Event name: fluent_forms

Event parameters:

event_action = {{DLV – eventAction}}

form_id = {{DLV – fluentFormID}}

Trigger: Fluent Forms Event (custom event)

Example tag screenshot:

You can use the above event names and parameters or they can be customised to your liking.

Trigger configuration

Trigger type: Custom event

Event name: fluentForms

Trigger fires on: All custom events

Testing It Works With Google Tag Manager Preview

Whenever setting up tracking, it’s good practice is use the Google Tag Manager preview to ensure it is working as expected. This can be done by submitting a test form submission in preview mode.

Event count 12 fires a tag for the Fluent Forms contact form view.

We can click on the “GA4 – Event – Fluent Forms” tag that fired to see the information that was passed.

We can also switch between displaying the variables as names or values in the top right. Below the variables are displayed as values.

Event count 18 displays the Fluent Forms submission event.

Then we can also view the details of the Google Analytics 4 event tag that was fired below:

Create a Conversion in GA4 for Form Submissions

You can further build upon the visibility of these events in GA4 by creating an event based on existing events. Additionally, if you needed to pass a form submission event back to Google Ads from GA4 it would need to be marked as a conversion.

To do this, we would first need to create an event in GA4 for form submissions. We can do this in GA4 by creating an event with a narrowed scope filtering on the event_action value.

First, navigate to Admin > Events > Create Event > Create

Next configure the event to filter to only forms submitted.

Name the event something logical, here we name it “fluent_forms_submitted”

Filter:

event_name = fluent_forms

event_action = formSubmitted

Create the event and then proceed to create a conversion with the same name.

Navigate to conversions in GA4: Admin > Conversions > New conversion event

Add the event name used in the event created and hit save.

You can check this has worked by doing a test submission using the GA4 debug view or check for the custom conversion in the GA4 real time reporting.

Conclusion

Once you have verified everything works as expected, you can safely publish the changes to a live environment.

To build upon this, the same events and variables can also be used in other tags such as Google Ads, Microsoft Ads, Meta, LinkedIn, etc. to track events back to media platforms.

Please let me know if you have any questions in the comments or if there are any other topics you would like covered.