Differentiating between Forminator forms in GA4 using Google Tag Manager (GTM)

PUBLISHED 21 Aug 2023 - UPDATED 22 Aug 2023

Do you have more than Forminator form on your WordPress site? Here's how to differentiate between them in GA4 using Google Tag Manager.

A while back, I wrote an article on tracking Forminator form submissions with Google Tag Manager (GTM). Since then, a couple of commenters on that article have asked about differentiating between multiple forms. This applies if you have two or more different Forminator forms on your site and you want to track which one received each submission (in Google Analytics 4, presumably).

This is certainly possible - but as the explanation was longer than my original article, I thought it warranted a brand new article of its own: this one.

Finding a value to differentiate between forms

In the previous article, we saw that a successful Forminator form submission results in an event called 'ajaxComplete'. As a reminder, here's what it looks like in Google Tag Manager's preview and debug mode:

ajaxComplete in data layer

Click to see a larger version

Generally speaking, the easiest way to differentiate between forms would be to use some key like Form ID or Form Name which has a unique value for each form. Sadly there are no such keys in this ajaxComplete event, so we'll need a different approach.

While there isn't an Form ID or Name, there is a success message. This is the text that is displayed to the user as an inline message when they successfully submit a form (you may remember that we aren't directing our users to a separate success page). Here's what the success message looks like on this site, where it reads "Thank you for contacting me! I'll get back to you ASAP":

Forminator inline submission message

And if you didn't spot it earlier, here's that text in the example response:

ajaxComplete message in GTM with response message value highlighted

Click to see a larger version

Customising your form success messages

By giving each form a unique success message, we'll be able to distinguish between them in Google Tag Manager (and then in GA4). First, here's how to customise each form's success message:

  1. Log in to your WordPress Dashboard
  2. Go to Forminator > Forms
  3. Alongside your published form, click the EDIT button
  4. In the menu on the left, click on Behavior
  5. You should see a field that says 'Inline Message'. Click on the text
  6. Edit the text (in the 'Visual' or 'Text' tab)

Editing the Forminator inline message

  1. Click APPLY
  2. Click the blue UPDATE button near the top

Capturing response as data layer variable

The next step is to make sure we are capturing the success message for each form submission as a data layer variable in Google Tag Manager:

  1. In Google Tag Manager, go to Variables > New
  2. Give your new variable a name (I chose 'DL attributes.response.data.message', where DL stands for Data Layer)
  3. Choose the variable type 'Data Layer Variable'
  4. Set the Data Layer Variable Name field to: attributes.response.data.message - you must be exact with this one!
  5. Save your variable

Data layer variable creation in Google Tag Manager

Adding response as a GA4 event parameter in GTM

Now you can include this text as an event parameter on your GA4 form submission event. (You may be using the event name form_submit, the same as GA4 enhanced measurement, or you may be using a custom event name - it doesn't matter. My event is called 'form_submission' for reasons that currently escape me.)

There isn't a default parameter name for the form response, so just call it something sensible like form_response_message - then select your new data layer variable as the parameter value. (Click on the 'brick' icon then select it form your list of variables.) You should end up with something like this:

GA4 event with parameter for Forminator response message

Then save your changes to the event tag, and publish your Google Tag Manager container.

Adding parameter as a Custom Dimension in GA4

Next, we'll head over to GA4 to add our new parameter as a Custom Dimension. This will allow us to use it in Explorations (custom reports) and so on.

  1. Log in to Google Analytics
  2. Click on Admin (the cog icon in the bottom left)
  3. Select the correct Account and Property using the dropdowns
  4. Click on Custom definitions
  5. Click on Create custom dimension
  6. Fill in your dimension's details, like so:

New custom dimension in GA4

The most important field here is 'Event parameter', which must exactly match the parameter name you used in Google Tag Manager. Note that although this field is a dropdown, you can just paste in your value (as it may not appear as one of the options in the dropdown).

You will also want to give your dimension a sensible dimension name, as we will need to find it later on when we build an Exploration.

Notice as well that we've left the dimension as 'Event' scoped.

Testing your new parameter

There are two different ways to test your new parameter in GA4: either by using the Real-time report, or by using DebugView.

The real-time report is slightly easier, as you don't have to make sure your device is sending debug events. Here's how:

  1. Make a form submission
  2. Go to GA4 and select the correct property
  3. In GA4's left-hand menu, go to Reports > Real-time
  4. Wait for your form submission event to appear in the 'Event count by Event name' card
  5. Click on the event - you should see all its parameters, including your new one (e.g. form_response_message)

Event parameters for form_submission event in GA4 real-time report

  1. Click on this parameter to see the value captured (if it's truncated, hover over it to see the full value in a popup)

One event parameter value in GA4's real-time report

If you would rather use DebugView, the simplest way is to send your form submission using Google Tag Manager's preview and debug mode. This will, by default, add a parameter to ensure your event appears in DebugView.

  1. In GTM, click Preview
  2. Enter your website's URL and click Connect (leave 'Include debug signal in the URL' ticked)

Tag Manager Preview Mode with 'Include debug signal in the URL' ticked

  1. Make a form submission in the debug tab that opens
  2. In GA4, go to Admin > DebugView
  3. Wait for your form submission event to appear in the activity stream

GA4 debug stream showing form_submission event

  1. Click on the event - you should see your new parameter listed (e.g. form_response_message)
  2. Click on this parameter to see the value that has been captured

A form_submission event in GA4's debug stream showing the parameters

Now you are confident that your parameter is being captured correctly, you can include it in an Exploration.

Building an Exploration containing success message

  1. Select your Google Analytics property
  2. In the left-hand menu, click Explore
  3. Click Blank to create a new Exploration
  4. Give your Exploration a name so you can find it easily later
  5. In the Variables section, click '+' to import the metric 'Event count' and the dimensions 'Event name' and 'Form Response Message' (or whatever you called your dimension)

Variables section in GA4 Exploration builder

  1. Double-click each of these dimensions and metrics to add them to your report. The dimensions will be added as rows, and the metric will be added as a value
  2. Your report will now be showing data, but it will include all events - and we are only interested in the form_submission event. Click Filters and select Event name

Adding a filter to a GA4 Exploration

  1. Set the filter so that 'Event name exactly matches form_submission' (or whatever the name of your form submission event is)

Filter in GA4 Exploration with an exact match on Event name

And now your Exploration will show you the number of form submissions you have received per form (based on response message). Something like this:

GA4 freeform exploration

Not seeing any data? You may just need to be patient. Remember that GA4 has quite high data processing times - as Google's Analytics Help says:

"Google Analytics allows for a data processing delay of 24-48 hours. During that time, data may change, so reports may not be consistent when viewing the last 24-48 hours in an account."

So this is a simple example, but you can see that we are now differentiating between our different forms in GA4.

There are lots of things we could do to enhance this - for example, using a lookup table in GTM to look up a form name based on the response message, and then passing that form name to GA4 instead of the entire message. But I hope this helps you get started.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
James Clark
Hi! I'm James Clark and I'm a freelance web analyst from the UK. I'm here to help with your analytics, ad operations, and SEO issues.
0
What do you think? Leave a commentx
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram