Integrate Google Tag Manager into your WordPress site effortlessly! Our step-by-step guide walks you through the process without using plugins. Optimize analytics and tracking with ease. Learn how now!
Introduction
Google Tag Manager (GTM) is a powerful tool that allows you to manage and deploy various tracking codes and scripts on your website without directly editing its code. If you’re using WordPress as your content management system, integrating GTM into your website is a straightforward process. In this step-by-step guide, I will walk you through the process of adding Google Tag Manager to your WordPress site without any plugins.
Step 1: Create a Google Tag Manager Account
To get started, visit Google Tag Manager’s website and create an account if you haven’t already. Once logged in, you’ll be prompted to create a new container for your WordPress website.
Step 2: Set up a Container for Your WordPress Site
A container is a snippet of code that houses all your tags, triggers, and variables. After creating your account, click on “Create Account” and follow the instructions to set up a new container for your WordPress website. You’ll be asked to provide a name and a URL for the container.
Step 3: Obtain the GTM Container Snippe
After successfully creating your container, Google Tag Manager will generate a container snippet – a small piece of JavaScript code. Go to the “Admin” section and then “Install Google Tag Manager” to find the container code or click on the code (ex: GTM-XXXXXXXX) displayed on the toolbar.
Step 4: Add Google Tag Manager Code to Your functions.php File
To integrate Google Tag Manager (GTM) into your WordPress website, follow these steps to add the necessary code to your functions.php file. Before proceeding, please ensure you have a child theme installed. If you don’t have one, it is strongly recommended to create and use a child theme to avoid losing modifications during theme updates. Alternatively, if using a child theme is not feasible, you can add the code directly to your parent theme’s functions.php file.
- Navigate to your WordPress dashboard and go to “Appearance” -> “Theme Editor.”
- Look for the “functions.php” file, which is typically found under “Theme Functions” on the right-hand side.
- Open the “functions.php” file and scroll to the bottom of the file, just above the closing “?>” tag.
- Copy and paste the following code into the functions.php file:
/*-----------------------------------------------------------
Include the Tag Manager to the header by wplook.com
-----------------------------------------------------------*/
if ( !function_exists( 'wpl_gtm_head_code' ) ) {
function wpl_gtm_head_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-XXXXXXXX');</script>
<!-- End Google Tag Manager -->
<?php
}
add_action('wp_head', 'wpl_gtm_head_code');
}
/*-----------------------------------------------------------
Include the Tag Manager to the body by wplook.com
-----------------------------------------------------------*/
if ( !function_exists( 'wpl_gtm_body_code' ) ) {
function wpl_gtm_body_code() {
?>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<?php
}
add_action( 'wp_body_open', 'wpl_gtm_body_code' );
}- Replace “GTM-XXXXXXXX” in the code above with your actual Google Tag Manager ID. You can find this ID in your Google Tag Manager account.
- Save the changes to the functions.php file.
By adding this code to your functions.php file, Google Tag Manager will be integrated into your WordPress website. The first part of the code adds the GTM container code to the header section, while the second part adds the noscript version of the container to the body section. This ensures that GTM is working correctly even for users with JavaScript disabled.
The code also checks if the wp_body_open function is available in the theme, and if so, it hooks the GTM code to it. Otherwise, it hooks the GTM code to the wp_footer action, which ensures compatibility with themes that don’t support wp_body_open.
Remember to always create a backup of your functions.php file before making any changes to ensure you can easily revert back if needed. With Google Tag Manager successfully added to your WordPress site, you can now efficiently manage and deploy various tracking codes and scripts without the need for plugins.
Step 5: Test the Tags
After adding a tag, you’ll want to test it to ensure it’s functioning correctly. Within GTM, click on “Preview” and “Debug” mode. Open your website in a new tab and navigate through different pages to check if the tags are firing correctly.
Conclusion
By following this step-by-step guide, you’ve successfully integrated Google Tag Manager into your WordPress website without any plugins. Now, you can efficiently deploy and manage various tracking codes and scripts without having to modify your website’s code directly. With Google Tag Manager, you have the power to enhance your website’s analytics and gain valuable insights into your audience’s behavior. Happy tracking!