Implementing Google Tag Manager on a Simple HTML File with a Form

This tutorial will guide you through the steps to implement Google Tag Manager (GTM) on a simple HTML file with a form. We will include the GTM container code, create a simple form, and track form submissions using GTM.

Step 1: Create a Google Tag Manager Account and Container

  1. Sign in to Google Tag Manager: Go to Google Tag Manager and sign in with your Google account.
  2. Create an Account: Click on “Create Account,” enter your account name, and set your country.
  3. Create a Container: Enter a container name (e.g., “My Website”) and select “Web” as the target platform. Click “Create.”
  4. Install GTM Code Snippets: After creating the container, GTM will provide two code snippets. Copy these snippets for later use.

Step 2: Add GTM Code to Your HTML File

  1. Create an HTML File: Create a new HTML file named index.html.
  2. Add GTM Code Snippets: Insert the GTM code snippets into your HTML file. The first snippet goes inside the <head> tag, and the second snippet goes immediately after the opening <body> tag.
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Form with GTM</title>
    <!-- Google Tag Manager -->
      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
      })(window,document,'script','dataLayer','GTM-XXXXXX'); // Replace GTM-XXXXXX with your container ID
    <!-- End Google Tag Manager -->
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src=""
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    <h1>Simple Form</h1>
    <form id="simple-form" action="#" method="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <button type="submit">Submit</button>

        document.getElementById('simple-form').addEventListener('submit', function(event) {
            event.preventDefault(); // Prevent the default form submission
                'event': 'formSubmit',
                'formId': 'simple-form',
                'formName': 'Simple Form'
            alert('Form submitted!');

Step 3: Configure GTM to Track Form Submissions

  1. Go to Google Tag Manager: Open your GTM container.
  2. Create a New Tag:
    • Click on “Tags” in the left-hand menu.
    • Click on “New” and name your tag (e.g., “Form Submission Tag”).
    • Click on “Tag Configuration” and select “Google Analytics: GA4 Event.”
    • Configure the tag:
      • Measurement ID: Enter your GA4 Measurement ID.
      • Event Name: form_submit
      • Event Parameters: Add parameters like form_id and form_name to match the dataLayer push.
  3. Create a Trigger for Form Submissions:
    • Click on “Triggering” and select “New.”
    • Name your trigger (e.g., “Form Submit Trigger”).
    • Choose “Custom Event” as the trigger type.
    • Event Name: formSubmit
    • Save the trigger.
  4. Save and Publish: Save your tag and trigger, then click “Submit” to publish your GTM container.

Step 4: Verify Implementation

  1. Preview GTM: In GTM, click on “Preview” to enter preview mode.
  2. Open Your HTML File: Open index.html in your browser.
  3. Submit the Form: Fill out the form and click “Submit.”
  4. Check GTM Debug Console: Ensure that the formSubmit event is pushed to the dataLayer and that your tag fires correctly.

By following these steps, you will successfully implement Google Tag Manager on a simple HTML file with a form, and track form submissions using GTM.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.