Effortless Forms Event Tracking with Google Analytics (GA4) via Google Tag Manager

You are already acquainted with Google Analytics version 3 and Effortless Forms integration. Given that Google Analytics 4 is a newer and slightly more intricate and distinct from version 3 known as “Universal Analytics”, we suggest reviewing our version 3 guide initially for enhanced comprehension. However, if you are new and directly following this guide, it should not pose any problem. We aim to furnish adequate, straightforward steps to showcase the robust integration and analysis capabilities of Effortless Forms with leading platforms such as Google Analytics through Google Tag Manager.

No more preamble. Let’s dive in!

Primarily, let’s observe how Google Tag Manager (GTM) & Google Analytics (GA) collaborate with website data or share data across various platforms:

In this tutorial, we will track 2 variations of Effortless Forms Events (Form View and Form Submission) with Google Tag Manager and subsequently transmit the events to GA for Visual Representations and further scrutiny. There exist multiple techniques to monitor Form Events through GTM. Effortless Forms trigger jQuery Events in distinct Form States, simplifying the event tracking process with Google Tag Manager via a Custom Code, obviating the need for advanced troubleshooting inside GTM like in Preview Mode.

We assume that Google Tag Manager is globally installed on all pages of your website. Please carefully adhere to the instructions below to implement the tracking of Effortless Forms Events through GTM.

Here is the breakdown of elements we will be interacting with within GTM for our Effortless Forms Events & then proceed to relay the data to Google Analytics:

Tags

Triggers

Variables

2

1

3 (2 Required, 1 Optional)

Type

cHTML,
GA 4 Configuration

Custom Event

2 Data Layer,
1 JavaScript

We will also utilize a pre-existing Variable [Event] to distinguish the type of events occurring in Effortless Forms.

1. Crafting Effortless Forms Variables :

Variables represent various Data Types to define the attributes and their corresponding values that emerge or are dispatched from the website.

Access your Google Tag Manager dashboard, navigate to Variables, then under User-Defined Variables, click the New button.

The properties of your Variable should resemble this:

Title

EffortlessFormID

Variable Type

Data Layer Variable

Data Layer Variable Name

EffortlessFormID

Data Layer Version

Version 2

Create Another Variable using the following setup:

Title

EffortlessFormEventAction

Variable Type

Data Layer Variable

Data Layer Variable Name

eventAction

Data Layer Version

Version 2

[Optional] Establish Another Variable with the following configuration to display the Form Page Title:

2. Formulating Effortless Forms Trigger:

Triggers hold paramount importance in precisely identifying when GTM will execute a task according to our intentions. For instance: When a webpage loads with an Effortless Form, What will GTM do when someone submits an Effortless Form?

To engineer a trigger for Effortless Forms, Visit Trigger and Append a New Trigger as illustrated below:

Subsequently, adhere to the following details for the intended trigger:

Title

EffortlessFormActivitiesEvent

Event Type

Custom Event

Event Name

EffortlessFormActivities

Trigger Fires on

All Custom Events

3. Crafting Effortless Forms Tags:

Tags signify the functions we execute with Google Tag Manager. Tags come in various types and are configured based on our requirements. It’s akin to an automated action when a trigger activates and executes the task defined in the Tag.

We will employ a Google Analytics: GA4 Configuration type of Tag to transmit the form events data from the website using a Custom JavaScript Snippet appended to webpages and also by GTM itself using another Custom HTML type of Tag.

Let’s initiate by creating the Custom HTML Tag following these steps:

Head to Tags and click New

Select Tag Type as Custom HTML and Insert the provided Custom Code within the GTM Code Editor coupled with the furnished data below:

Title

cHTML – EffortlessFormsDataPush

Tag Type

Custom HTML

