Google offers premium services to Webmasters and Bloggers for free like Google Analytics and Google Feedburner. Recently, Google has launched another revolutionary service called “Google Tag Manager” It will boost the page rendering time and increase Page-Speed score.
In the tutorial, we will discuss how to add Google Tag Manager to WordPress. But First of all thank for landing on BlogSynthesis.com. I hope you will have some nice time here.
Now come to the point and add the Google Tag manager to WordPress. I assumed that you have already have the GTM (Google Tag Manager) script. In this scenario We will play with the code.
- How to add Google Tag Manager to Genesis Framework (on any child theme).
- How to add Google Tag Manager to Thesis Theme Framework v 1.8.x.
- How to add Google Tag manager to any other theme by editing Theme file (here default twenty11 theme).
How to add Google Tag Manager to Genesis Framework (on any child theme).
To add the script we will have to edit functions.php file of the child theme on Genesis Framework. But first of all we should have a backup of the file. Using a FTP client, like Filezilla, download the unedited function.php file from:
<WP DIR>/wp-content/themes/<CHILD THEME DIR>/functions.php
Now, Add the following code to your functions.php and save/upload.
/**
* Add Add Google Tag Manager script on Genesis Framework
*
* @author Anand Kumar
* @link http://www.blogsynthesis.com/add-google-tag-manager-to-wordpress/#genesis-framework
*
*/
add_action('genesis_before', 'google_tag_manager');
function google_tag_manager() { ?>
<!-- Google Tag Manager -->
PASTE GOOGLE CODE MANAGER CODE HERE
<!-- End Google Tag Manager -->
<?php
}
How to add Google Tag Manager to Thesis Theme Framework v 1.8.x.
If you are a Thesis Theme user then add the following code to your custom_functions.php file.
/**
* Add Add Google Tag Manager script on Thesis Theme Framework
*
* @author Anand Kumar
* @link http://www.blogsynthesis.com/add-google-tag-manager-to-wordpress/#thesis-theme-framework
*
*/
function limit_front_page() {
global $query_string;
?>
<!-- Google Tag Manager -->
PASTE GOOGLE CODE MANAGER CODE HERE
<!-- End Google Tag Manager -->
<?php
}
add_action('thesis_hook_before_html', 'limit_front_page');
To add the above code to Thesis 1.x you should navigate to “Thesis >> Custom file editor >> custom_functions.php (from drop-down menu)”
How to add Google Tag manager to any other theme by editing Theme file
To add Google Tag manager on other themes simply navigate to edit header.php and find the opening body tag. As shown in the screenshot below.
Add the code in a line after <body> as pointed in the image with red arrow.
To add the above code you should navigate to “Appearance >> Editor >> Template (on the right side) >> Header (header.php) ”
[Please understand this may vary from theme to theme. If you are facing any problem in adding to your blog. You may leave a comment below]
Don’t forget to have a keep a backup of original files. Failing to implement the code improperly will cause the broken theme or site.
Rajesh Namase says
October 11, 2012 at 6:42 pmAnand really nice tutorial, as a developer I always prefer to write code, but for those who don’t want to edit themes can use this plugin for same purpose: WP Google Tag Manager
Anand Kumar says
October 12, 2012 at 2:28 pmThanks Rajesh, for sharing link of the plugin. 🙂
syed says
January 27, 2013 at 5:59 amHi Anand this is my 1st visit your blog im really enjoy you are a rock of wordpress ,i ask a sample question what is advantage of tag manager
Ryan says
September 26, 2013 at 8:44 pmWill this also work for genesis 2.0 on wordpress? I’m a bit worried if I use the 1.8 instructions it might cause the website to fail. I would hate for it to mess up any seo – HELP?!?! 🙂 Thank you very much!
Anand Kumar says
January 11, 2014 at 8:18 amYes, this should work with Genesis 2.0
Bernard Piette says
January 30, 2014 at 7:59 pmThanks Anand,
Your instruction worked like a charm with my Genesis framework. Small change to your process, I used Simple Hooks to enter the information.
Have a great day!
Bernard Piette says
January 30, 2014 at 8:11 pmExcept now I see this error splashed on top of every page…
Parse error: syntax error, unexpected ‘}’ in /homepages/30/d474832100/htdocs/app478398823/wp-content/plugins/genesis-simple-hooks/plugin.php(123) : eval()’d code on line 21
Zoot!
Anand Kumar says
January 30, 2014 at 8:27 pmIf you are using Genesis Simple Hooks plugin then DO NOT add the php code (as i mentioned above). Well Its quite simple. Just add the code obtained from Google at appropriate place. (in this case
genesis_before). HTH
Bernard Piette says
January 30, 2014 at 9:20 pmThanks for that Anand, all cleaned up now 🙂
Just got my Google Adwords Professional designation, please feel free to reach out to me for anything so I can return you the favor. 🙂
Have a great day!
Sanjay says
March 16, 2014 at 5:39 pmVery helpful tip, considering that I’m still using Thesis 1.8. Many thanks.
Gary says
June 28, 2014 at 5:48 amThanks Anand for the useful information, I have placed the code immediately after the body tag as described, but it creates a white space at the top and bottom of the website. Do you know why this is happening and what I can do to prevent it?
Stephen says
October 3, 2014 at 12:45 pmIn the example above, would be post the container tag straight after the body tag as in <body
Or <body >
Thanks.
Stephen.
Anand Kumar says
October 5, 2014 at 4:15 amboth are same things. notice the closing
>after some “class” and some other html entities.. so you will have to put the codes after the line<body>or<body ... >whatever the case.
Melanie says
December 18, 2014 at 5:36 pmHello! Thanks for this blog post, it is very helpful. I am trying to install GTM on my site in WordPress but now I have a “>” on the top of every page on my site. I added my container snippet after the body tag on my themes header.php file. Any ideas on why this is happening?
Anand Kumar says
December 19, 2014 at 4:50 pmHello Melanie, You probably have added code in between
<body ... >,not after the closing>. If you look on the source code of the site it will be clear. OR you may share your site url so I can take a look and suggest. (Considering you neither have Genesis nor Thesis Framework.)
Melanie says
December 19, 2014 at 5:20 pmHi Anand. My website is http://noodlesfinephotography.com/. Thanks for your help!
Anand Kumar says
December 19, 2014 at 6:52 pmHey, The follow up reply is here. I also have sent you an email. I hope it will be helpful.
Elizabeth says
December 20, 2014 at 12:55 amI copied and pasted the code for the Child Theme into my .php file. After I pressed update, my website no longer existed! Not only that, but I cannot even access my wordpress dashboard. Will you PLEASE help?!
Anand Kumar says
December 20, 2014 at 3:33 amIt looks you have broke your site. Now you will have to remove those lines using your web hosting cPanel or FTP. The code I shared for genesis Framework works well, just crosschecked that. You might have added/edited somthing wrong. (Almost all shared hosting providers offer some kind tool to edit php files. Use that to remove those lines you just added. your site will be back online)
Joaquin says
January 26, 2015 at 12:18 pmHI, I have some problems adding Tag Manager.
Adding Code:
<body >
OR
<body >
Doesn´t mather which one i choose, the Tag Assistant found the code, but also an error.
Do you know what is wrong??
I will be soo glad!!
Thanks!!