How to install Google Tag Manager on your website

Author:

Installing Google Tag Manager (GTM) on your website is a crucial step for managing your tracking codes efficiently. This process allows you to add and update tags (like Google Analytics, Facebook Pixels, etc.) without modifying the actual code of your website. Here’s a detailed guide on how to install Google Tag Manager on your website.

1. Create a Google Tag Manager Account

Before you can install GTM, you need to create an account and container. If you’ve already done this, you can skip this step.

Step 1: Sign Up for Google Tag Manager

  1. Go to the Google Tag Manager website.
  2. Click on the “Sign Up for Free” button.
  3. Sign in with your Google account if prompted.

Step 2: Create a New Account

  1. After signing in, you’ll see a screen to create a new account.
  2. Enter your account name (usually your business name).
  3. Choose your country from the dropdown menu.

Step 3: Set Up a Container

  1. Enter a name for your container (typically the name of your website).
  2. Choose where to use the container (select “Web” for websites).
  3. Click “Create.”

Step 4: Accept the Terms of Service

  1. Review the Google Tag Manager Terms of Service.
  2. Click “Yes” to accept the terms and proceed.

2. Install the GTM Code Snippet

Once you create your GTM account and container, you’ll receive two snippets of code that you need to install on your website.

Step 1: Copy the GTM Code

After creating your container, you will see two code snippets displayed on the screen:

  • First Snippet (Head): This code should be placed in the <head> section of your website.
  • Second Snippet (Body): This code should be placed immediately after the opening <body> tag.

Example Code Snippet:

html
<!-- 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');</script>
<!-- End Google Tag Manager -->

<!-- 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) -->

3. Add the GTM Code to Your Website

For HTML Websites:

  1. Open your website’s HTML files in a text editor or IDE.
  2. Locate the <head> tag in your HTML document.
  3. Paste the first snippet of code you copied just before the closing </head> tag.
  4. Locate the opening <body> tag.
  5. Paste the second snippet immediately after the opening <body> tag.

For Content Management Systems (CMS):

  • WordPress:
    • You can either add the code manually by editing your theme’s header file (header.php) or use a plugin such as “Insert Headers and Footers” to easily input the GTM code snippets.
  • Shopify:
    • Go to Online Store > Themes > Actions > Edit code.
    • Open the theme.liquid file and paste the GTM code in the appropriate sections as mentioned above.
  • Wix:
    • In Wix, go to Settings > Tracking & Analytics > New Tool > Google Tag Manager.
    • Enter your GTM ID and follow the prompts to add GTM to your site.

4. Verifying the Installation

After adding the GTM code to your website, it’s essential to verify that it has been installed correctly.

Step 1: Use Google Tag Assistant

  1. Install the Google Tag Assistant Chrome extension.
  2. Once installed, open your website.
  3. Click on the Tag Assistant icon and select “Enable.”
  4. Refresh your webpage. The Tag Assistant will show which tags are present and whether they are firing correctly.

Step 2: Use GTM Preview Mode

  1. Go back to your Google Tag Manager workspace.
  2. Click on the “Preview” button in the upper right corner.
  3. Enter your website’s URL and click “Connect.”
  4. This will open a new tab showing your website with a GTM debugger at the bottom.
  5. As you navigate through your site, the debugger will display which tags are firing. Ensure that the GTM container tag is successfully triggered.

5. Publishing Your GTM Container

Once you have verified that your tags are working correctly, you can start adding additional tags and triggers.

Step 1: Create a New Tag

  1. In the GTM workspace, click on “Tags” in the left sidebar.
  2. Click on “New” to create a new tag.
  3. Name your tag and select the type of tag (e.g., Google Analytics).
  4. Configure the tag settings and add triggers as needed.

Step 2: Submit Changes

  1. After creating your tags and triggers, click on the “Submit” button in the upper right corner.
  2. Provide a version name and description to document the changes.
  3. Click “Publish” to make the tags live on your site.

6. Best Practices for GTM Installation

  • Document Changes: Maintain a log of changes made in GTM for future reference.
  • Organize Tags: Use a clear naming convention for tags, triggers, and variables for easier management.
  • Regular Testing: Periodically test tags to ensure they function as expected.

Conclusion

Installing Google Tag Manager on your website is a straightforward process that greatly simplifies managing your marketing tags and tracking codes. By following the steps outlined above, you can efficiently set up GTM, verify its installation, and begin using it to enhance your website’s tracking capabilities. With GTM, you’ll have the flexibility to add, update, and manage tags without the need for constant code changes, allowing for more agility in your marketing efforts.

Categories: Digital Marketing