Add the Google Tag Manager to your website
How to add the Google Tag Manager container to an off the shelf CMS or shop system like WordPress, WooCommerce or xt:Commerce, without breaking the theme.
This article is also available in German.Read the German version
So you’ve got an off the shelf CMS or e-commerce shop system like WordPress, WooCommerce, xt:Commerce, etc. and you want to add the Google Tag Manager tracking code to your site? Google Tag Manager is still very new and there is not a lot of information around for every CMS and shop system. You might be able to download a plugin for your website, then you’re lucky. Do it. For other websites there is no plugin around, or you just don’t want to install another plugin to get this done but prefer to add the code manually. So in this post I try to collect howto’s for adding the Google Tag Manager tracking code into CMS and e-commerce shop systems.
I will start off with the CMS and e-commerce shop systems I’ve run into when setting up Google AdWords and Google Analytics for my clients. I hope I will get a lot of feedback from people who found other ways how to implement GTM for their websites I am presenting here or for websites which are not on my list yet. Just write a comment if you have questions or new findings.
As an additional note I would like to point out the Google Tag Assistant plugin. Go and download it for the Chrome browser and use it to check if your Google tags are working as they should. The plugin gives you valuable information on every aspect of your tag implementation on the website and will help you to fix all sorts of problems.
| Platform | Where to put the code |
|---|---|
| Typo3 | The Setup part of the root template, via page.headerData |
| xt:Commerce 4.0.13 | /templates/xt_default/javascript/js.php |
| WordPress | A wp_head action in the theme's functions.php |
| WooCommerce | Our plugin, or the same functions.php hook |
Here we go.
Typo 3
step 1. Open the Typo3 admin interface.
step 2. In "Template" open the root template and choose to edit the "Setup" part. A text editor opens.
step 3. Somewhere in that text you have to add this:
page.headerData.999 = TEXT
page.headerData.999.value(
# add your tracking code here
)
Make sure to exchange the line # add your tracking code here with your tracking code. We add this code just below the [global] tag in that config file.
step 4. Hit the save button. Your tracking code should now show up on all pages of your Typo3 installation.
xt:Commerce
This works for xt:Commerce Version 4.0.13 Edit following file which is on your webserver’s xt:Commerce installation: /templates/xt_default/javascript/js.php
Just add the Google Tag Manager tracking code there and you are ready to use GTM.
WordPress
Add this code to the functions.php file in your theme folder:
add_action('wp_head', 'google_tag_manager');
function google_tag_manager() {
?>
ADD HERE THE GOOGLE TAG MANAGER CODE
<?php
}
WooCommerce
Use our plugin to add the tracking code to your WooCommerce store: our conversion tracking plugin on WordPress.org
The plugin is the most convenient and best way to add the conversion tracking code to your website because it also includes methods to avoid tracking of shop admins and shop managers and also includes methods to avoid double counting.
Alternatively you can add the code yourself by using the following instructions.
Add this code to the functions.php file in your theme folder:
add_action('wp_head', 'google_tag_manager');
function google_tag_manager() {
?>
ADD HERE THE GOOGLE TAG MANAGER CODE
<?php
}