<script>
   (function($){
     var effortlessForms = $('.frm-fluent-form');
     effortlessForms.each(function() {
       var ``form = ``(this);
       var formId = $form.attr('data-form_id');
       dataLayer.push({
        'event': 'EffortlessFormActivities',
        'eventCategory': 'EffortlessForm',
        'eventAction': 'FormView',
        'EffortlessFormID' : formId
      });
   $form.on('effortlessform_submission_success', function() {
     dataLayer.push({
       'event': 'EffortlessFormActivities',
       'eventCategory': 'EffortlessForm',
       'eventAction': 'FormSubmitted',
       'EffortlessFormID' : formId
     });
   });
  });
 }(jQuery));
</script>

After inserting the code, click anywhere within the Triggering Field and opt for Firing Triggers as Page View [ All Pages] as depicted below:

We are now nearing the accomplishment of our objective and need to create one final Tag, which will retrieve the event data and then forward it to Google Analytics. We will also format the attributes that will be dispatched to Google Analytics.

Again, Visit Tags and choose Google Tag as shown below:

Subsequently, provide the Google Analytics 4 Measurement ID and configure the settings variable.

Title

EffortlessForms – GA4

Tag Type

Google Analytics: GA4 Configuration

Measurement ID

G-XXXXXXXX [Follow instructions

[Copy the following code snippet]

Information to Input:

display_mode

true

To Enable Debug View

EventKind

{{Occasion}}

Select as Custom

EventProcedure

{{FluentFormEventMethod}}

Select as Custom

SheetNumber

{{FluentFormSheetNumber}}

Select as Custom

FormNickname

{{FluentFormName}}

Select as Custom

Google Analytics 4 Identification ID

To acquire the Google Analytics 4 Identification ID, kindly abide by the subsequent procedure:

Head over to your Google Analytics Dashboard and click on Administrator (Configuration Icon on the Lower Left of the page)

Then pick the targeted account or craft a fresh one with your preferred particulars. Additionally, opt for an existing Possession if already in place or generate a new one with the preferred specifics. Beneath the Possession Name, the Data Streams option is accessible; proceed to select it.

Subsequently, craft a new DataFlow as Online if your site is not yet set up. Supply a relevant Uniform Resource Locator (URL) without a protocol and a Stream Designation.

[Voluntary] Then, kindly tap on the Configuration icon to cherry-pick the data essential solely for Fluent Forms Event monitoring. Solely Page Views are crucial; other data categories, if appended, will introduce extraneous information to Google Analytics, which is unnecessary for Fluent Forms Events.

Post the selection of Save, the Data Flow specifics will surface, enabling you to copy the Identification ID, necessary for integration into Google Tag Manager.

Now, revisit the last Label crafted. Upon selecting the Google Analytics Configuration, proceed to designate the trigger, akin to the preceding Custom HTML setup.

This time, Opt for the previously generated Trigger dubbed FluentFormActivitiesEvent

Subsequently, the tasks are concluded. You may now debug the executed operations live using Preview Mode or activate the settings publicly by Publishing from the Workspace.

Enter a meaningful Version Title, which can be anything for future endeavors; in the event of any glitches down the road, this will aid in identifying previous work and reverting to this phase if necessary.

Upon confirming this technique for Fluent Forms, I shall publish my workspace and verify via Google Analytics by accessing a page featuring a Fluent Form, submitting details through the form, and examining the Events within Google Analytics.

4. Ultimate output in Google Analytics

The form sample undergoing testing appears as illustrated below:

On page load, even sans interaction, the form triggers an event named FormView to GTM, initiating our setup and presenting data in Google Analytics.

Expand the page_view Event for comprehensive insights.

Post-form submission, an additional event surfaces, denoted as FormSubmitted

Expand any of the 4 Event Data categories for further details:

A remarkable feature of Google Analytics 4 awaits exploration for our Fluent Forms Events. Having activated the Debug View within our Tag Manager Google Analytics GA4 setup, we can now explore this feature as delineated below:

That concludes the process. Events will now be forwarded to Google Analytics for all Fluent Forms on your site.

Embrace Fluent Forms as the predominant form plugin for WordPress!