How to implement Google Tag Manager Environments with Joomla templates

Written by | 01 August 2017 | Published in 2017 August
A problem we have faced in our Joomla development work has been ensuring that the correct Google Tag Manager environment code is being deployed with the right environments - for example in our development environments we need to deploy the container code from GTM related to the dev environment, but in production, we need the live container code.
How to implement Google Tag Manager Environments with Joomla templates © Eyematrix

After some discussions about the best way to implement it, we came up with a simple way to ensure this 'just worked' across all our sites without any complicated settings.

  1. Clone (or download and extract) the repository here into your template folder, so that the folders 'gtm' and 'functions' are in the top level of your template - e.g. templates/your_template/gtm and templates/your_template/functions
  2. Edit each file in the gtm folder, replacing the code snippet with the relevant code from your GTM environment - don't forget you will have one piece of code that needs to go in the head (environment-head.php) and one which needs to go in the body (environment.php) - if you don't know how to get the container snippets, check out this walkthrough article.
  3. Modify the index.php file of your template to include the files in the functions folder as explained below:

    For the head include:

    <head>
    <!-- add include of GTM file per environment case -->
    <?php require_once __DIR__ . '/functions/gtm_head.php'; ?>

    <!-- add everything else that you need for the head of your template file -->
    </head>

    For the body include:

    <body>
    <!-- add include of GTM file per environment case -->
    <?php require_once __DIR__ . '/functions/gtm.php'; ?>

    <!-- add the structure for your template body -->
    <div id="pageWrapper">

    </div>
    </body>

How does it work?

Adding the includes above to your template file mean that when your template is loaded, it will execute the files gtm.php and gtm_head.php within the functions folder.  

This first identifies the URL being accessed and determines whether it matches any of the predefined environments - in this example, we have used 'dev' and 'demo' but you could change these to match your own workflows by editing the files.

In our case, if the visitor is on dev.mysite.com then the file gtm/dev.php (and gtm/dev_head.php) will be loaded, whereas if the visitor is on demo.mysite.com then gtm/demo.php (and gtm/demo_head.php) will be used. If neither of these matches the environment, then gtm/live.php (and gtm/live_head.php) is used.

How can I check it's working?

Simply enable live preview on your container, and check to see if it's loading and firing tags as expected. You can also use the Google Tag Assistant to check that everything is loading as it should.

Read 12969 times Tagged under Developers, English
Ruth Cheesley

Ruth Cheesley

Ruth Cheesley is CEO and Co-Founder of Virya Group and has worked with Joomla! since the fork from Mambo.  She specialises in Joomla! - in particular Search Engine Optimisation (SEO) - and is interested in exploring how open source technology can be implemented in business and education.  Virya means a driving force or energy to do good for the benefit of others, which is the central ethos behind the business.

She's also training for ordination in the Triratna Buddhist Order and runs the popular Joomla! User Group Suffolk, as well as the Mautic Meetup Ipswich group.