How to implement Google Tag Manager in the WordPress Thesis Theme

by Dan on November 24, 2013

For those of you using the WordPress Thesis theme (as this site is), you may be wondering how to properly implement Google Tag Manager.  The built in Thesis option for scripts places scripts such as Google Analytics at the end of the page just before the closing </body> tag.  Thesis_Software_Scripts_GoogleAnalyticsThis is not an ideal location for Google Tag Manager.  Google Tag Manager should be located just after the opening <body> tag and if you implement a data layer, it needs to be in the <head> section.  Fortunately, Thesis provides us with a way to do this using a feature called Hooks.  A hook is a way to inject a particular piece of code or function into a specific location within WordPress.  There is a list of the many available hook locations on the Thesis support site.

To add a hook, you’ll need to edit the custom_functions.php file in the Thesis theme.  To do this, log into your WordPress admin dashboard, expand the ‘Appearance’ menu and click ‘Editor’.  Now, we’ll add two functions.  One for the Tag Manager script and one for the data layer.  Then we’ll call two hook functions that inject the functions we just created into our desired locations.

Let’s get to it.

  1. Create the function to inject Google Tag Manager
    function injectTagManager() {
    ?>
    <!-- Google Tag Manager -->
    <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-5JKJ9S"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <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=
    '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-5JKJ9S');</script>
    <!-- End Google Tag Manager -->
    <?php
    }
  2. Call the add_action function referencing the function you just created and call it in the ‘thesis_hook_before_html’ location.
    add_action('thesis_hook_before_html','injectTagManager');
  3. Create the function to inject the data layer
    function injectDataLayer() {
    ?>
    <script>
    var dataLayer = [];
    </script>
    <?php
    }
  4. Finally, call the add_action function to inject the data layer in the <head> section of every page.
    add_action('wp_head','injectDataLayer');

That’s it!  Hit save and visit your site with your handy Google Tag Assistant Chrome extension and verify Google Tag Manager is loading along with any contained tags such as Google Analytics.

GoogleTagAssistant_GoogleTagManager

Here’s what my custom_functions.php file looks like in its entirety:

<?php
/* By taking advantage of hooks, filters, and the Custom Loop API, you can make Thesis
 * do ANYTHING you want. For more information, please see the following articles from
 * the Thesis User’s Guide or visit the members-only Thesis Support Forums:
 * 
 * Hooks: http://diythemes.com/thesis/rtfm/customizing-with-hooks/
 * Filters: http://diythemes.com/thesis/rtfm/customizing-with-filters/
 * Custom Loop API: http://diythemes.com/thesis/rtfm/custom-loop-api/
---:[ place your custom code below this line ]:---*/
function injectTagManager() {
?>
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-5JKJ9S"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<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=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-5JKJ9S');</script>
<!-- End Google Tag Manager -->
<?php
}
add_action('thesis_hook_before_html','injectTagManager');
function injectDataLayer() {
?>
<script>
var dataLayer = [];
</script>
<?php
}

add_action(‘wp_head’,'injectDataLayer’);

Happy Measuring!

Have questions about this post?  Get in touch with me by leaving a comment or Google+.

  • http://masterorganicchemistry.com James

    Thank you! I implemented this and it’s working.

  • http://exigodigital.com Kait

    Exactly what I needed!

    Question: I am looking at your screenshot above. Should I see all of my container tags in there? I see the green ‘Working’, but I do not see my remarketing tag or my analytics tag. Does that mean I’m doing something wrong in GTM?

    Thanks, Dan!

    • Dan

      Hi Kait,

      You should see your remarketing and analytics tags listed independently. Do you have a URL I can visit to help troubleshoot?

Previous post:

Next post: