Form Events with Google Tag Manager

Tracking form submissions is a fundamental part of digital analytics. In this guide, we'll walk you through tracking a form submission process using Google Tag Manager (GTM) and Google Analytics 4 (GA4).

Effortlessly Track Form Events with Google Tag Manager and GA4

Hello Reader, Ever wondered how many visitors start filling out your website forms but never finish? Or how many complete them successfully? Let's discover a simple way to find out!

Why Track Forms?

When someone uses a form on your website, it's a sign they're interested. Maybe they're signing up, asking a question, or buying something. Knowing more about this can help improve your website.

Using Google Tools

We’ll use two tools: Google Tag Manager (GTM) and Google Analytics 4 (GA4).

Preparing the JavaScript Code.

First, prepare the JavaScript code required to track the form submission process:

// For when someone starts filling out a form
function trackFormStart() {
  window.dataLayer = window.dataLayer || []
  dataLayer.push({
    event: 'start_form',
    form_name: 'Signup Form',
    form_location: window.location.pathname,
    timestamp: new Date().getTime(),
  })
}

// When the form is completed
function trackFormFinish(result) {
  dataLayer.push({
    event: 'form_finish',
    form_name: 'Signup Form',
    form_location: window.location.pathname,
    timestamp: new Date().getTime(),
    form_result: result,
  })
}
        

- Place the code directly between your page's <script> tags or add it to an external JS file.

- Link the trackFormStart() function to the event when the form starts being filled out (commonly the onfocus or onchange event of the first input field).

- Link the trackFormFinish(result) function to the event when the form is successfully submitted (commonly the onsubmit event).

Configuring Google Tag Manager .

3.1. Setting Up Variables

- In GTM, click on the "Variables" tab from the left menu.

- Create a new variable. Choose "Data Layer Variable" for the variable type and name it "form_name". For the Data Layer Variable Name, enter "form_name".

- Similarly, set up variables for "form_location" and "form_result".

3.2. Setting Up Triggers

- From the left menu, click on the "Triggers" tab.

- Create a new trigger. Choose "Custom Event" for the trigger type and enter "start_form" for the event name. Save this trigger.

- Similarly, create a trigger for "form_finish".

3.3. Setting Up Tags

- Click on the "Tags" tab from the left menu.

- Create a new tag. Choose "GA4 Event" for the tag type and specify your appropriate GA4 configuration tag.

- Enter "start_form" for the event name.

- for triggering, select the "start_form" trigger you created earlier.

- Save this tag.

- Similarly, set up a tag for "form_finish".

Testing and Publishing

Use GTM's "Preview" mode to test your setup. Fill out your form to ensure that tags are triggered correctly. Once everything works as expected, publish your GTM setup.

By following these steps, you'll be able to successfully track form submission events. You can further expand this setup for more detailed analysis or segmentation needs.

Thank you for reading