Google Analytics Event Tracking with Tag Manager

This document is for Google Tag Manager and Google Analytics version 3

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 the previous step, and for form view as well as form submission we will get custom events.

Go to Trigger and Add a new link as shown below:

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.

Notes:

For Form View, the Action will be: FormView

The label will be different for each form.

The basic structure is: FormSubmitted – {FormID}

So for form-1, I have used FormSumitted – 1