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
new-variable
define-variable

Create Another Variable using following configuration

  • Title: FluentFormID
  • Variable Type: Data Layer Variable
  • Data Layer Variable Name: FluentFormID
  • Data Layer Version: version 2
define-variable-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:

trigger

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.

event-trigger

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

Was this article helpful to you?

3 9

How can we help?

Please submit a support ticket if you have any question or pre-sale questions. Our Customer support engineers will answer your query as soon as possible

Open a support ticket