Google Analytics Event Tracking with Tag Manager
In this tutorial, We will see how we can track fluent forms events (Form View and Form Submission) with Google Tag Manager. Fluent Forms fire jQuery Events in different form states so it will be very easy to track events with Google Tag Manager.
In this tutorial, We will create
- 2 User-Defined Variables
- 2 Tags to trigger custom events and connect with Google Analytics
- 1 Custom Trigger to Fire Fluent Forms Activities
Creating Fluent Forms Variable
Go to your Google Tag Manager and then navigate to under User-Defined Variables click New button
Your Variable properties should be like this:
- Title: FluentFormEventAction
- Variable Type: Data Layer Variable
- Data Layer Variable Name: eventAction
- Data Layer Version: version 2
Create Another Variable using following configuration
- Title: FluentFormID
- Variable Type: Data Layer Variable
- Data Layer Variable Name: FluentFormID
- Data Layer Version: version 2
Creating Tag to Fire Fluent Forms Custom DataLayer Events
Go to Tags and create a new tag. Select Custom HTML as Type and add the following code in that HTML Box
<script>
(function($){
var fluentForms = $('form.frm-fluent-form');
fluentForms.each(function() {
var $form = $(this);
var formId = $form.attr('data-form_id');
dataLayer.push({
'event': 'FluentFormActivities',
'eventCategory': 'FluentForm',
'eventAction': 'FormView',
'FluentFormID' : formId
});
$form.on('fluentform_submission_success', function() {
dataLayer.push({
'event': 'FluentFormActivities',
'eventCategory': 'FluentForm',
'eventAction': 'FormSubmitted',
'FluentFormID' : formId
});
});
});
}(jQuery));
</script>
This code will fire data-layer events.
Creating Custom Trigger
Now, We have custom data-layer events from previous step and for form view and as well as form submission we will get custom events.
Go to Trigger and Add new link this one as shown
Sending event to Google Analytics
Now Go to Tags, Click New, and then create a new Tag. Your configuration will be like this:
- Title: Fluent Forms All Activities to Analytics
- Tag Type: Google Analytics: Universal Analytics
- Track Type: Event
- Event Tracking Parameters
- Category: Fluent Form
- Action: {{FluentFormEventAction}}
- Label: {{FluentFormEventAction}} – {{FluentFormID}}
- Google Analytics Settings: Your Google Analytics ID or select the variable
From the Triggering select FluentForms Activities that we created in the previous step.
That’s it. Now you will get events to google analytics for all the Fluent Forms on your site.
Creating a goal for a specific Form ID
As you have all the form view and submission event data you can create any type of goals. Here is the example for form ID -> 1 to track events
Notes:
For Form View the Action will be: FormView
Label will be different for each form.
The basic structure is: FormSubmitted – {FormID}
So for form-1 I have used FormSumitted – 1