Google Tag Manager on Magnolia CMS | OpsBlu Docs

Google Tag Manager on Magnolia CMS

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

For general GTM concepts, see Google Tag Manager Overview

Overview

Magnolia CMS uses Freemarker templates. Add GTM via a Light Module (YAML-based, no Java required) or by editing your theme's base template.

Prerequisites

Installation

Where to Add GTM Code

Light Modules approach: Create light-modules/your-module/templates/pages/gtm.yaml with an area for the GTM snippet. Or edit your base Freemarker template (templates/pages/base.ftl) to include the GTM snippets in <head> and <body>.

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.

Magnolia CMS-Specific Considerations

Magnolia's Light Modules allow YAML+Freemarker additions without Java deployments. This is the preferred approach for GTM — create a decorator template that injects GTM into every page without modifying core templates.

Template System

Magnolia CMS uses Freemarker (FTL) templates and Light Modules (YAML). 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

返回顶部