Add Google Tag Manager to Joomla

Every marketing tool you try wants its own tracking code in your site's head: analytics, ad pixels, heatmaps, chat widgets. Each one means another trip into your template or another plugin. Google Tag Manager replaces them all with one container that you manage from Google's dashboard. You can add Google Tag Manager to Joomla with 2 HTML snippets in Code Snippets.

Get your container ID

You need a Google account.

1. Go to Google Tag Manager and sign in.
2. Click Create Account, or open an existing account.
3. Enter an account name and a container name, and choose Web as the target platform.
4. Accept the terms of service. Tag Manager shows you the install code.
5. Copy your Container ID. It looks like GTM-XXXXXXX.

The snippet code

Google Tag Manager needs 2 pieces of code, so you'll create 2 snippets. The first is a script for the <head>:

<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=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>

The second is a fallback for visitors without JavaScript, which goes right after the opening <body> tag:

<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

How to add the snippets

Snippet 1: the head code

1. Install Code Snippets if it isn't installed already.
2. Log into your Joomla backend.
3. Go to Components → Tassos Code Snippets.
4. Click New.
5. Enter a title, for example Google Tag Manager head.
6. Set Code Type to HTML.
7. Set Insertion Method to Auto-Insert Locations.
8. Set Location to Site Header.
9. Paste the head code above into the editor.
10. Replace GTM-XXXXXXX with your Container ID.
11. Click Save & Close.

Snippet 2: the body code

1. Click New.
2. Enter a title, for example Google Tag Manager body.
3. Set Code Type to HTML.
4. Set Insertion Method to Auto-Insert Locations.
5. Set Location to Site Body.
6. Paste the body code above into the editor.
7. Replace GTM-XXXXXXX with your Container ID.
8. Click Save & Close.

The Site Body location puts the code right after the opening <body> tag, where Google expects it.

Check that it works

1. Open your container in Tag Manager and click Preview.
2. Enter your site's address and connect.

Tag Assistant shows the container firing on your page, with every tag inside it. You can also view your page source and search for GTM-: you should find both the head script and the body code. If Preview can't connect, check that both snippets are published and that the Container ID matches in both.

To add Google Analytics without Tag Manager, see Add Google Analytics to Joomla. To learn more about how HTML snippets work, read the HTML snippet docs.