Data Layer Push Example: Basic Form Submission

It's time to track your website forms. However, most website forms do not pass data to Google Analytics by default. To set this up, you may need to add additional code (a data layer push) to your form —whether for contact inquiries, newsletter sign-ups, or other user actions—this is essential. 

What is a Data Layer Push?

Think of a data layer push as a behind-the-scenes note that tells your analytics tools, "Hey, someone just submitted a form!" It’s essential because it ensures that every form submission is tracked accurately. This visibility into user actions can help you understand which marketing efforts drive engagement and where potential customers drop off. Without this, form submissions can sometimes go untracked, causing you to miss out on valuable insights into your website’s performance.

Developer Guide to a Basic Data Layer Push for a Form Submission

The data layer push is just a small JavaScript snippet added to the form's submission event. This snippet will work with analytics tools to ensure the form submission is recorded accurately.

Step 1: Plan Your Data Capture

Consider what form information would be useful to pass along for analytics purposes. At a minimum, aim to include:

• Event name (e.g., 'formSubmit')
• Form name/type

Step 2: Adding the Data Layer Push 

Add the JavaScript code snippet to run when the form is successfully submitted. (Do not fire this if the form is submitted incorrectly). 

Here’s a Data Layer Push Code for a Form:

// Initialize dataLayer if it doesn't exist
window.dataLayer = window.dataLayer || [];

// Set up form submission tracking
document.querySelector("#yourFormID").addEventListener("submit", function(event) {
  dataLayer.push({
    'event': 'formSubmit',
    'formType': 'contact',
  });
});

Explanation of the Code:

• #yourFormID: Replace this with the specific ID of the form you want to track.
• dataLayer.push(): This is the command to send information to the data layer.
• event: ‘formSubmit’ serves as a label, letting the analytics tool know the type of interaction.
• formType: Allows you to specify the type of form (e.g., contact, newsletter).

Step 3: Test Your Implementation

Use your browser’s developer tools (Network tab) to verify that the data layer push is firing correctly upon form submission. Ensure that the information sent in the data layer matches your requirements.

Wrapping Up the Form Data Layer Push

Integrating a data layer push for form submissions might sound technical, but it’s a straightforward way to gain richer insights into user interactions. By setting up these data layer pushes, you're laying the groundwork for smarter, data-driven decisions. From here, your marketing team can use Google Tag Manager (GTM) to configure your form submission data into Google Analytics and your Advertising Platforms.