BlogSynthesis

  • Home
  • Blog
  • Tutorials
  • Contact

How to add “Google Tag Manager” to WordPress sites?

October 9, 2012 by Anand Kumar 20 Comments

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.

header.php twenty eleven theme

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.

Filed Under: Tutorials Tagged With: Google Tag Manager, How to

Comments

  1. Rajesh Namase says

    October 11, 2012 at 6:42 pm

    Anand 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

    Reply
    • Anand Kumar says

      October 12, 2012 at 2:28 pm

      Thanks Rajesh, for sharing link of the plugin. 🙂

      Reply
  2. syed says

    January 27, 2013 at 5:59 am

    Hi 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

    Reply
  3. Ryan says

    September 26, 2013 at 8:44 pm

    Will 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!

    Reply
    • Anand Kumar says

      January 11, 2014 at 8:18 am

      Yes, this should work with Genesis 2.0

      Reply
  4. Bernard Piette says

    January 30, 2014 at 7:59 pm

    Thanks 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!

    Reply
  5. Bernard Piette says

    January 30, 2014 at 8:11 pm

    Except 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!

    Reply
    • Anand Kumar says

      January 30, 2014 at 8:27 pm

      If 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

      Reply
      • Bernard Piette says

        January 30, 2014 at 9:20 pm

        Thanks 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!

        Reply
  6. Sanjay says

    March 16, 2014 at 5:39 pm

    Very helpful tip, considering that I’m still using Thesis 1.8. Many thanks.

    Reply
  7. Gary says

    June 28, 2014 at 5:48 am

    Thanks 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?

    Reply
  8. Stephen says

    October 3, 2014 at 12:45 pm

    In the example above, would be post the container tag straight after the body tag as in <body

    Or <body >

    Thanks.

    Stephen.

    Reply
    • Anand Kumar says

      October 5, 2014 at 4:15 am

      both 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.

      Reply
  9. Melanie says

    December 18, 2014 at 5:36 pm

    Hello! 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?

    Reply
    • Anand Kumar says

      December 19, 2014 at 4:50 pm

      Hello 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.)

      Reply
      • Melanie says

        December 19, 2014 at 5:20 pm

        Hi Anand. My website is http://noodlesfinephotography.com/. Thanks for your help!

        Reply
        • Anand Kumar says

          December 19, 2014 at 6:52 pm

          Hey, The follow up reply is here. I also have sent you an email. I hope it will be helpful.

          Reply
  10. Elizabeth says

    December 20, 2014 at 12:55 am

    I 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?!

    Reply
    • Anand Kumar says

      December 20, 2014 at 3:33 am

      It 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)

      Reply
  11. Joaquin says

    January 26, 2015 at 12:18 pm

    HI, 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!!

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Recent Posts

  • Add NGINX as NodeBB Proxy Server
  • Install NodeBB on DigitalOcean Cloud In 5 minutes
  • The right way to customize WordPress Themes!
  • How to make WordPress Print Friendly
  • How to install WordPress on Localhost

Write for us · Contact · Privacy Policy
© Copyright 2012 BlogSynthesis · All Rights Reserved · Powered by Genesis Framework · WordPress · DigitalOcean