Updated on November 30, 2016
In my Facebook group a user asks:
Can someone point me to the technique for adding Google Tags or “google tag manager” to a WordPress site? It needs to go beneath the
tag of the header file. I’m uncertain how to proceed. Thanks.
To implement Google Tag Manager in your Genesis site, we need to add a piece of code in <head> and another in <body>.
Add the following in your child theme’s functions.php
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Add Google Tag Manager code in <head> | |
| add_action( 'wp_head', 'sk_google_tag_manager1' ); | |
| function sk_google_tag_manager1() { ?> | |
| <!-- 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 Google Tag Manager code immediately below opening <body> tag | |
| add_action( 'genesis_before', 'sk_google_tag_manager2' ); | |
| function sk_google_tag_manager2() { ?> | |
| <!-- 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 (noscript) --> | |
| <?php } |
Replace the code inside the above functions with the snippets provided by Google in the Tag Manager interface or replace GTM-XXXXXX with your container ID.
Sample HTML output:
Reference: https://developers.google.com/tag-manager/quickstart
Great tutorial and simple to accomplish!
I’ve been using this technique, but as a custom mu-plugin. I find that it’s faster and easier to drop into client sites. What are your thoughts?
Code such as this which is not theme related should ideally be inside a plugin. So your approach is better.
Google recently changed the GTM installation to adding some code in the and some to the . Any thoughts on why they would do this? And perhaps a guide for how to 🙂
Thank you for considering!
I’ve updated the tutorial.
Thank you for doing this. Interesting—when I use this installation all my tags work perfectly, but Google Tag Assistant tells me there are errors with my implementation. After further investigation, it looks like their support docs have not caught up with their new installation method. Weird.
has worked well for me. Thank you so much
Hi Mr. Katakam,
I practice this with my website using Metro Pro theme but it did not work. I even used the Simple Hooks plugin but it did not work too. Can you suggest any solution please?
Thank you for your time.
I already fixed by clearing cache since I used WP ROcket 😉
Thank you for this. Was wondering why it wasn’t showing up.
This worked for me, thank you very much!
Thanks – worked for me 🙂
This works for me. Thanks.
Hi
Thanks for this super helpful. Could you tell me where i add the ecommerce code please?
Thanks for this but I am confused by the <?php } at the end of each section.
Looks like this should cause an error.
No, the code should not produce any errors.
By default when you are editing functions.php, you are in PHP mode.
We are closing the PHP mode, entering HTML mode, placing HTML code and reentering the PHP code.
Unfortunately, I have received a syntax error…
What is the error message?
Hello, Sridhar.
It says syntax error, unexpected ‘}’
Can you paste the full code of your child theme’s functions.php at pastebin.com and paste the link?
If already using Genesis Simple Hooks plugin this code can be inserted in genesis_meta hook and genesis_before hook. This puts the script section right at the top of the header and at the top of the body as Google recommends.
How would the code look like with this implementation? THis is something I really need because the tutorial, it’s adding it inside the head and body, not at the beginning.
Further comment – this works great. I had not thought to insert the no-script portion into a function. To use this I use the Code Snippets plugin instead of inserting this code directly into functions.php so when StudioPress updates my child theme Infinity Pro (and they do update their child themes from time to time) I am safe to update. As a matter of fact I do not do any modification to any StudioPress child theme in my arsenal so I can update quickly them without issues. I just use Code Snippets and/or Genesis Simple Hooks if I need to hook anything other than what I can be inserted into Code Snippets. Again, thanks.
Hi James, I hope you can help me.
I use a genesis child theme and implemented the codes in the simple hooks. and the noscript part in to the code snippets plug in. But I still cant be verified by the google tag manager method. I hope you might able to help me? Any suggestion by any one else is more than welcome
Have you been able to verify the tag manager in search console using the method described above (with simple hook)?
Could you please explain why the code is comprised between “?>” and “<?php” ? It’s the first time I see the PHP tag used in reversed order.
See if this makes sense: https://sridharkatakam.com/add-google-tag-manager-code-genesis/#comment-475617
Thanks! This worked beautifully!!
Do I need to clear cache after placing the code snippet through the simple hook plugin? It is saying “verification unsuccessful” when I try to verify my site with tag manager in search console
If not genesis is used I guess the
add_action( ‘genesis_before’, ‘sk_google_tag_manager2’ )
should be:
add_action( ‘wp_body’, ‘sk_google_tag_manager2’ )
Right?