{"id":243,"date":"2024-06-10T13:04:00","date_gmt":"2024-06-10T13:04:00","guid":{"rendered":"https:\/\/smartsource.com.sg\/blog\/?p=243"},"modified":"2024-06-10T13:04:00","modified_gmt":"2024-06-10T13:04:00","slug":"implementing-google-tag-manager-on-a-simple-html-file-with-a-form","status":"publish","type":"post","link":"https:\/\/smartsource.com.sg\/blog\/index.php\/2024\/06\/10\/implementing-google-tag-manager-on-a-simple-html-file-with-a-form\/","title":{"rendered":"Implementing Google Tag Manager on a Simple HTML File with a Form"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

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

    Step 2: Add GTM Code to Your HTML File<\/h4>\n\n\n\n
      \n
    1. Create an HTML File<\/strong>: Create a new HTML file named index.html<\/code>.<\/li>\n\n\n\n
    2. Add GTM Code Snippets<\/strong>: Insert the GTM code snippets into your HTML file. The first snippet goes inside the <head><\/code> tag, and the second snippet goes immediately after the opening <body><\/code> tag.<\/li>\n<\/ol>\n\n\n\n
      <!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Simple Form with GTM<\/title>\n    <!-- Google Tag Manager -->\n    <script>\n      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':\n      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],\n      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=\n      'https:\/\/www.googletagmanager.com\/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);\n      })(window,document,'script','dataLayer','GTM-XXXXXX'); \/\/ Replace GTM-XXXXXX with your container ID\n    <\/script>\n    <!-- End Google Tag Manager -->\n<\/head>\n<body>\n    <!-- Google Tag Manager (noscript) -->\n    <noscript><iframe src=\"https:\/\/www.googletagmanager.com\/ns.html?id=GTM-XXXXXX\"\n    height=\"0\" width=\"0\" style=\"display:none;visibility:hidden\"><\/iframe><\/noscript>\n    <!-- End Google Tag Manager (noscript) -->\n    \n    <h1>Simple Form<\/h1>\n    <form id=\"simple-form\" action=\"#\" method=\"post\">\n        <label for=\"name\">Name:<\/label>\n        <input type=\"text\" id=\"name\" name=\"name\" required>\n        <br><br>\n        <label for=\"email\">Email:<\/label>\n        <input type=\"email\" id=\"email\" name=\"email\" required>\n        <br><br>\n        <button type=\"submit\">Submit<\/button>\n    <\/form>\n\n    <script>\n        document.getElementById('simple-form').addEventListener('submit', function(event) {\n            event.preventDefault(); \/\/ Prevent the default form submission\n            dataLayer.push({\n                'event': 'formSubmit',\n                'formId': 'simple-form',\n                'formName': 'Simple Form'\n            });\n            alert('Form submitted!');\n        });\n    <\/script>\n<\/body>\n<\/html>\n\n<\/code><\/pre>\n\n\n\n
      Step 3: Configure GTM to Track Form Submissions<\/h4>\n\n\n\n
        \n
      1. Go to Google Tag Manager<\/strong>: Open your GTM container.<\/li>\n\n\n\n
      2. Create a New Tag<\/strong>:\n
          \n
        • Click on “Tags” in the left-hand menu.<\/li>\n\n\n\n
        • Click on “New” and name your tag (e.g., “Form Submission Tag”).<\/li>\n\n\n\n
        • Click on “Tag Configuration” and select “Google Analytics: GA4 Event.”<\/li>\n\n\n\n
        • Configure the tag:\n
            \n
          • Measurement ID: Enter your GA4 Measurement ID.<\/li>\n\n\n\n
          • Event Name: form_submit<\/code><\/li>\n\n\n\n
          • Event Parameters: Add parameters like form_id<\/code> and form_name<\/code> to match the dataLayer push.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n
          • Create a Trigger for Form Submissions<\/strong>:\n
              \n
            • Click on “Triggering” and select “New.”<\/li>\n\n\n\n
            • Name your trigger (e.g., “Form Submit Trigger”).<\/li>\n\n\n\n
            • Choose “Custom Event” as the trigger type.<\/li>\n\n\n\n
            • Event Name: formSubmit<\/code><\/li>\n\n\n\n
            • Save the trigger.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
            • Save and Publish<\/strong>: Save your tag and trigger, then click “Submit” to publish your GTM container.<\/li>\n<\/ol>\n\n\n\n
              Step 4: Verify Implementation<\/h4>\n\n\n\n
                \n
              1. Preview GTM<\/strong>: In GTM, click on “Preview” to enter preview mode.<\/li>\n\n\n\n
              2. Open Your HTML File<\/strong>: Open index.html<\/code> in your browser.<\/li>\n\n\n\n
              3. Submit the Form<\/strong>: Fill out the form and click “Submit.”<\/li>\n\n\n\n
              4. Check GTM Debug Console<\/strong>: Ensure that the formSubmit<\/code> event is pushed to the dataLayer and that your tag fires correctly.<\/li>\n<\/ol>\n\n\n\n
                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.<\/p>\n","protected":false},"excerpt":{"rendered":"
                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…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[189,188],"class_list":["post-243","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-datalayer","tag-google-tag-manager"],"_links":{"self":[{"href":"https:\/\/smartsource.com.sg\/blog\/index.php\/wp-json\/wp\/v2\/posts\/243","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/smartsource.com.sg\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/smartsource.com.sg\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/smartsource.com.sg\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/smartsource.com.sg\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=243"}],"version-history":[{"count":1,"href":"https:\/\/smartsource.com.sg\/blog\/index.php\/wp-json\/wp\/v2\/posts\/243\/revisions"}],"predecessor-version":[{"id":244,"href":"https:\/\/smartsource.com.sg\/blog\/index.php\/wp-json\/wp\/v2\/posts\/243\/revisions\/244"}],"wp:attachment":[{"href":"https:\/\/smartsource.com.sg\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=243"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/smartsource.com.sg\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=243"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/smartsource.com.sg\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}