How do I add the Google Tag Manager code to my website?

Adding the Google Tag Manager (GTM) code to your website involves placing two distinct snippets of code in specific locations: one near the top of your page’s head section, and the other immediately after the opening body tag. Using a tool like Header Footer Code Manager (HFCM) simplifies this process by allowing you to organize and save these snippets correctly.

Full Explanation

Google Tag Manager provides two pieces of code that must be added to your website for proper tracking and tag management. The first code snippet should be inserted as high as possible in the head section of your webpage. This ensures that the GTM loads quickly and can start managing tags immediately as the page begins to load.

The second code snippet is meant to be placed right after the opening body tag. This placement allows GTM to handle tags that need to fire early within the body content of your webpage.

By using the Header Footer Code Manager (HFCM) plugin or tool, you can add these snippets conveniently without manually editing the theme files. This method avoids direct code modification and helps maintain the integrity of your website’s structure.

Step-by-Step Breakdown

1. Copy the GTM head code: From your Google Tag Manager account, copy the code snippet meant for the head section.
2. Add new HFCM entry: Go to your website’s HFCM plugin or tool, create a new entry, and name it Google Tag Manager Header.
3. Paste and save: Paste the copied head code into this new HFCM entry and save it.
4. Copy the GTM body code: Return to Google Tag Manager and copy the code snippet intended to be placed immediately after the opening body tag.
5. Add another HFCM entry: In HFCM, create a second new entry named Google Tag Manager Body.
6. Set location and paste: For this entry’s location, select before text and choose footer as the area where it will appear. Paste the body code snippet into this field and save.
7. Verify placement: Confirm that these two scripts are now properly positioned on your website, with the head code high in the head and the body code immediately after the opening body tag.

Real Examples

For instance, when you create the entry ‘Google Tag Manager Header’ in HFCM, the plugin ensures the code appears right where it needs to in the document head. Likewise, the ‘Google Tag Manager Body’ entry places the second snippet just after the opening body tag by selecting the before text option with a footer location, ensuring GTM loads correctly.

Common Mistakes

• Not placing the head code high enough in the head section, which can delay GTM loading.
• Failing to add the second body snippet right after the opening body tag, reducing GTM’s effectiveness.
• Not saving the entries properly in HFCM, which means the code won’t appear on your site.
• Confusing the placement locations in HFCM, such as putting the body code in the footer incorrectly.

FAQs

Why is it important to put the head code as high as possible in the head section?

Placing the head code early ensures GTM loads promptly, allowing it to manage tags right from the start of page loading.

Can I add both GTM codes in the footer?

No, the head code must be in the head section, and the other code must be right after the body tag for proper functionality.

What if I don’t use HFCM?

You’d need to manually edit your website’s HTML files to insert the GTM code snippets in the correct places.

Key Takeaways

• Google Tag Manager requires two snippets: one for the head and one for right after the opening body tag.
• Use Header Footer Code Manager (HFCM) to easily add and manage these snippets on your website.
• Name your HFCM entries clearly as ‘Google Tag Manager Header’ and ‘Google Tag Manager Body’ for organization.
• Set the correct location settings within HFCM when adding each code snippet to ensure proper placement.
• Always save your entries and verify their placement for GTM to function effectively on your site.