What is Google Tag Manager (GTM)?
Google Tag Manager (GTM) is a free tool from Google that helps you manage and deploy marketing tags (small snippets of code) on your website without needing to modify the site’s code directly.
Think of GTM as a centralized hub where you can add, edit, and control all your website tags—like Google Analytics, Facebook Pixel, or conversion tracking tags—without constantly updating your website’s backend.
Benefits of Using GTM for Website Tracking and Tag Management
- Simplifies Tag Management: You can manage multiple tags in one place without needing to modify your website code every time.
- Reduces Dependency on Developers: Once GTM is set up, marketers and website owners can add or update tags without developer assistance.
- Improves Website Performance: Tags are loaded asynchronously, meaning they won’t slow down your website.
- Centralized Control: All tags can be managed and monitored from one platform, reducing errors and improving tracking accuracy.
- Free and Easy to Use: GTM is beginner-friendly and completely free, making it a great choice for businesses of all sizes.
Why Should You Use GTM with WordPress?
If you’re using WordPress, integrating GTM can save time and make managing website tracking much easier. Here’s why:
- Manage Multiple Tags Efficiently: With GTM, you can easily add and manage tags for tools like Google Analytics, Facebook Pixel, LinkedIn Insight, or other third-party tracking codes—all from a single dashboard.
- Eliminates Developer Dependency: No need to contact your developer every time you want to update tracking codes. GTM empowers you to handle this yourself, even if you’re not tech-savvy.
- Flexibility for Marketing Campaigns: You can quickly add new tags or make changes without waiting, making it easier to track and optimize marketing campaigns in real-time.
- Avoid Cluttered Code: Instead of embedding multiple tracking codes into your WordPress theme, GTM consolidates everything into a single code snippet, keeping your site clean and organized.
Google Tag Manager (GTM) is a powerful tool that allows you to manage and deploy marketing tags on your website without modifying the code directly. Here is a comprehensive, beginner-friendly guide to adding Google Tag Manager to your WordPress website.
How to Add Google Tag Manager Code in WordPress: A Step-by-Step Guide
Add Google Tag Manager Code to WordPress Using a Plugin
Step 1: Set Up Google Tag Manager Account
- Go to Google Tag Manager: Visit the Google Tag Manager website and log in using your Google account.
- Create a New Account: Click on Create Account and enter your account details, including your website name and URL.
- Get the GTM Code: After setting up your account, Google will provide you with a container snippet (a code) to insert into your website. Copy this code— you’ll need it in the next steps.
Step 2: Install a Google Tag Manager Plugin in WordPress
To easily add Google Tag Manager to WordPress, you can use a plugin. We recommend the DuracellTomi’s Google Tag Manager for WordPress plugin because it’s reliable and user-friendly.
- Go to Your WordPress Dashboard: Log in to your WordPress website.
- Install the Plugin: Navigate to Plugins > Add New, then search for “Google Tag Manager.” Install and activate the DuracellTomi’s Google Tag Manager for WordPress plugin.
- Configure the Plugin: After activation, go to Settings > Google Tag Manager in the WordPress dashboard.
Step 3: Add the GTM Code to the Plugin
- Paste the GTM Container Code: In the plugin settings, you’ll find a field where you can paste your GTM container code. This is the code you copied earlier from your Google Tag Manager account.
- Save the Settings: After pasting the code, click the Save Changes button to ensure your GTM code is added to your site.
Step 4: Verify Google Tag Manager Installation
Once the plugin is set up, you should verify that Google Tag Manager is properly installed on your website.
- Use Google Tag Assistant: Google Tag Assistant is a Chrome extension that helps you verify if GTM is correctly installed. You can download it from the Chrome Web Store.
- Check the Tag: After installing the Tag Assistant, visit your website and click on the Tag Assistant icon in your browser. It will show if the GTM tag is firing correctly.
Additional Tips
- Use GTM for Multiple Tags: Once GTM is set up, you can manage multiple tags like Google Analytics, Facebook Pixel, or Google Ads directly from the GTM interface.
- Test Your Tags: Before deploying any new tag, always test it to ensure it’s working correctly. GTM has a preview mode that allows you to test tags in real-time.
- Update Tags Easily: GTM lets you add or remove tags without requiring code updates, making it easy to scale your marketing efforts.
How to add Google Tag Manager code in WordPress without plugin
Step 1: Set Up Your Google Tag Manager Account
- Go to Google Tag Manager
- Visit Google Tag Manager.
- Log in using your Google account.
- Create a New Container
- Click “Create Account” and fill in your website’s information.
- Enter your website name, country, and choose “Web” as the target platform.
- Copy the Code Snippets
- Once your container is created, Google Tag Manager will generate two code snippets:
- Head Code: Goes inside the <head> section.
- Body Code: Goes right after the opening <body> tag.
- Copy these codes and keep them handy for the next step.
- Once your container is created, Google Tag Manager will generate two code snippets:
Step 2: Back Up Your WordPress Theme
Before editing any code, it’s a good idea to back up your site.
- Create a Backup
- Use a WordPress backup tool or your hosting provider’s backup feature to create a full backup of your site.
- Access Your WordPress Files
- Use a File Manager (via your hosting control panel) or an FTP client (like FileZilla) to access your theme files.
Step 3: Add the GTM Code to Your Theme
- Log in to Your WordPress Dashboard
- Navigate to your WordPress admin panel.
- Access the Theme Editor
- Go to Appearance > Theme Editor.
- From the right-hand menu, locate the header.php file. This is where you’ll place the Head Code.
- Insert the Head Code
- Look for the <head> tag in the header.php file.Paste the GTM Head Code right after the opening <head> tag.
Example:
<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-XXXXXX');
</script>
<!-- End Google Tag Manager -->
</head>
4. Insert the Body Code
- Locate the header.php or footer.php file where the <body> tag is defined.
- Paste the GTM Body Code immediately after the opening <body> tag.
Example:
<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 -->
</body>
Step 4: Save and Test the Changes
- Save Your Changes
- After pasting the code, click “Update File” to save the changes.
- Verify GTM Installation
- Open your website in a browser.
- Use the Tag Assistant (Legacy) Chrome extension to check if the GTM code is firing correctly.
- Check the Source Code
- Right-click on your website and select “View Page Source.”
- Ensure the GTM Head Code is in the <head> section and the Body Code is inside <body>.
Step 5: Test Your Tags in Google Tag Manager
- Go to Google Tag Manager
- Open your container in Google Tag Manager.
- Use the Preview Mode
- Click “Preview” to enter debug mode.
- Test your tags to ensure they’re firing as expected.
- Publish the Container
- Once tested, click “Submit” in Google Tag Manager to publish your container.
Best Practices
- Avoid Directly Editing Parent Themes
- If you’re using a parent theme, changes may be overwritten during theme updates. Instead, create a child theme and add the GTM code to its files.
- Use a Staging Site
- Test changes on a staging site before applying them to your live site.
Adding Google Tag Manager code without a plugin allows you to keep your site lightweight and maintain full control over your implementation. By following these steps, your GTM will be successfully integrated into your WordPress site!
How to Remove GTM Code from Your Website
Why Remove GTM Code?
Before we dive into the steps, let’s quickly go over why you might need to remove GTM:
- Switching to a different tag management system
- Moving to manual tag management
- Clearing up unnecessary code
- Disabling tracking or analytics temporarily
Step 1: Access Your Website’s Code
To remove GTM, you need to have access to your website’s code. Here’s how to find the GTM code:
- Log into your website’s CMS (like WordPress, Wix, or Shopify) or open your website’s HTML files if you have direct access.
- Find the GTM Code: GTM code is usually placed in two sections of the website:
Head section: It will look something like this:
<script async src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXX"></script>
Body section (for backup tag): It looks like this:
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
These are the parts you need to remove.
Step 2: Remove the GTM Code from Your Website
- Locate the GTM Code in the HTML: Once you have access to your website’s code, search for the code snippets mentioned above.
- Delete the GTM Code:
- In the head section, remove the <script> tag that loads GTM.
- In the body section, remove the <noscript> tag containing the GTM iframe.
- Make sure you carefully delete the correct tags and avoid removing other important parts of your website’s code.
Step 3: Save and Upload Changes
After you’ve removed the GTM code:
- If you’re working directly with the HTML files, save the changes and upload the updated files to your server.
- If you’re using a CMS, save the changes through the CMS editor.
Step 4: Clear Your Cache
To see the changes immediately, you may need to clear your website’s cache. This can be done through:
- CMS cache clearing tools (if your CMS provides them)
- Clearing browser cache or using an incognito window to check for updates.
Step 5: Test Your Website
Once the GTM code is removed, test your website to ensure everything works as expected. You can use tools like Google Tag Assistant or Google Tag Manager Debug Mode to verify that GTM is no longer active.
Final
Removing GTM code from your website is a simple process, but it’s important to follow each step carefully. Whether you’re switching to another tag management system or simply clearing unnecessary code, make sure to test your website afterward to ensure everything functions properly
Testing Your Google Tag Manager Installation
Using GTM Preview Mode
GTM’s built-in Preview Mode is an excellent way to debug and test your setup before making it live. Follow these steps to enable and use GTM Preview Mode:
Step 1: Enable GTM Debug/Preview Mode
- Log in to your Google Tag Manager account.
- Open the container for the site you want to test.
- Click the Preview button in the top-right corner of the GTM interface.
- Enter the URL of your website and click Connect.
This will open your website in a new tab with the GTM Debug Console at the bottom of the screen.
Step 2: Confirm Tags Are Firing Correctly
- Navigate through your website as a normal user would.
- Watch the GTM Debug Console to see which tags are firing on each page.
- Verify that the correct tags trigger based on your defined rules.
- Check if any tags are not firing or firing incorrectly and troubleshoot as needed.
Pro Tip: Always test key pages such as the homepage, product pages, and conversion pages to ensure comprehensive coverage.
Common Google Tag Manager Mistakes and How to Avoid Them
1. Forgetting to Add Both <head>
and <body>
Snippets
Problem: GTM provides two snippets of code: one for the <head>
section and another for the <body>
section of your website. If you forget to include either snippet, it can lead to incomplete functionality or tracking errors.
Why This Is a Problem:
- Missing
<head>
snippet: Tags may load incorrectly, causing tracking issues. - Forgetting
<body>
snippet: This can break features like event tracking, leading to gaps in your data collection.
How to Avoid It:
- Follow the installation instructions carefully, ensuring both snippets are added.
- Double-check that both snippets are placed in the correct sections of your website’s code.
- Use tools like Google Tag Assistant to verify the correct installation.
2. Overwriting Code with Theme Updates
Problem: Many websites use CMS platforms like WordPress, which include theme updates. These updates can overwrite custom GTM code if added directly to theme files.
Why This Is a Problem:
- After a theme update, your GTM setup may be completely lost, leading to tracking downtime.
- This can affect data collection, causing gaps in analytics and possibly affecting your marketing efforts.
How to Avoid It:
- Avoid adding GTM code directly to theme files. Use a child theme or a plugin like Insert Headers and Footers to safely add code.
- After each theme update, test your site to ensure the GTM setup is still functional and working as expected.
3. Using Multiple GTM Containers on the Same Site
Problem: Some users try to install multiple GTM containers on the same website, believing it will help manage different tags or accounts. However, this can create conflicts that break functionality.
Why This Is a Problem:
- Tags may not fire properly, or they may not fire at all.
- Data may become fragmented or duplicated, leading to inaccurate or unreliable reporting.
How to Avoid It:
- Stick to a single GTM container for each website.
- If multiple teams need access, use GTM’s built-in user permissions to manage collaboration instead of creating separate containers.
4. Not Testing After Implementation
Problem: Once GTM is set up, it’s crucial to test your tags to ensure everything functions correctly. Skipping this step can lead to tracking errors or broken features that affect your website’s performance.
Why This Is a Problem:
- You might miss important data in your analytics, leading to poor decision-making.
- Broken tags can slow down your website or create a poor user experience for visitors.
How to Avoid It:
- Use GTM’s Preview and Debug Mode to test tags before publishing.
- Regularly monitor your website with tools like Google Tag Assistant or Chrome DevTools to detect errors early.
- Review your Google Analytics reports to ensure data is being tracked accurately.
Advanced Tips for Managing GTM in WordPress
Using a Child Theme for Manual Integration
What is a Child Theme? A child theme is a theme that inherits the functionality and styling of a parent theme but allows you to make customizations without altering the original files. This ensures that updates to the parent theme won’t override your customizations.
Why Use a Child Theme for GTM Integration? Manually integrating GTM with a child theme provides several benefits:
- Customization Flexibility: You can add GTM’s tracking code directly into your site’s header or body without relying on plugins.
- Performance Optimization: Reduces the number of plugins, which can improve site speed.
- Update Resilience: Changes made in the child theme remain intact after updates to the parent theme.
Steps to Manually Add GTM Using a Child Theme:
- Create a Child Theme: If you don’t already have one, create a folder in your WordPress wp-content/themes directory and include a style.css and functions.php file.
Edit the functions.php File: Add the following code to insert the GTM snippet:
Advanced Tips for Managing Google Tag Manager (GTM) in WordPress
1. Using a Child Theme for Manual Integration
What is a Child Theme? A child theme is a theme that inherits the functionality and styling of a parent theme but allows you to make customizations without altering the original files. This ensures that updates to the parent theme won’t overwrite your customizations.
Why Use a Child Theme for GTM Integration?
- Customization Flexibility: Allows you to add GTM tracking code directly to your site’s header or body without relying on plugins.
- Performance Optimization: Reduces the number of plugins, improving site speed and performance.
- Update Resilience: Changes made in the child theme remain intact after updates to the parent theme.
Steps to Manually Add GTM Using a Child Theme:
- Create a Child Theme: If you don’t already have one, create a folder in the
wp-content/themes
directory and include astyle.css
andfunctions.php
file. - Edit the functions.php File: Add the following code to insert the GTM snippet:phpCopyEdit
function add_gtm_code() { ?> <!-- 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 --> <?php } add_action('wp_head', 'add_gtm_code');
Note: ReplaceGTM-XXXXXX
with your GTM container ID. - Test the Integration: Use the GTM Preview mode to ensure the tracking code is working correctly.
2. Organizing Tags, Triggers, and Variables
Proper organization within GTM helps ensure easy maintenance and avoids tracking errors. Below are best practices for organizing your GTM setup:
- Use Clear Naming Conventions:
- Tags: Include the purpose and platform, e.g.,
GA4 - Pageview
orFB - Add to Cart
. - Triggers: Use descriptive names like
All Pages - Pageview
orButton Click - Signup
. - Variables: Specify their use, e.g.,
{{Click URL - Signup}}
or{{GA4 Measurement ID}}
.
- Tags: Include the purpose and platform, e.g.,
- Group Related Tags:
- Create folders in your GTM workspace to group tags by category (e.g.,
Analytics
,Remarketing
,Custom Events
).
- Create folders in your GTM workspace to group tags by category (e.g.,
- Use Built-in Variables:
- Enable built-in variables like
Click URL
,Page Path
, andForm ID
to reduce the need for custom variables.
- Enable built-in variables like
- Document Your Setup:
- Maintain a spreadsheet to document all tags, triggers, and variables, including descriptions and their purposes. This ensures easier management and troubleshooting.
3. Using GTM for Enhanced Tracking
GTM can track advanced metrics and user interactions beyond basic pageviews. Here are some setups to enhance your tracking capabilities:
- Setting Up Google Analytics 4 Tags:
- Go to your GTM workspace and create a new tag.
- Select Google Analytics: GA4 Configuration as the tag type.
- Enter your Measurement ID from GA4.
- Set the trigger to All Pages.
- Adding Remarketing Pixels:
- Create a new tag and select the tag type for your specific platform, such as Facebook Pixel or Google Ads Remarketing.
- Add the pixel ID and configure the trigger based on your campaign goals (e.g., specific product pages or cart abandonment).
- Event Tracking:
- GTM allows you to track user interactions like button clicks, video plays, or form submissions. Here are examples:
- Enable the built-in variable
Click Classes
in your GTM workspace. - Create a trigger of type Click – All Elements.
- Set conditions, e.g.,
Click Classes
equalssignup-button
. - Create a tag to send this event to Google Analytics or another platform.
- Create a trigger of type Form Submission.
- Add filters like
Form ID
equalscontact-form
to ensure accuracy. - Use the tag to send submission events to your analytics platform.
Pro Tip:
Use GTM’s Preview mode to debug your tags and ensure everything is firing as expected before publishing your changes. This helps avoid issues in live environments and ensures accurate tracking.
Google Tag Manager (GTM) Troubleshooting Guide for WordPress
1. GTM Tags Not Firing on the Website
When GTM tags fail to fire, it’s typically due to one or more of the following issues:
1.1 Incorrect Tag Configuration
- Problem: Tags may not be set up correctly in GTM, or triggers might not be properly assigned to them.
- Solution:
- Double-check that triggers are properly assigned to each tag.
- For example, if using a pageview trigger, make sure it’s applied to the correct pages.
1.2 Missing GTM Container Code
- Problem: The GTM container code might not be added to your website, or it’s in the wrong location.
- Solution:
- Ensure the GTM container code is added in both the
<head>
and<body>
sections of your website. - Use browser developer tools or GTM’s Preview Mode to verify the container code is loading correctly.
- Ensure the GTM container code is added in both the
1.3 Triggering Conditions Not Met
- Problem: Tags might not fire because the trigger conditions are not met.
- Solution:
- Review the trigger conditions in GTM to ensure they are correctly set up.
- For example, check if a specific URL is required and ensure it matches exactly.
1.4 JavaScript Errors
- Problem: JavaScript errors on your website can prevent GTM tags from firing.
- Solution:
- Open your browser’s developer tools, go to the Console tab, and check for any errors.
- Fix any errors, or consult with a developer if needed.
1.5 Ad Blockers
- Problem: Users with ad blockers might prevent GTM tags from firing.
- Solution:
- Test your setup using incognito mode or disable ad blockers to see if the tags fire correctly.
2. Conflict with WordPress Plugins
In WordPress, certain plugins can interfere with GTM integration. Follow these steps to identify and resolve conflicts.
2.1 Common Plugin Conflicts
- Problem: Plugins that manage caching, minification, or JavaScript optimization may interfere with GTM scripts.
- Examples: WP Rocket, W3 Total Cache, Autoptimize.
- Security plugins may also block GTM scripts.
- Solution: Temporarily deactivate plugins one by one to identify the conflicting plugin.
2.2 How to Fix Plugin Conflicts
- Disable Plugins Temporarily:
- Deactivate plugins one at a time and check if GTM starts working properly after each deactivation.
- Adjust Plugin Settings:
- After identifying the conflicting plugin, review its settings.
- For caching plugins, exclude GTM scripts from being cached or minified.
- Update Plugins and Themes:
- Ensure all plugins and themes are updated to their latest versions to fix any compatibility issues.
- Consult Plugin Documentation:
- Check the documentation for the conflicting plugin, as it may offer solutions for resolving compatibility issues with GTM.
3. Final Tips for Troubleshooting
- Use GTM’s Preview Mode: Always test your tags and triggers in Preview Mode before publishing any changes. This helps identify issues before they go live.
- Regularly Audit Your GTM Setup: Conduct regular audits to ensure all tags are firing correctly and your setup remains intact.
- Consider Consulting a Professional: If you continue to face issues, consider consulting a GTM expert to help troubleshoot and optimize your setup.
Conclusion and Next Steps
In this guide, we’ve covered the process of adding and troubleshooting Google Tag Manager (GTM) on your WordPress site. Here’s a recap of the key steps:
- Create a GTM Account: Set up your Google Tag Manager account and create a new container for your website.
- Install GTM on WordPress: Add the GTM container code to your WordPress site, either manually or via a plugin.
- Test Your Setup: Use GTM’s preview mode to ensure that tags fire correctly and the integration works as expected.
Once GTM is set up and working correctly, you can begin exploring its advanced features to track specific user actions (such as button clicks or form submissions), manage marketing tags more efficiently, and improve your website’s analytics for better decision-making.
Summary
- Create GTM Account: Set up your GTM account and container.
- Install GTM on WordPress: Add GTM container code manually or via a plugin.
- Test Setup: Use Preview Mode to ensure tags fire correctly.
- Advanced Features: Track user actions, manage marketing tags, and improve analytics.
Get Expert Help
If you’re ready to explore these advanced features or need help setting up GTM correctly, PEAKONTECH is here to assist you.
By following these steps, you’ll have a more optimized and data-driven WordPress site, allowing you to make informed marketing decisions and boost your business growth.