This document provides instructions on tracking form submissions from a Webdadi website using Google Tag Manager and Google Analytics 4.
Two tracking options are available: a straightforward method using the form_submit event and a more advanced method using custom submission success message selectors.
Setting up Google Tag Manager and Google Analytics 4 accounts is necessary before proceeding with either tracking method.
The form_submit event method involves creating a tag and trigger in Google Tag Manager to track form submissions with the Form_Context parameter.
The custom submission success method requires creating specific event names and CSS selectors for different form types to track successful submissions.
It may take up to 24 hours for custom events to appear in GA4, but real-time reports can be used for immediate testing.
Before proceeding please ensure:
You have setup a Google Tag Manager (GTM) account and have linked it to the Configuration section of your VIA software How to link your Google Tag Manager account to your Website
You have setup a Google Analytics 4 account (GA4) and have linked it to the configuration section of your VIA software How to add a Google Analytics tracking code to your website
Option 1 - How to use the form_submit event in Google Tag Manager (GTM)
On a successful form submission on your website, your site will trigger a form_submit event with the custom event parameter of Form_Context (case sensitive). This parameter gives some extra detail as to the type of form that was submitted to help differentiate between forms if you have multiple forms on a page for example.
The instructions below assume that you have set up a GA4 Google Analytics account and have added the data-stream measurement id to the Configuration section of VIA. This code will be in the form of G-********** or similar.
How to set up tracking for the form_submit event
Create a new tag in google tag manager https://support.google.com/tagmanager/answer/12002338?hl=en
Click into tag configuration and choose Google Analytics: GA4 Event.
For Configuration Tag, select None - Manually Set ID.
For Measurement ID. enter your google analytics Data Stream Measurement ID eg: G-********** or similar.
To subscribe to the Form_Context (case sensistive) variable click into event parameters then click on the lego plus icon
Next Click the plus icon at the top right of your screen to create a new variable.
Click into Variable Configuration and select Data Layer Variable
In data Layer Variable Name type Form_Context -- This is case sensitive
Save and give your variable a memorable name eg Form_Context
Now Add Form_Context (the variable you just created) to your parameter name and parameter values by selecting it from the list provided when you click the lego block icon
Next click into triggering and click the plus icon in the top right of the panel to create a new trigger.
Click into trigger configuration and select Form Submission from the User Engagement section.
Save and give your trigger a memorable name like Form Submission Trigger
You are now all set up to track form submissions with GTM and GA4
If you would like to have more control over the tracking you can read on and instead subscribe to the custom tracking method based on submission success selectors.
Option 2 - How to set up tracking for custom submission success message selectors
Create a new tag in google tag manager https://support.google.com/tagmanager/answer/12002338?hl=en
Click into tag configuration and choose Google Analytics: GA4 Event.
For Configuration Tag, select None - Manually Set ID.
For Measurement ID. enter your google analytics Data Stream Measurement ID eg: G-********** or similar.
For the event name create an event for a specific form. eg call-me-back-request_success
Now click into triggering and click the plus icon to add a new custom trigger.
Click into trigger configuration and select Element Visibility.
For selection Method choose CSS Selector and then add the css selector from the list provided at the bottom of this article. In our case example here it will be .call-me-back-request_success
For when to fire this trigger select every time an element appears on screen.
Then select Observe DOM changes - NB please read the details on performance implications and make your decision on whether this method of tracking is right for you based on the information provided by google tag manager.
Save your trigger with a memorable name. For Example Call Me Back Form Success Trigger.
Your custom event is now setup to track form submits for call me back forms successfully being submitted. You may want to consider adding rules to the trigger you have just created by selecting Some Visibility Events rather than All Visibilty events (The default) in the trigger configuration and then customising the conditions to minimise the amount of work GTM will be doing on pages where form tracking is not necessary for you for these custom events.
It should be noted that it can take up to 24 hours for your custom event to begin to show up in GA4 events table. However you can test that your implementation has succeeded by taking a look at the real time report and submitting some test forms.Now Repeat for all form types you would like to track. The list of selectors for your visibility triggers are as follows:
.arrange-viewing_success
.instant-valuation_success
.valuation-request_success
.fast-lead_success
.mortgage-request_success
.call-me-back-request_success
.feedback_success
.testimonial_success
.property-alerts_success
.viewing-request_success
.property-offer_success
.newsletter-signup_success
Keywords: How to setup Google Tracking, GTM Tracking, Google Tag Manager Tracking, Form Tracking, Tracking Form Submissions, Website Form Tracking, Website Form Analytics,
Article ID: 899973121
Link: https://webdadi.atlassian.net/wiki/spaces/PKB/pages/899973121