Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to Properly Add Header and Footer Code in WordPress to Install GTM?

The post How to Properly Add Header and Footer Code in WordPress to Install GTM? appeared first on Social Media Verve.

Without a shadow of doubt, the Header and Footer sections are a key part of the content management system, WordPress. Countless functionalities are added or installed through the header and footer codes that are added on this blogging tool. One of such functionalities is the ability to track your website visits using Google Tag Manager.

Add header and footer codes to install GTM on WordPress

GTM is an advanced tracking tool which manages the web tracking functions by using small bits of information called “tags” to collect information regarding user interactions on a specific web page or elements on the page.

In essence, you can set up a tag to track which action was performed on your web page with the accompanied triggers for such action. 

The biggest win with GTM is when you use it to track some elements of Events on your web page. Events are simply specific interactions that can be performed on a web page without going through the process of loading the page again. This includes such interactions as: watching a video, submitting a form, downloading a PDF, scrolling down the page, etc.

Unlike Google analytics which tracks user activities based on the count of page loads, GTM’s event tracking allows you to associate clearer metrics to your page visitors in terms of what actions they have taken while on your page. This capability allows webmasters to be able to set up a goal through their Google analytics accounts and to track some conversions based on specific Events milestones.

This article is not intended to go through the details of setting up your GTM for event tracking, but you will find how to put this powerful tracking functionality to use for your WordPress site by going through some installation process.

Creating your GTM account requires some additional steps in copying and pasting some codes onto your site’s head and body tags. Here is what that means:

Simply go to “Install Google Tag Manager” once you’ve created your account and added a container into it to copy the codes which will help you to connect the GTM container with your WordPress site. You will see your unique container ID inside the scripts as: GTM-XXXXXXX

Install Google Tag Manager page, Copy your GTM codes

Once copied these codes, the next thing is to paste them as recommended inside the

and tags of your site, or else your GTM tracking function will perform below optimum. Good news is that you can verify this setup in your search console’s site ownership verification section to confirm that the codes have been placed correctly.

But this is where it gets a bit difficult to move forward in the steps. While your GTM might be showing reports in your Google analytics that your tracking functions are working, you may not yet be able to verify your site ownership with the GTM in the search console. This indicates that your GTM codes were not properly placed because Google could not find them on your site.

Installing Google Tag Manager on Your WordPress Site

A bit technical part of this installation is the second code which you will have to copy and paste immediately after the opening

tag of your site. This requires that your active theme supports the wp_body_open hook or else this code will not work. So go to the header.php file in your theme and check to see if the following tag is present there:

Typically, you will find this tag at the beginning of the

tags. If it is not there, it means you will have to duplicate the header.php file of your parent theme into a child theme and then place the tag, as given above, after the opening tag. 

Once you have completed that step, you can now continue with the rest of this setup.

For a simple check, you can confirm if your code implementation as detailed in the methods below was successfully added immediately after the opening

tag by typing your website address in a web browser and adding “view-source:” before it without the quotes as though:

 view-source:https://www.yourdomain.com/

View-source for a page

So, let’s see how to get this working? 

If you know how to do a simple walk around in your WordPress administration interface, your theme’s funtions.php file is not something that is too hard to locate. 

So, you will have to copy two pieces of code right at the bottom of this file as the last thing on the file. 

[Remember to duplicate your theme in a child theme before completing this setup, otherwise you will lose your customizations when next you update the theme. A child theme is a duplicate which inherits all the features and functions of a parent theme (your theme) but with more control and customization than the parent theme.]

So these are the “wp_head” and “wp_body_open” functions, respectively, to copy onto your child theme’s functions.php file:

add_action( 'wp_head', 'twentytwenty_child_head', 1 );
/**
 * Prints the Google Tag Manager  script
 */
function twentytwenty_child_head(){
  ?>
    
    
add_action( 'wp_body_open', 'twentytwenty_child_body_open', 1 );
/**
 * Prints the Google Tag Manager  script
 */
function twentytwenty_child_body_open(){
  ?>
    
    
    
  

Make sure you replace the ####### with your unique container ID.

That’s it. You’ve successfully installed GTM on your site. You can verify your site in the search console to confirm this is working properly.

How to install Google Tag Manager Using a Head & Footer Code plugin

Placing codes on your site’s header and footer is something that will become handy whenever you try to verify your site for any service. So you may need to use a WP extension to manage and streamline this process for you. Instead of going through the delicate process of calling a php function to place your code, which can potentially mess up your theme configuration, you can easily place your code directly through the plugin’s panel.

Simply go to the plugin section and search “head footer code” or you can download the plugin directly on this page, upload it to your site and then activate it. This is a plugin I recommend for this setup for a reason you will find below.

Once the plugin is installed and activated, you will find it under “Tools” in your WordPress interface. 

"Head & footer code" plugin in the WordPress tools

Click it to open the setup panel.

The best feature of this plugin, and the one which makes it so highly recommended, is the ability to enqueue codes within the header, body and footer areas of your site as you place them. 

So if you want to insert a code immediately after the

tag, you will simply add the code and set the priority for it to 1:
Add the Google Tag Manager <noscript> code immediately after the opening <body> tag using the "head & footer code" plugin

This ensures that the code will be placed right after the opening

tag of your site. Google recommends this to place your


This post first appeared on Social Media Verve: Helping Business Suceed With Online Marketing, please read the originial post: here

Share the post

How to Properly Add Header and Footer Code in WordPress to Install GTM?

×

Subscribe to Social Media Verve: Helping Business Suceed With Online Marketing

Get updates delivered right to your inbox!

Thank you for your subscription

×