WordPress Fluent form Tracking with GTM & GA4

You’ll require some tracking code if you need to track a Fluent form with Google Tag Manager and Google Analytics. If you’d like to track enhanced conversions, where you also need form data such as email addresses phone numbers, etc

In the following tutorial, I’ll share in detail about Fluent tracking with new and updated tracking codes. The great thing is that the tracking code that I have written will give your form submit event and form data like email, phone number, etc

<script>
/**
* Author: Md Hasanuzzamna
* Linkedin: https://linkedin.com/md-h
* Email: info@leomeasure.com
* Website: https://leomeasure.com
* Youtube: https://youtube.com/@leomeasure
*/
(function($) {
	var $form = $('form.frm-fluent-form');
	$form.on('fluentform_submission_success', function() {
		var formId = this.getAttribute('data-form_id');
	   	var formData = new FormData(this);
		var inputValues = {};

		formData.forEach(function (value, key) {
			var key = key.replace(/]$/g, '').replace(/[\[\]]/g, '_');
		    inputValues[key] = value;
		});

		window.dataLayer = window.dataLayer || [];
		dataLayer.push({
			event: 'fluent_form_submit',
			form_id: formId,
			inputs: inputValues
		});
	});
})(jQuery);
</script>

• GitHub

Create a new Tag

Paste the code

For triggering section select all page

And save it

Then taste it whether it is working or not

Now we will create a tag and through the tag we will send the data to our google analytics

Create a new trigger first

Custom event should be matched with this name

Now create a variable

Need another variable

Now create a final tag

Then selecet a trigger. we already have made a trigger!

And finally save it

Now preview it and test it

Fillup the form now

For further inspection we will test it from the debug view of google analytics

Everything is fine. So,its time to submit