Google Tag Manager on Spree Commerce | OpsBlu Docs

Google Tag Manager on Spree Commerce

How to install and configure Google Tag Manager on Spree Commerce. Covers installation method, container setup, verification, and Spree...

For general GTM concepts, see Google Tag Manager Overview

Overview

Spree Commerce is a Ruby on Rails e-commerce framework. Add GTM by editing the application layout or using an extension.

Prerequisites

Installation

Where to Add GTM Code

Edit app/views/spree/layouts/spree_application.html.erb — add head snippet in <head> section and body snippet after <body> tag. For Spree 4.x with Storefront, edit app/views/layouts/spree/storefront.html.erb.

Plugin / Extension

The spree_google_tag_manager gem adds GTM integration with automatic ecommerce data layer events. Add to Gemfile: gem 'spree_google_tag_manager'.

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.

Spree Commerce-Specific Considerations

Spree uses Turbolinks/Turbo for page transitions (no full reloads). Add a History Change trigger in GTM or listen for turbo:load events to track page views on navigation.

Template System

Spree Commerce uses ERB templates (Ruby on Rails). 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

Nach oben