Google Tag Manager on Liferay: Install Guide | OpsBlu Docs

Google Tag Manager on Liferay: Install Guide

How to install and configure Google Tag Manager on Liferay. Covers installation method, container setup, verification, and Liferay-specific considerations.

For general GTM concepts, see Google Tag Manager Overview

Overview

Liferay is a Java-based enterprise platform. Add GTM through Control Panel settings or custom theme development.

Prerequisites

Installation

Where to Add GTM Code

Control Panel → Configuration → System Settings → JavaScript → paste head snippet in the JavaScript in Every Page - Head Top field. For the body snippet, edit your theme's portal_normal.ftl or use Configuration → Instance Settings → JavaScript

GTM Head Snippet

Add this in the <head> section:

<!-- 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 -->

GTM Body Snippet

Add this immediately after the opening <body> tag:

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

Replace GTM-XXXXXXX with your actual Container ID in both snippets.

Liferay-Specific Considerations

Liferay 7.x/DXP uses OSGi bundles for themes. The admin JavaScript injection fields are the easiest approach. For production, create a proper theme module to ensure GTM survives upgrades. Clear the Liferay cache after changes: Control Panel → Server Administration → Clean Up Actions → Execute.

Template System

Liferay uses Freemarker templates (FTL) in theme WARs/OSGi modules. When editing templates directly, note that the GTM JavaScript snippet (inside <script> tags) will not conflict with the template engine's syntax.

Verification

After installation, verify GTM is working:

  1. GTM Preview Mode — In GTM, click Preview, enter your site URL, and verify the container loads.
  2. Browser Console — Open DevTools (F12) and run console.log(window.google_tag_manager). You should see an object (not undefined).
  3. Network Tab — Filter for googletagmanager.com and verify gtm.js loads with a 200 response.
  4. Data Layer Check — Run console.log(window.dataLayer) to verify the data layer array exists.

Next Steps

返回顶部