Tracking form submissions on Google Analytics 4 through Google Tag Manager

Before you start, please make sure you already have Google Tag Manager script installed on your website. Learn more about Google Tag Manager here.

Step 1: Create the Custom HTML Tag

• Log in to Google Tag Manager: Access your GTM container.
• Create a new tag:
  • Navigate to "Tags" in the left sidebar.
  • Click on "New" and select "Tag Configuration."
  • Choose the tag type as "Custom HTML."
• Add the custom script:
  • In the "HTML" section, paste your custom script:

<script>
setTimeout(function() {
var form = document.querySelector('.form-widget-2');
if (form) {
form.addEventListener('submit', function(event) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'formSubmission',
formClasses: form.className
});
});
}
}, 3000);
</script>

This script listens for the form submission event, and once the form is submitted, it pushes a custom event (formSubmission) into the dataLayer, along with the form's ID and class.

Step 2: Set up a Trigger for the Form Submission

• Create a new trigger:
  • Go to the "Triggers" section and click "New."
  • Choose "Trigger Configuration" and select "Custom Event" as the trigger type.
• Configure the custom event:
  • Set the event name to match the one pushed to the dataLayer in the script: formSubmission.
  • You can choose "All Custom Events" or specify additional conditions if needed.
• Save the trigger.

Step 3: Link the Trigger to the Custom HTML Tag

• Link the trigger to the Custom HTML tag:
  • Go back to your Custom HTML tag.
  • Under the "Triggering" section, select the trigger you created in Step 2 (the one for formSubmission).
• Save the tag.

Step 4: Test the Setup

• Enable Preview Mode in Google Tag Manager.
• Test the form submission on your website:
  • Open the page with the form and try to submit the form.
  • Check in GTM Preview mode if the event formSubmission is triggered.
  • In GTM Preview mode, you should see the form submission event with the classes in the dataLayer.

Now you have captured the form submission in Google Tag Manager, next let’s track the form submission event on Google Analytics 4 (GA4).

Step 5: Set up a GA4 Event Tag in GTM

• Create a new GA4 Event tag:
  • Go to the Tags section in Google Tag Manager.
  • Click New and choose Tag Configuration.
  • Select Google Analytics: GA4 Event as the tag type.
• Configure the GA4 Event tag:
  • Measurement ID: Input your GA4 measurement ID (found in your GA4 property settings).
  • Event Name: Set the event name to something like form_submission (or any custom name you prefer for tracking the form submission event).
  • Event Parameters: Under Event Parameters, add parameters to track additional information. For example:
    • Form Classes: Set the parameter name to form_classes and the value to {{formClasses}} (this is another variable you'll create next).
• Add the Data Layer Variables:
  • For each of the event parameters (e.g., form_id and form_classes), you'll need to create corresponding Data Layer Variables in GTM:
    • Go to Variables in GTM.
    • Click New and choose Variable Configuration.
    • Select Data Layer Variable.
    • Set the Data Layer Variable Name to match the keys from the dataLayer pushed by your custom HTML tag, such as:
      • For form_classes, use the name formClasses.
    • Save the variables.
• Link the Trigger:
  • Under the Triggering section of your GA4 event tag, select the custom event trigger you created earlier (the one that listens for the formSubmission event).
  • Save the tag.

Step 6: Test the GA4 Event Tracking

• Enable Preview Mode in Google Tag Manager.
• Test the form submission:
  • Go to the webpage where the form is located.
  • Submit the form and check in GTM Preview mode if the GA4 Event tag fires correctly.
  • Ensure the event name is form_submission, and the parameters form_id and form_classes are captured properly.
• Check GA4 DebugView:
  • In your GA4 Property, go to the DebugView section.
  • Submit the form again and check if the form_submission event appears in the DebugView with the correct parameters.

Step 7: Publish the Changes
Once you have tested everything and confirmed that the GA4 event is firing correctly, you can publish your changes in Google Tag Manager to make them live.