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. This 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.
- 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 }
- 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');
- Create the function to inject the data layer
function injectDataLayer() { ?> <script> var dataLayer = []; </script> <?php }
- 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.
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+.
Comments on this entry are closed.