Introduction
Google Tag Manager (GTM) is a powerful tool that simplifies the process of adding, managing, and deploying marketing and analytics tags on your website without requiring constant updates to the website’s code. It allows you to manage all your tags (like Google Analytics, Facebook Pixel, and other third-party scripts) in one place, without having to rely on a developer for every change.
In Liferay, adding GTM to your site can help you track important user interactions, optimize marketing efforts, and improve your site’s performance without the need to modify the core codebase. This blog will guide you through the steps to implement GTM in a Liferay environment using both the <script> and <noscript> tags.
Prerequisites
- Liferay 7.4 DXP
- Java 11
Steps to Add Google Tag Manager
In this guide, we are using Liferay Client Extensions to add Google Tag Manager (GTM) without modifying the theme or requiring direct access to the HTML head. This method allows you to easily manage and deploy GTM across your Liferay pages.
- Create a GTM Account
- If you don’t already have a GTM account, go to the Google Tag Manager website.
- Sign in with your Google account and create a new GTM container. A container holds all the tags for your website or app.
- Once the container is created, Google will provide you with two pieces of code: the <script> tag for the <head> section and the <noscript> tag for the <body> section.
- Obtain the GTM Code
You will receive two snippets from Google:
- The first code (JavaScript) goes inside the <head> section of your site:
<!-- 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', 'GTM-XXXXXXX');
</script>
<!-- End Google Tag Manager -->
- The second code (for users with disabled JavaScript) goes right after the <body> tag
//<!-- Google Tag Manager (noscript) -->
var noscriptTag = document.createElement('noscript');
var iframeTag = document.createElement('iframe');
iframeTag.src = "https://www.googletagmanager.com/ns.html?id=GTM-NHWWPG";
iframeTag.height = "0";
iframeTag.width = "0";
iframeTag.style.display = "none";
iframeTag.style.visibility = "hidden";
noscriptTag.appendChild(iframeTag);
document.body.insertAdjacentElement('afterbegin', noscriptTag);
//<!-- End Google Tag Manager (noscript) -->
- Add the GTM Script in Liferay
There are multiple ways to add GTM code to your Liferay site, depending on your environment and permissions. Here’s how to do it using Client Extension in Page Settings.
- How to add the first code (JavaScript)
- Create a file with .js extension using any text editor and remove the <script> tag.
(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');
- Log in to Liferay as an administrator.
- Upload the file in document and media and copy the path of that file.
- Select client extension from Global Menu.
- Create JS client extension by selecting “Add JS”.
- Give the name and URL that we copied from document ad media.
- Save the client extension.
- Open the Page settings and scroll down to javascript extension section.
- Add the client extension in page head.
- The second code (for users with disabled JavaScript)
- To add the <noscript> part, inject it using JavaScript.
//<!-- Google Tag Manager (noscript) -->
var noscriptTag = document.createElement('noscript');
var iframeTag = document.createElement('iframe');
iframeTag.src = "https://www.googletagmanager.com/ns.html?id=GTM-NHWWPG";
iframeTag.height = "0";
iframeTag.width = "0";
iframeTag.style.display = "none";
iframeTag.style.visibility = "hidden";
noscriptTag.appendChild(iframeTag);
document.body.insertAdjacentElement('afterbegin', noscriptTag);
//<!-- End Google Tag Manager (noscript) -->
- Follow the same steps from 1 to 8 as mentioned for the first code (JavaScript).
- Add the client extension in the page body.
- Save the changes.
Conclusion
Adding Google Tag Manager to your Liferay site is a straightforward process that empowers you to manage tags and tracking more efficiently. Whether you use Liferay’s Custom Scripts, Fragments, or theme customization, implementing GTM ensures you’re able to track and optimize user behavior with minimal code changes.
By following the steps in this guide, you can have GTM up and running quickly, allowing for more flexibility in tracking, marketing, and analytics.
