2 minutes reading time (436 words)

How to implement Google Tag Manager Environments with Joomla templates

August

Tuesday, 01 August 2017

20116 Hits

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.

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.

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
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.

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'; ?>

<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.