How to Add the Google Tag Manager’s Code to Your Joomla Website

We are getting an increasing number of requests asking us to add the JavaScript code for the Google Tag Manager (which is another tracking tool mainly used by marketing departments). We have decided, in this post, to share a quick and simple guide on how to do this.

First thing you will need is to ensure that you have, in the index.php file located under your templates/[your-template] folder, the following code just under the <jdoc:include type=”head” /> line:

<jdoc:include type="modules" name="code" />

If the above line is not there, then you should add it, and then save the index.php file and upload it back to your website.

The next step would be to create an override for the Custom HTML module’s layout as described here in order to remove the unnecessary div tag (which will, unsurprisingly, break the HTML compliance of your website since you can’t have a div tag in the head section in standard HTML).

Once that is done, you should create a Custom HTML module with the following content (make sure that your editor allows you to type in JavaScript code):

<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=[YOUR GOOGLE TAG MANAGER ID]"
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','[YOUR GOOGLE TAG MANAGER ID]');</script>
<!-- End Google Tag Manager -->

(You will need to change [YOUR GOOGLE TAG MANAGER ID] with your own).

You should then assign the module to all the pages, and you must ensure that its position is set to code (you should hard type code in the Position field even if it’s not in the dropdown). You must also ensure that, in the Advanced Options tab, the Alternative Layout is set to nodiv (that is if you followed the above guide on overriding the output of the Custom HTML module).

Now, there is just one small thing to do, which is completely clearing the cache on your Joomla website (as well as that of your template, if it has its own caching mechanism).

If you followed the above instructions, then go ahead and show the world your beautiful smile of success because your website has now the Google Tag Manager installed!

Of course, Google Tag Manager is a vast realm, and it’s possible that you will need to send Google some specific information about your website’s content. If that is the case, then feel free to contact us. We’ll be happy to do this for you professionally, cleanly, and without taking much of your money…

4 Responses to “How to Add the Google Tag Manager’s Code to Your Joomla Website”
rss
  1. Comment by Francesco — April 4, 2017 @ 5:42 am

    Hi, but if the theme needs to be updated I will lose this code in index.php. How to preserve this code in index.php (or somewhere) when updating the template?

  2. Comment by Fadi — April 5, 2017 @ 10:02 pm

    Typically, template updates do not (should not) occur very often. It is also typical for someone to make changes to the template files. Having said that, the only other option if you want to ensure that your modifications are update proof would be to add the Google Tag Manager code to your website by using a plugin.

    Keep in mind that doing this in the template is cleaner (unless you want the Google Tag Manager code to be dynamic).

  3. Comment by Arne Kriedemann — June 9, 2017 @ 4:59 pm

    Hi there / Bonjour,

    Thanks for your post.

    Google suggests to split the code between head and body section. What do you suggest to handle that within Joomla. I’d be quite happy if you provided us with a solution.

    Best regards / a bientot

    Arne (from Moelln, near Hamburg, Germany, Europe, just a hop over the big pound)

  4. Comment by Fadi — June 21, 2017 @ 5:33 am

    Hi Arne,

    If you want to split the code, then you can do that using 2 Custom (aka Custom HTML) modules, one assigned to a position in the head section, and the other assigned to to a position in the body section (just before the end of the body tag).

Leave a comment