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
- Sign in to Google Tag Manager: Go to Google Tag Manager and sign in with your Google account.
- Create an Account: Click on “Create Account,” enter your account name, and set your country.
- Create a Container: Enter a container name (e.g., “My Website”) and select “Web” as the target platform. Click “Create.”
- 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
- Create an HTML File: Create a new HTML file named
index.html. - 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">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Form with GTM</title>
<!-- Google Tag Manager -->
<script>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX'); // Replace GTM-XXXXXX with your container ID
</script>
<!-- End Google Tag Manager -->
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
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>
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br><br>
<button type="submit">Submit</button>
</form>
<script>
document.getElementById('simple-form').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent the default form submission
dataLayer.push({
'event': 'formSubmit',
'formId': 'simple-form',
'formName': 'Simple Form'
});
alert('Form submitted!');
});
</script>
</body>
</html>
Step 3: Configure GTM to Track Form Submissions
- Go to Google Tag Manager: Open your GTM container.
- 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_idandform_nameto match the dataLayer push.
- 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.
- Save and Publish: Save your tag and trigger, then click “Submit” to publish your GTM container.
Step 4: Verify Implementation
- Preview GTM: In GTM, click on “Preview” to enter preview mode.
- Open Your HTML File: Open
index.htmlin your browser. - Submit the Form: Fill out the form and click “Submit.”
- Check GTM Debug Console: Ensure that the
formSubmitevent 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.