Created
August 6, 2020 11:27
-
-
Save techjewel/a322f11df93b17765c4e979b69a69be9 to your computer and use it in GitHub Desktop.
Track Google Analytics event for all fluent forms in your site
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function($){ | |
if(typeof gtag != 'function') { | |
return; | |
} | |
var fluentForms = $('form.frm-fluent-form'); | |
fluentForms.each(function() { | |
var $form = $(this); | |
var formId = $form.attr('data-form_id'); | |
gtag('event', 'ViewForm', { | |
'event_category': 'FluentForms', | |
'event_label': 'View Form', | |
'form_id': formId | |
}); | |
$form.on('fluentform_submission_success', function() { | |
gtag('event', 'FormSubmission', { | |
'event_category': 'FluentForms', | |
'event_label': 'Form Submitted', | |
'form_id': formId | |
}); | |
}); | |
}); | |
}(jQuery)); |
Hi @undfine,
I must add the following in Fluent Forms - contact form.
I add it as it is, in Fluent Forms custom JS, and the code it takes action, when the user access the page... but I need, the code, to send info, once users have successfully filled out the contact form.
dataLayer.push({
'event': 'Contact_Form'
});
Can you help me please?
Thank you
Regards
Hi @techjewel,
Thank you for this script. Because of the new GA4 events, I modified this to use standard/recommended dimensions. Although it's great to set up a loop for multiple forms, here is a simplified example for a single form, using Fluent Forms' "Custom CSS/JS" which already stores the form as a jQuery object = $form
if(typeof gtag != 'function') { return; } var form_id = $form.prop('id'); $form.on('fluentform_submission_success', function() { // GA4 event with recommended standard dimensions gtag('event', 'generate_lead', { 'form_name': 'General Contact Form', // change this to a recognizable name for your form 'form_id': form_id, }); });
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi @techjewel,
Thank you for this script. Because of the new GA4 events, I modified this to use standard/recommended dimensions. Although it's great to set up a loop for multiple forms, here is a simplified example for a single form, using Fluent Forms' "Custom CSS/JS" which already stores the form as a jQuery object = $form