askvity

How do I add Google Tag Manager in HTML?

Published in Google Tag Manager 3 mins read

To add Google Tag Manager (GTM) to your HTML, you need to insert two code snippets provided by Google into your website's code. These snippets enable GTM to manage and deploy marketing tags and tracking codes without directly editing your website's code.

Steps to Add Google Tag Manager to Your HTML

Here’s a step-by-step guide on how to add GTM to your HTML:

  1. Access Your Google Tag Manager Account: Log in to your Google Tag Manager account at https://tagmanager.google.com/.

  2. Navigate to Install Google Tag Manager:

    • In GTM, go to Admin section.
    • Click on Install Google Tag Manager. This section displays the code snippets you need.

  3. Copy the Code Snippets: You'll find two code snippets. It is recommended to save a copy of these snippets in an HTML document for easy access.

    Code Snippet Placement Description
    Snippet 1 Inside the <head> element of your page This script needs to be placed as high in the <head> of the page as possible. It loads the GTM library.
    Snippet 2 Immediately after the opening <body> tag This snippet is crucial for tags that require the <body> to be loaded, like some tracking pixels.

  4. Paste the Snippets into Your HTML:

    • Snippet 1 (Head Section): Paste the first code snippet as high as possible within the <head> section of every page on your website. This ensures GTM loads early.
    <!DOCTYPE html>
<html>
<head>
<!-- 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-XXXXXXX');</script>
<!-- End Google Tag Manager -->
<title>Your Web Page</title>
</head>
    • Snippet 2 (Body Section): Paste the second code snippet immediately after the opening <body> tag on every page.
    <!DOCTYPE html>
<html>
<head>
<title>Your Web Page</title>
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

<!-- Your website content here -->
</body>
</html>

  5. Replace GTM-XXXXXXX: In both code snippets, replace GTM-XXXXXXX with your actual Google Tag Manager container ID.

  6. Publish Changes: After pasting the code snippets into your website's HTML, publish the changes to your website.

  7. Verify Installation: Use Google Tag Manager's preview mode or Google Tag Assistant to verify that GTM is correctly installed and firing tags.

Why are both snippets needed?

  • The <head> snippet loads the GTM JavaScript library asynchronously.
  • The <body> snippet (the <noscript> tag) provides a fallback mechanism for users who have JavaScript disabled in their browsers, ensuring that basic tracking still occurs.

By following these steps, you'll successfully add Google Tag Manager to your HTML, enabling you to manage and deploy tags efficiently.

Related Articles