Add the Google Tag Manager to your website

Aleksandar Google Tag Manager 6 Comments

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.

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 sort of text editor will open.
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. I have added this code just below the [global] tag in that config file.
step 4: Hit the save button. Now your tracking code should 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: https://wordpress.org/plugins/woocommerce-google-adwords-conversion-tracking-tag/

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
}

Comments 6

  1. Hi,

    About tag manager for woocommerce, does the code would look like this?:

    add_action('wp_head', 'google_tag_manager');
    function google_tag_manager() { ?>
    
    var pluginUrl = 
     '//www.google-analytics.com/plugins/ga/inpage_linkid.js';
    _gaq.push(['_require', 'inpage_linkid', pluginUrl]);
    <
    
    ['_addTrans','transactionId', 'affiliation', 'total', 'tax', 'shipping', 'city', 'state', 'country']
    [_addItem, 'transactionId', 'sku', 'name', 'category', 'price', 'quantity']
    '_trackTrans()'
    
    <?php
    

    I have to open a function isn’t it?

    Thanks for your help!
    Maiky

    1. Post
      Author

      Hi Maiky

      No. Your example is wrong. For the Googll Tag Manager it would look something like this:

      add_action('wp_head', 'google_tag_manager');
      function google_tag_manager() { 
          ?>
          
          <!-- Google Tag Manager -->
          <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX"
          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-XXXX');</script>
          <!-- End Google Tag Manager -->
       
          <?php
      }
      
    1. Post
      Author

      Hi OL

      Please give me more information like CMS or e-shop you want to install GTM on. Use Google Tag Assistant to verify if GTM has been installed correctly. And if you also post the website on which you want to install GTM I can have a look myself.

      Regards
      Aleks

      1. Thanks for the reply Aleks. I have latest wordpress and woocommerce installed, using The Retailer theme for the website. The website isn’t live yet so I cannot show you now. According to Google’s documentation, the GTM code should go right after BODY tag, is it the case for your tutorial?

        1. Post
          Author

          No, the code will go into the head of the page, but it will work fine nonetheless. Unfortunately there is no way to put the code right after the BODY tag (within the two BODY tags), so this is the best solution I know so far. You could put the code into the footer by exchanging wp_head with wp_footer, but I have not enough information so far to be able to say which one is better.

Leave a Reply

Your email address will not be published. Required fields are marked *