How To Track Groove Funnel Forms In Google Tag Manager


In order to track complete from events using Google Tag Manager in Google Analytics make sure that you already have Tag Manager and Analytics already installed on the site.

Follow this guide here first: How to Install GTM and GA on Groove Pages

Understanding Forms In Groove Funnels

The Form Element

Forms inside of Groove Funnels are contained inside of the form-container element. To add a form element container to the page, simply drag and drop the "empty form" element from the elements onto the page.

add a form element to your page

This empty form element is the shell or container that all of our form fields will go inside of. Just the container is the same adding <form></form> tags in HTML. 

This form isn't capturing any information right now so we need to add form field elements into our form container. 

Let's add a name and email field into the form element.

Make sure that all of your elements are inside of the form container. Click on an element and notice the breadcrumbs down at the bottom. If your element is not a child of the form-container element then the form then it won't be submitted with the form.

verify form elements are in form container

Form Field Attributes

Each element should also have a name attribute assigned to it that corresponds to the purpose of the field. If it's a name field then you should give it an name and ID attribute similar to "name".

To assign a name and ID attribute to the input form field, click on the input field > and in the right window go to the configure subtab.

assign attributes to forms fields

In the above example, I assigned the first input field in the form to have a name of name, and an ID of name. Additionally, I added a validation rule stating that the field can't be empty before submitting and the field must contain text.

Ensure that all of your inputs and form fields have name and ID attributes and optionally add validation.

Form Container Attributes

We also want to add an ID attribute to the form container itself in addition to the form elements. This will make it easy for us to Identify this exact form (by its ID) in Google Tag Manager.

To add an ID to the form container, select that element down in the breadcrumbs. This time however, we assign an ID attribute in the design tab (instead of under the configure tab like the form elements).

At the bottom of the design options list, there's a dropdown titled "Custom Attributes". Expand this option and under the ID field, give your form element a value. In this example, I'll simply give the form an ID of "my-form"

add an ID to the form container

Be sure to setup your form integrations as well if you haven't done that yet or this is your first form you're setting up. Also make sure to publish any changes when you're ready for them to be live.

Creating a form submit trigger in GTM

Enable Form Variables

In order for Google Tag Manager (GTM) to be able to detect and use information from forms, you need to enable the built in form variables. 

Under the variables tab, find the button that says "configure" next to the built in variables and click it. Enable all of the built in form variables.

This allows tag manager to have information regarding the form (like the ID) available for use.

enable form field variables

Create a Form Submit Listener Trigger

Now that we can get information regarding forms in the hands of tag manager, we need to tell GTM to listen for form submissions.

Under the triggers tab, create a new trigger that identifies all form submissions. Later we'll refine this trigger to only trigger on a specific form (instead of all forms) but we want to make sure that things are at least working so far.

For Trigger Type, choose Form Submission and leave the rest of the settings as they are. 

Later, we'll add the "check validation" and change the trigger to "some forms" but for now, this will work for detecting all form submissions on the page.

all forms listener triggera

Test The "All Forms Listener" Trigger

Enable preview mode in GTM and refresh your actual site where the form is. Submit the form and look for a new event in the left panel called "form submit".

If you see the "form submit" event then click on it and go to the "variables" tab in the GTM preview. 

Under "form ID" you should also see the form ID we assigned to the form container. 

If you don't see the custom form ID there, then make sure that Groove Pages actually saved that change and republish the site.

verify form ID in GTM

Create New Trigger specific to our form

Now we know that GTM can detect when the form is submitted using the built in trigger, and we also know that it can read the ID of the form that was submitted. 

We can now modify the existing all forms listener so that it will only trigger on this one specific form instead of on all forms. 

To do this, we're going to modify the existing trigger settings to only fire on 'some forms' instead of 'all forms'.

new form submit trigger

Now the conditions for this trigger will only be met when the Form ID is equal to the custom form ID that we defined. 

Check for Form Validation

Without form validation, the conditions for the trigger may still be met even if there were form errors or not all fields were filled in correctly. Let's say that the name and email fields were both required but the user accidentally only filled in their name - leaving email field blank.

The visitor then presses the submit button thinking that they can submit the form. Although Groove Funnels will know that the form can't be submitted, GTM does not and it will create fire our new trigger.

We can stop this from happening by checking the "check validation" checkbox on our trigger.

check form validation

Another setting will appear that asks you where you want to check validation for. In this setting you can define the pages or other conditions that you want to use. They give you a warning just to make sure you test everything properly but for our simple use case we should be able to proceed without any concern. 

Select Page URL - Matches RegEx - and then enter (.*). 

This will tell GTM to check for this form validation on every page.

Alternatively you could specify only the exact URL that this form is on.

Test The Trigger and Form Validation Rules

When you refresh GTM preview mode and refresh your page where the form is, try submitting the form again but leave out a required field. 

Because the form validation now recognizes if a form field is required but not filled in, you should NOT see the "Form Submit" event in the preview window. 

If you DO see the Form Submit event in the preview window, double check your settings in both Groove Funnels and GTM. Make sure that you have the attributes set on the form fields (name and ID) and that you have "validation rules" and "input cannot be empty" boxes checked.

When done correctly, the GTM event will only fire when the form is successfully submitted.

Creating Tags in GTM based on our new trigger

So far we have our form created with proper attributes and validation rules, we have our trigger created which only fires on a specific form-id and also checks for validation. Now we want to let different analytics platforms know when a form is actually submitted.

Creating a Google Analytics Event Tag for Groove Funnels

In GTM we're going to create a new tag that will send an event to our Google Analytics container. 

The tag will look like this:

GA event for form submission

The top section under "tag configuration" is the information that we'd be sending to Google Analytics. It's an event with a category of "form" and action of "submit" and the label is dynamically referencing the ID of the form. 

If you remember, in this example, I gave the form an ID of 'my-form' so that would be dynamically replaced here when the form is submitted.

The trigger for this form is the new trigger that we just created. This trigger only fires when the form ID matches 'my-form' and it checks for validation so that we only receive the event when the form is really submitted with no errors.

Creating a Funnelytics Action (event) tag for Groove Funnels

Funnelytics doesn't have a tag template like Google Analytics does, so we would create a new tag using the "custom HTML" option. 

The custom HTML would look something like this:

<script type="text/javascript">
window.funnelytics.events.trigger("form-submit", {
"form_id": "{{Form ID}}",
});
</script>
funnelytics action for form submission

Of course you need to make sure that you have your base Funnelytics script installed on the page for this to work. This event will also dynamically reference the form ID in the "form-submit" event being sent to Funnelytics. 

The trigger is the exact same trigger we've been creating and using the whole article. That way, all the platforms we're sending this form information to will have the same source of truth. That means that all platforms will have the same information available to them. 

We could set up the same type of event for Facebook analytics too if wanted, let me know in the comment below if that's something that you would like to see.


{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

More Posts


>