Introduction
Google Analytics (GA) and Google Tag Manager (GTM) are frequently used interchangeably but they are used to achieve other objectives :
- Google Analytics (GA) is a reporting system that assists in the following behavior of users (page views, clicks, sessions, conversions, etc.).
- Google Tag Manager (GTM) is a tag management tool that allows you to add and maintain multiple marketing/analytics tags (including GA) without needing to constantly make changes to the code of your site.
In Liferay there are two widespread choices :
- Add your Google Analytics ID directly using Liferay built in Analytics set-up.
- When you require Tag Manager to use <script> + <noscript> snippets, use a Client Extension to inject GTM scripts.
The blog will take you through either of these methods.
Prerequisites
- Liferay 7.4 DXP
- Java 11
Option 1 : Adding Google Analytics via Liferay Analytics Settings (Recommended)
Liferay has a default Analytics configuration, and it is extremely easy to enter your Google Analytics tracking ID. You do not have to manually inject the scripts.
Steps to Add Google Analytics :
- Log in to Liferay as an Administrator.
- Go to Site Settings → Analytics (or Control Panel → Configuration → Instance Settings → Analytics, depending on your version).
- You’ll see fields like :
- Google Analytics 4 ID → enter your GA4 Measurement ID (G-XXXXXXX).
- Google Analytics 4 Custom Configuration → optional advanced settings (e.g., anonymize IP).
- Google Analytics ID → if you’re still using Universal Analytics (UA-XXXXXX).
Save the configuration.
Option 2 : Adding Google Tag Manager (GTM) via Client Extension
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.
Steps to Add Google Tag Manager :
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
There are two ways to add analytics to your Liferay site :
- In case you only require Google Analytics (GA4), make use of the Analytics in Liferay. It is less complicated and only needs to enter in your GA ID, and it automatically adds the tracking script to the correct position.
- Google Tag Manager (GTM) should be used in case you need to manage numerous marketing tags. To do this you will need to add the script and noscript snippet, which can be done using a JS Client Extension.
These two strategies will enable you to monitor and streamline user behavior, but which one is better depends on whether you require a simple feature of GA or a comprehensive tag management system.
