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.

By Mark Koemans 2 min read

Flat lay of a white keyboard, two rose gold pens, reading glasses and a blank lined notepad on a white desk

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.

PlatformWhere to put the code
Typo3The Setup part of the root template, via page.headerData
xt:Commerce 4.0.13/templates/xt_default/javascript/js.php
WordPressA wp_head action in the theme's functions.php
WooCommerceOur plugin, or the same functions.php hook
Where the container code goes, per platform

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
}