Tracking form submissions on your website with Google Analytics 4 (GA4) and Google Tag Manager (GTM).

Owned by Edward Cross
Last updated: Aug 14, 2023 by Elliott

There are two ways that you can track form submissions from your Webdadi Website. The first option is the most straight forward. Option two will give you access to more data should but requires a greater knowledge and understanding of Google Tag Manager (GTM).

Before proceeding please ensure:

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

  • 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,