How to Add Google Tag Manager to Grav CMS

2nd Sep 2022 Eric Stauffer Web Development, Grav CMS

Installing Google Tag Manager to your Grav CMS is very simple, and only requires editing one file in most cases of a standard installation.

Google Tag Manager

The first thing you need to do is head over to tagmanager.google.com and go to Admin > Install Google Tag Manager. You should see two pieces of code that look like this:

Note - you will use your own unique identifier where it says YOUR-GTM-CODE-HERE below.

<!-- Google Tag Manager -->
<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','YOUR-GTM-CODE-HERE');</script>
<!-- End Google Tag Manager -->

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=YOUR-GTM-CODE-HERE"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Grav CMS

With the above codes in hand, open up the base.html.twig file in your child theme. Its likely to be located in ROOT-DIRECTORY-NAME/user/themes/CHILD-THEME-NAME/templates/partials/ depending on your setup.

MAKE SURE YOU ARE EDITING YOUR CHILD THEME

Find the opening <head> and paste the first code block right below it:

scroll down to the opening <body> and paste the second code block immediately after it:

Save the base.html.twig file.

Clear the Cache

If you are utilizing Grav's cache system, make sure to clear it or its possible the changes will not show up immediately. Especially if you want to test it.

For most installs, that is all you will need to do. This will add the Google Tag Manager snippet to the various pages on your website.

Good Luck.