spree_google_analytics 1.0.0 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6c60f82dafa6c0ddced33284212aab54aaee082b7f2099cfd864e709774b3a54
-  data.tar.gz: a0fa0447fa1a82e9ddf06c4b1eb9153bc72e92206dd5a085c2d6f3f1334320c9
+  metadata.gz: 19ff839e89a8bdedb1da8ed93fa302c690211e56ab199beaae23278d51178af8
+  data.tar.gz: c55371fada9e8c6d34b82f7bf05ceed492180b492e8b141bee7748846a46c207
 SHA512:
-  metadata.gz: 4e7f62f44a99df591d50f0f77fec46088f47bc64e598567beb94a661949527d2c8a839c5311635d8a2bffbd70a47be02e4223bb3baf0643de25710abffc1a151
-  data.tar.gz: 84ed673c296694e8cfe422fcd99413ce4547db6d62a0ba7853f988a473b94ff270be41b173b943f0ce5a63923caac14dca73f32beb67482be2e20a7c02f119e3
+  metadata.gz: '0210987ac97d38ad1e72814a4eb391d2a887fea4af5c15ba429999b0d67ffe08da54d7f04b79a9f67445f7fcf36efa5137331209125e11fa288c30de4e2d35d7'
+  data.tar.gz: d777ce1865934d4739ec7c1c1c537b9e5b6987ffa88ba4accd47c5f0372281b8b8e8eb5564639b02d49365526a64cc60c3367633327fd60d1551cf4275e44e17

data/README.md

@@ -1,6 +1,31 @@
-# Spree Google analytics
+# Google Analytics 4 integration for Spree Commerce
 
-This is a Google analytics extension for [Spree Commerce](https://spreecommerce.org), an open source e-commerce platform built with Ruby on Rails.
+This is a Google Analytics 4 extension for [Spree Commerce](https://spreecommerce.org) - the [open-source eCommerce platform](https://spreecommerce.org) for [Rails](https://spreecommerce.org/category/ruby-on-rails/). 
+
+This [Google Analytics 4 integration for Spree Commerce](https://spreecommerce.org/docs/integrations/analytics/google-analytics) allows you to track user behavior, sales performance, and marketing effectiveness across your store. 
+
+With minimal setup required, you can gain valuable insights into how visitors interact with your site, which can help you make informed decisions to improve conversions, user experience, and overall business strategy.
+
+> [!NOTE]
+> To set up the Google Analytics integration, you must have a Google Analytics account and an associated property.
+
+## Event Tracking
+
+By default, the following events will be tracked in Google Analytics 4:
+- page_view
+- first_visit
+- session_start
+- user_engagement
+- search
+- add_payment_info
+- add_shipping_info
+- add_to_cart
+- add_to_wishlist
+- begin_checkout
+- purchase
+- remove_from_cart
+- view_cart
+- view_item
 
 ## Installation
 
@@ -20,6 +45,10 @@ This is a Google analytics extension for [Spree Commerce](https://spreecommerce.
 
   If your server was running, restart it so that it can find the assets properly.
 
+## Setup
+
+Please follow [our setup guide](https://spreecommerce.org/docs/integrations/analytics/google-analytics) to start tracking all events in Google Analytics dashboard.
+
 ## Developing
 
 1. Create a dummy app
@@ -59,3 +88,15 @@ If you'd like to contribute, please take a look at the
 pull request.
 
 Copyright (c) 2025 [name of extension creator], released under the New BSD License
+
+## Join the Community 
+
+[Join our Slack](https://slack.spreecommerce.org) to meet other 6k+ community members and get some support.
+
+## Need more support?
+
+[Contact us](https://spreecommerce.org/contact/) for enterprise support and custom development services. We offer:
+  * migrations and upgrades,
+  * delivering your Spree application,
+  * optimizing your Spree stack.
+

data/app/assets/config/spree_google_analytics_manifest.js

@@ -1 +1,5 @@
 //= link_tree ../images
+//= link spree_google_analytics/application.js
+//= link_tree ../../javascript/spree_google_analytics/controllers .js
+//= link_tree ../../../vendor/javascript .js
+//= link_tree ../../../vendor/stylesheets .css

data/app/controllers/spree_google_analytics/store_controller_decorator.rb

@@ -7,3 +7,14 @@ module SpreeGoogleAnalytics
 end
 
 Spree::StoreController.prepend(SpreeGoogleAnalytics::StoreControllerDecorator) if defined?(Spree::StoreController)
+
+# include in Devise controllers
+if defined?(Spree::UserSessionsController)
+  Spree::UserSessionsController.prepend(SpreeGoogleAnalytics::StoreControllerDecorator)
+end
+if defined?(Spree::UserRegistrationsController)
+  Spree::UserRegistrationsController.prepend(SpreeGoogleAnalytics::StoreControllerDecorator)
+end
+if defined?(Spree::UserPasswordsController)
+  Spree::UserPasswordsController.prepend(SpreeGoogleAnalytics::StoreControllerDecorator)
+end

data/app/helpers/spree_google_analytics/base_helper.rb

@@ -1,9 +1,11 @@
 module SpreeGoogleAnalytics
   module BaseHelper
-    def google_analytics_checkout_json
-      return unless @order.present?
+    def google_analytics_client_type
+      @google_analytics_client_type ||= store_integration('google_analytics')&.preferred_client
+    end
 
-      @google_analytics_checkout_json ||= SpreeGoogleAnalytics::CheckoutPresenter.new(order: @order).call.to_json.html_safe
+    def use_gtm?
+      google_analytics_client_type == 'gtm'
     end
 
     def google_analytics_add_shipping_info_json(shipment)
@@ -21,60 +23,206 @@ module SpreeGoogleAnalytics
       }.to_json.html_safe
     end
 
-    def google_analytics_payment_json
-      return unless @order.present?
-
-      @google_analytics_payment_json ||= SpreeGoogleAnalytics::PaymentPresenter.new(order: @order).call.to_json.html_safe
-    end
-
-    def google_analytics_purchase_json
-      return unless @order.present?
 
-      @google_analytics_purchase_json ||= SpreeGoogleAnalytics::OrderPresenter.new(order: @order).call.to_json.html_safe
-    end
 
     def google_analytics_view_item_json(variant = nil)
       variant ||= @selected_variant || @variant_from_options || @product&.default_variant
       return unless variant.present?
 
+      if use_gtm?
+        google_analytics_gtm_view_item_json(variant)
+      else
+        {
+          currency: current_currency,
+          value: variant.amount_in(current_currency).to_f,
+          items: [
+            SpreeGoogleAnalytics::ProductPresenter.new(
+              store_name: current_store.name,
+              resource: variant,
+              quantity: 1
+            ).call
+          ]
+        }.to_json.html_safe
+      end
+    end
+
+    def google_analytics_gtm_view_item_json(variant)
       {
-        currency: current_currency,
-        value: variant.amount_in(current_currency).to_f,
-        items: [
-          SpreeGoogleAnalytics::ProductPresenter.new(
-            store_name: current_store.name,
-            resource: variant,
-            quantity: 1
-          ).call
-        ]
+        event: 'view_item',
+        ecommerce: {
+          currency: current_currency,
+          value: variant.amount_in(current_currency).to_f,
+          items: [
+            SpreeGoogleAnalytics::ProductPresenter.new(
+              store_name: current_store.name,
+              resource: variant,
+              quantity: 1
+            ).call
+          ]
+        }
       }.to_json.html_safe
     end
 
     def google_analytics_cart_event_json(line_item, quantity, position)
+      if use_gtm?
+        google_analytics_gtm_cart_event_json(line_item, quantity, position)
+      else
+        {
+          currency: line_item.currency,
+          value: line_item.amount.to_f,
+          items: [
+            SpreeGoogleAnalytics::ProductPresenter.new(
+              resource: line_item,
+              quantity: quantity,
+              position: position
+            ).call
+          ]
+        }.to_json.html_safe
+      end
+    end
+
+    def google_analytics_gtm_cart_event_json(line_item, quantity, position)
+      {
+        event: 'add_to_cart',
+        ecommerce: {
+          currency: line_item.currency,
+          value: line_item.amount.to_f,
+          items: [
+            SpreeGoogleAnalytics::ProductPresenter.new(
+              resource: line_item,
+              quantity: quantity,
+              position: position
+            ).call
+          ]
+        }
+      }.to_json.html_safe
+    end
+
+    def google_analytics_remove_from_cart_event_json(line_item, quantity, position)
+      if use_gtm?
+        google_analytics_gtm_remove_from_cart_event_json(line_item, quantity, position)
+      else
+        google_analytics_cart_event_json(line_item, quantity, position)
+      end
+    end
+
+    def google_analytics_gtm_remove_from_cart_event_json(line_item, quantity, position)
       {
-        currency: line_item.currency,
-        value: line_item.amount.to_f,
-        items: [
-          SpreeGoogleAnalytics::ProductPresenter.new(
-            resource: line_item,
-            quantity: quantity,
-            position: position
-          ).call
-        ]
+        event: 'remove_from_cart',
+        ecommerce: {
+          currency: line_item.currency,
+          value: line_item.amount.to_f,
+          items: [
+            SpreeGoogleAnalytics::ProductPresenter.new(
+              resource: line_item,
+              quantity: quantity,
+              position: position
+            ).call
+          ]
+        }
       }.to_json.html_safe
     end
 
     def google_analytics_add_to_wishlist_event_json(variant)
+      if use_gtm?
+        google_analytics_gtm_add_to_wishlist_event_json(variant)
+      else
+        {
+          currency: current_currency,
+          value: variant.amount_in(current_currency),
+          items: [
+            SpreeGoogleAnalytics::ProductPresenter.new(
+              store_name: current_store.name,
+              resource: variant,
+              quantity: 1
+            ).call
+          ]
+        }.to_json.html_safe
+      end
+    end
+
+    def google_analytics_gtm_add_to_wishlist_event_json(variant)
       {
-        currency: current_currency,
-        value: variant.amount_in(current_currency),
-        items: [
-          SpreeGoogleAnalytics::ProductPresenter.new(
-            store_name: current_store.name,
-            resource: variant,
-            quantity: 1
-          ).call
-        ]
+        event: 'add_to_wishlist',
+        ecommerce: {
+          currency: current_currency,
+          value: variant.amount_in(current_currency),
+          items: [
+            SpreeGoogleAnalytics::ProductPresenter.new(
+              store_name: current_store.name,
+              resource: variant,
+              quantity: 1
+            ).call
+          ]
+        }
+      }.to_json.html_safe
+    end
+
+    def google_analytics_checkout_json
+      return unless @order.present?
+
+      if use_gtm?
+        google_analytics_gtm_checkout_json
+      else
+        @google_analytics_checkout_json ||= SpreeGoogleAnalytics::CheckoutPresenter.new(order: @order).call.to_json.html_safe
+      end
+    end
+
+    def google_analytics_gtm_checkout_json
+      @google_analytics_gtm_checkout_json ||= {
+        event: 'begin_checkout',
+        ecommerce: SpreeGoogleAnalytics::CheckoutPresenter.new(order: @order).call
+      }.to_json.html_safe
+    end
+
+    def google_analytics_purchase_json
+      return unless @order.present?
+
+      if use_gtm?
+        google_analytics_gtm_purchase_json
+      else
+        @google_analytics_purchase_json ||= SpreeGoogleAnalytics::OrderPresenter.new(order: @order).call.to_json.html_safe
+      end
+    end
+
+    def google_analytics_gtm_purchase_json
+      @google_analytics_gtm_purchase_json ||= {
+        event: 'purchase',
+        ecommerce: SpreeGoogleAnalytics::OrderPresenter.new(order: @order).call
+      }.to_json.html_safe
+    end
+
+    def google_analytics_payment_json
+      return unless @order.present?
+
+      if use_gtm?
+        google_analytics_gtm_payment_json
+      else
+        @google_analytics_payment_json ||= SpreeGoogleAnalytics::PaymentPresenter.new(order: @order).call.to_json.html_safe
+      end
+    end
+
+    def google_analytics_gtm_payment_json
+      @google_analytics_gtm_payment_json ||= {
+        event: 'add_payment_info',
+        ecommerce: SpreeGoogleAnalytics::PaymentPresenter.new(order: @order).call
+      }.to_json.html_safe
+    end
+
+    def google_analytics_view_cart_json
+      return unless @order.present?
+
+      if use_gtm?
+        google_analytics_gtm_view_cart_json
+      else
+        @google_analytics_view_cart_json ||= SpreeGoogleAnalytics::CheckoutPresenter.new(order: @order).call.to_json.html_safe
+      end
+    end
+
+    def google_analytics_gtm_view_cart_json
+      @google_analytics_gtm_view_cart_json ||= {
+        event: 'view_cart',
+        ecommerce: SpreeGoogleAnalytics::CheckoutPresenter.new(order: @order).call
       }.to_json.html_safe
     end
   end

data/app/javascript/spree_google_analytics/application.js

@@ -0,0 +1,16 @@
+import '@hotwired/turbo-rails'
+import { Application } from '@hotwired/stimulus'
+
+let application
+
+if (typeof window.Stimulus === "undefined") {
+  application = Application.start()
+  application.debug = false
+  window.Stimulus = application
+} else {
+  application = window.Stimulus
+}
+
+import SpreeGoogleAnalyticsController from 'spree_google_analytics/controllers/spree_google_analytics_controller'
+
+application.register('spree_google_analytics', SpreeGoogleAnalyticsController)

data/app/javascript/spree_google_analytics/controllers/spree_google_analytics_controller.js

@@ -0,0 +1,4 @@
+import { Controller } from "@hotwired/stimulus";  
+
+export default class extends Controller {
+}

data/app/models/spree/integrations/google_analytics.rb

@@ -2,8 +2,12 @@ module Spree
   module Integrations
     class GoogleAnalytics < Spree::Integration
       preference :measurement_id, :string
+      preference :google_tag_manager_id, :string
+      preference :client, :string, default: 'ga4'
 
-      validates :preferred_measurement_id, presence: true
+      validates :preferred_measurement_id, presence: true, if: -> { preferred_client == 'ga4' }
+      validates :preferred_google_tag_manager_id, presence: true, if: -> { preferred_client == 'gtm' }
+      validates :preferred_client, inclusion: { in: %w[ga4 gtm] }
 
       def self.integration_group
         'analytics'

data/app/views/spree/admin/integrations/forms/_google_analytics.html.erb

@@ -1,16 +1,22 @@
-<div class="col-12 col-md-6 p-0">
-  <div class="card mb-4">
-    <div class="card-body">
-      <% if @integration.persisted? %>
-        <div class="alert alert-warning">
-          <%= Spree.t('admin.integrations.google_analytics.reports_warning') %>
-        </div>
-      <% end %>
+<div class="card mb-4">
+  <div class="card-body" data-controller="reveal">
+    <% if @integration.persisted? %>
+      <div class="alert alert-warning">
+        <%= Spree.t('admin.integrations.google_analytics.reports_warning') %>
+      </div>
+    <% end %>
 
+    <%= form.spree_collection_select "preferred_client", [['Google Analytics 4', 'ga4'], ['Google Tag Manager', 'gtm']], :last, :first, { selected: @integration.preferred_client, label: Spree.t('admin.integrations.google_analytics.client'), help: Spree.t('admin.integrations.google_analytics.client_help') }, { data: { action: 'change->reveal#toggle' } } %>
+
+    <div data-reveal-target="item">
       <%= preference_field(@integration, form, 'measurement_id', i18n_scope: 'admin.integrations.google_analytics') %>
-      <p class="mb-0 mt-2">
-        <%= external_link_to 'Where to find my Measurement ID?', 'https://support.google.com/analytics/answer/12270356' %>
-      </p>
+      <%= external_link_to 'Where to find my Measurement ID?', 'https://support.google.com/analytics/answer/12270356' %>
     </div>
+
+    <div class="hidden" data-reveal-target="item">
+      <%= preference_field(@integration, form, 'google_tag_manager_id', i18n_scope: 'admin.integrations.google_analytics') %>
+      <%= external_link_to 'Where to find my Google Tag Manager ID?', 'https://support.google.com/tagmanager/answer/6107028' %>
+      </div>
   </div>
 </div>
+

data/app/views/spree_google_analytics/_add_to_cart.html.erb

@@ -1,9 +1,15 @@
 <% if store_integration('google_analytics').present? %>
   <script>
-    if (window.gtag) {
-      <% safely do %>
-        gtag('event', 'add_to_cart', <%= google_analytics_cart_event_json(@line_item, @line_item.quantity, @order.line_items.pluck(:id).index(@line_item.id) + 1) %>);
+    <% safely do %>
+      <% if use_gtm? %>
+        if (window.dataLayer) {
+          dataLayer.push(<%= google_analytics_cart_event_json(@line_item, @line_item.quantity, @order.line_items.pluck(:id).index(@line_item.id) + 1) %>);
+        }
+      <% else %>
+        if (window.gtag) {
+          gtag('event', 'add_to_cart', <%= google_analytics_cart_event_json(@line_item, @line_item.quantity, @order.line_items.pluck(:id).index(@line_item.id) + 1) %>);
+        }
       <% end %>
-    }
+    <% end %>
   </script>
 <% end %>

data/app/views/spree_google_analytics/_add_to_wishlist.erb

@@ -1,9 +1,15 @@
 <% if store_integration('google_analytics').present? && @wished_item&.variant.present? %>
   <script>
-    if (window.gtag) {
-      <% safely do %>
-        gtag('event', 'add_to_wishlist', <%= google_analytics_add_to_wishlist_event_json(@wished_item.variant) %>);
+    <% safely do %>
+      <% if use_gtm? %>
+        if (window.dataLayer) {
+          dataLayer.push(<%= google_analytics_add_to_wishlist_event_json(@wished_item.variant) %>);
+        }
+      <% else %>
+        if (window.gtag) {
+          gtag('event', 'add_to_wishlist', <%= google_analytics_add_to_wishlist_event_json(@wished_item.variant) %>);
+        }
       <% end %>
-    }
+    <% end %>
   </script>
 <% end %>

data/app/views/spree_google_analytics/_body_end.html.erb

@@ -1,27 +1,61 @@
 <% if store_integration('google_analytics').present? %>
-  <script>
-    if (window.gtag) {
-      <% if controller_name == 'checkout' %>
-        <% if @order && session[:checkout_started] %>
-          <% safely do %>
-            gtag('event', 'begin_checkout', <%= google_analytics_checkout_json %>);
+  <% if use_gtm? %>
+    <script>
+      if (window.dataLayer) {
+        <% if controller_name == 'checkout' %>
+          <% if @order && session[:checkout_started] %>
+            <% safely do %>
+              dataLayer.push(<%= google_analytics_checkout_json %>);
+            <% end %>
+          <% end %>
+
+          <% if @order && session[:checkout_step_completed] == 'delivery' %>
+            <% safely do %>
+              <% @order.shipments.each do |shipment| %>
+                dataLayer.push({
+                  event: 'add_shipping_info',
+                  ecommerce: <%= google_analytics_add_shipping_info_json(shipment) %>
+                });
+              <% end %>
+            <% end %>
           <% end %>
         <% end %>
 
-        <% if @order && session[:checkout_step_completed] == 'delivery' %>
+        <% if controller_name == 'search' && action_name == 'show' && query.present? %>
           <% safely do %>
-            <% @order.shipments.each do |shipment| %>
-              gtag('event', 'add_shipping_info', <%= google_analytics_add_shipping_info_json(shipment) %>);
+            dataLayer.push({
+              event: 'search',
+              search_term: "<%= ERB::Util.html_escape(query) %>"
+            });
+          <% end %>
+        <% end %>
+      }
+    </script>
+  <% else %>
+    <script>
+      if (window.gtag) {
+        <% if controller_name == 'checkout' %>
+          <% if @order && session[:checkout_started] %>
+            <% safely do %>
+              gtag('event', 'begin_checkout', <%= google_analytics_checkout_json %>);
+            <% end %>
+          <% end %>
+
+          <% if @order && session[:checkout_step_completed] == 'delivery' %>
+            <% safely do %>
+              <% @order.shipments.each do |shipment| %>
+                gtag('event', 'add_shipping_info', <%= google_analytics_add_shipping_info_json(shipment) %>);
+              <% end %>
             <% end %>
           <% end %>
         <% end %>
-      <% end %>
 
-      <% if controller_name == 'search' && action_name == 'show' && query.present? %>
-        <% safely do %>
-          gtag('event', 'search', <%= raw({ search_term: ERB::Util.html_escape(query) }.to_json) %>);
+        <% if controller_name == 'search' && action_name == 'show' && query.present? %>
+          <% safely do %>
+            gtag('event', 'search', <%= raw({ search_term: ERB::Util.html_escape(query) }.to_json) %>);
+          <% end %>
         <% end %>
-      <% end %>
-    }
-  </script>
+      }
+    </script>
+  <% end %>
 <% end %>

data/app/views/spree_google_analytics/_body_start.html.erb

@@ -0,0 +1,6 @@
+<% if store_integration('google_analytics').present? && use_gtm? %>
+  <!-- Google Tag Manager (noscript) -->
+  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=<%= store_integration('google_analytics').preferred_google_tag_manager_id %>"
+  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+  <!-- End Google Tag Manager (noscript) -->
+<% end %>

data/app/views/spree_google_analytics/_cart.html.erb

@@ -1,11 +1,19 @@
 <% if store_integration('google_analytics').present? %>
   <script>
-    if (window.gtag) {
-      <% if @order.present? && @line_items.any? %>
-        window.addEventListener('slideover:open', () => {
-          gtag('event', 'view_cart', <%= google_analytics_checkout_json %>);
-        })
+    <% if @order.present? && @line_items.any? %>
+      <% if use_gtm? %>
+        if (window.dataLayer) {
+          window.addEventListener('slideover:open', () => {
+            dataLayer.push(<%= google_analytics_view_cart_json %>);
+          })
+        }
+      <% else %>
+        if (window.gtag) {
+          window.addEventListener('slideover:open', () => {
+            gtag('event', 'view_cart', <%= google_analytics_view_cart_json %>);
+          })
+        }
       <% end %>
-    }
+    <% end %>
   </script>
 <% end %>

data/app/views/spree_google_analytics/_checkout_complete.html.erb

@@ -1,15 +1,29 @@
 <% if store_integration('google_analytics').present? %>
   <script>
-    if (window.gtag) {
-      <% safely do %>
-        <% if @order.user.present? %>
-          gtag('set', 'user_id', "<%= @order.reload.user_id %>");
-          gtag('set', 'user_properties', <%= google_analytics_user_properties_json(@order.user) %>);
-        <% end %>
+    <% safely do %>
+      <% if use_gtm? %>
+        if (window.dataLayer) {
+          <% if @order.user.present? %>
+            dataLayer.push({
+              user_id: "<%= @order.reload.user_id %>",
+              user_properties: <%= google_analytics_user_properties_json(@order.user) %>
+            });
+          <% end %>
 
-        gtag('event', 'add_payment_info', <%= google_analytics_payment_json %>);
-        gtag('event', 'purchase', <%= google_analytics_purchase_json %>);
+          dataLayer.push(<%= google_analytics_payment_json %>);
+          dataLayer.push(<%= google_analytics_purchase_json %>);
+        }
+      <% else %>
+        if (window.gtag) {
+          <% if @order.user.present? %>
+            gtag('set', 'user_id', "<%= @order.reload.user_id %>");
+            gtag('set', 'user_properties', <%= google_analytics_user_properties_json(@order.user) %>);
+          <% end %>
+
+          gtag('event', 'add_payment_info', <%= google_analytics_payment_json %>);
+          gtag('event', 'purchase', <%= google_analytics_purchase_json %>);
+        }
       <% end %>
-    }
+    <% end %>
   </script>
 <% end %>

data/app/views/spree_google_analytics/_head.html.erb

@@ -1,34 +1,55 @@
 <% if store_integration('google_analytics').present? %>
-  <!-- Google tag (gtag.js) -->
-  <script async src="https://www.googletagmanager.com/gtag/js?id=<%= store_integration('google_analytics').preferred_measurement_id %>"></script>
-  <script>
-    window.dataLayer = window.dataLayer || [];
-    function gtag(){dataLayer.push(arguments);}
+  <% if use_gtm? %>
+    <!-- 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','<%= store_integration('google_analytics').preferred_google_tag_manager_id %>');</script>
+    <!-- End Google Tag Manager -->
+    
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      
+      <% if try_spree_current_user %>
+        dataLayer.push({
+          user_id: "<%= try_spree_current_user.id %>",
+          user_properties: <%= google_analytics_user_properties_json(try_spree_current_user) %>
+        });
+      <% end %>
+    </script>
+  <% else %>
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=<%= store_integration('google_analytics').preferred_measurement_id %>"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
 
-    <% if defined?(store_integration('cookie_first')) && store_integration('cookie_first').present? %>
-      gtag('consent', 'default', {
-      'ad_storage': 'denied',
-      'ad_user_data': 'denied',
-      'ad_personalization': 'denied',
-      'analytics_storage': 'denied',
-      'functionality_storage': 'denied',
-      'security_storage': 'granted',
-      'wait_for_update': 2000
-      });
-    <% end %>
+      <% if defined?(store_integration('cookie_first')) && store_integration('cookie_first').present? %>
+        gtag('consent', 'default', {
+        'ad_storage': 'denied',
+        'ad_user_data': 'denied',
+        'ad_personalization': 'denied',
+        'analytics_storage': 'denied',
+        'functionality_storage': 'denied',
+        'security_storage': 'granted',
+        'wait_for_update': 2000
+        });
+      <% end %>
 
-    gtag('js', new Date());
-    GA_MEASUREMENT_ID = "<%= store_integration('google_analytics').preferred_measurement_id %>";
+      gtag('js', new Date());
+      GA_MEASUREMENT_ID = "<%= store_integration('google_analytics').preferred_measurement_id %>";
 
-    <% if ENV['GA_DEBUG_MODE'].present? %>
-      gtag('config', GA_MEASUREMENT_ID, { "debug_mode": true });
-    <% else %>
-      gtag('config', GA_MEASUREMENT_ID);
-    <% end %>
+      <% if ENV['GA_DEBUG_MODE'].present? %>
+        gtag('config', GA_MEASUREMENT_ID, { "debug_mode": true });
+      <% else %>
+        gtag('config', GA_MEASUREMENT_ID);
+      <% end %>
 
-    <% if try_spree_current_user %>
-      gtag('set', 'user_id', "<%= try_spree_current_user.id %>");
-      gtag('set', 'user_properties', <%= google_analytics_user_properties_json(try_spree_current_user) %>);
-    <% end %>
-  </script>
+      <% if try_spree_current_user %>
+        gtag('set', 'user_id', "<%= try_spree_current_user.id %>");
+        gtag('set', 'user_properties', <%= google_analytics_user_properties_json(try_spree_current_user) %>);
+      <% end %>
+    </script>
+  <% end %>
 <% end %>

data/app/views/spree_google_analytics/_product.html.erb

@@ -1,7 +1,13 @@
 <% if store_integration('google_analytics').present? %>
   <script>
-    if (window.gtag) {
-      gtag('event', 'view_item', <%= google_analytics_view_item_json %>);
-    }
+    <% if use_gtm? %>
+      if (window.dataLayer) {
+        dataLayer.push(<%= google_analytics_view_item_json %>);
+      }
+    <% else %>
+      if (window.gtag) {
+        gtag('event', 'view_item', <%= google_analytics_view_item_json %>);
+      }
+    <% end %>
   </script>
 <% end %>

data/app/views/spree_google_analytics/_remove_from_cart.html.erb

@@ -1,9 +1,15 @@
 <% if store_integration('google_analytics').present? %>
   <script>
-    if (window.gtag) {
-      <% safely do %>
-        gtag('event', 'remove_from_cart', <%= google_analytics_cart_event_json(@line_item, @line_item.quantity, nil) %>);
+    <% safely do %>
+      <% if use_gtm? %>
+        if (window.dataLayer) {
+          dataLayer.push(<%= google_analytics_remove_from_cart_event_json(@line_item, @line_item.quantity, nil) %>);
+        }
+      <% else %>
+        if (window.gtag) {
+          gtag('event', 'remove_from_cart', <%= google_analytics_remove_from_cart_event_json(@line_item, @line_item.quantity, nil) %>);
+        }
       <% end %>
-    }
+    <% end %>
   </script>
 <% end %>

data/config/importmap.rb

@@ -0,0 +1,6 @@
+pin 'application-spree_google_analytics', to: 'spree_google_analytics/application.js', preload: false
+
+pin_all_from SpreeGoogleAnalytics::Engine.root.join('app/javascript/spree_google_analytics/controllers'),
+             under: 'spree_google_analytics/controllers',
+             to:    'spree_google_analytics/controllers',
+             preload: 'application-spree_google_analytics'

data/config/initializers/spree.rb

@@ -3,6 +3,7 @@ Rails.application.config.after_initialize do
 
   if Rails.application.config.respond_to?(:spree_storefront)
     Rails.application.config.spree_storefront.head_partials << 'spree_google_analytics/head'
+    Rails.application.config.spree_storefront.body_start_partials << 'spree_google_analytics/body_start'
     Rails.application.config.spree_storefront.body_end_partials << 'spree_google_analytics/body_end'
 
     Rails.application.config.spree_storefront.cart_partials << 'spree_google_analytics/cart'

data/config/locales/en.yml

@@ -8,3 +8,6 @@ en:
           reports_warning: It can take up to 48 hours for the data to appear in standard reports
           measurement_id: Measurement ID
           api_secret: API Secret
+          google_tag_manager_id: Google Tag Manager ID
+          client: Client Type
+          client_help: Choose between Google Analytics 4 (direct gtag.js implementation) or Google Tag Manager (dataLayer events)

data/lib/spree_google_analytics/engine.rb

@@ -14,7 +14,18 @@ module SpreeGoogleAnalytics
     end
 
     initializer 'spree_google_analytics.assets' do |app|
-      app.config.assets.precompile += %w[spree_google_analytics_manifest]
+      if app.config.respond_to?(:assets)
+        app.config.assets.paths << root.join('app/javascript')
+        app.config.assets.paths << root.join('vendor/javascript')
+        app.config.assets.paths << root.join('vendor/stylesheets')
+        app.config.assets.precompile += %w[spree_google_analytics_manifest]
+      end
+    end
+
+    initializer 'spree_google_analytics.importmap', before: 'importmap' do |app|
+      app.config.importmap.paths << root.join('config/importmap.rb')
+      # https://github.com/rails/importmap-rails?tab=readme-ov-file#sweeping-the-cache-in-development-and-test
+      app.config.importmap.cache_sweepers << root.join('app/javascript')
     end
 
     def self.activate

data/lib/spree_google_analytics/version.rb

@@ -1,5 +1,5 @@
 module SpreeGoogleAnalytics
-  VERSION = '1.0.0'.freeze
+  VERSION = '1.1.0'.freeze
 
   def gem_version
     Gem::Version.new(VERSION)

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: spree_google_analytics
 version: !ruby/object:Gem::Version
-  version: 1.0.0
+  version: 1.1.0
 platform: ruby
 authors:
 - Vendo Connect Inc.
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-05-20 00:00:00.000000000 Z
+date: 2025-11-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: spree
@@ -79,6 +79,8 @@ files:
 - app/assets/images/integration_icons/google-analytics-logo.png
 - app/controllers/spree_google_analytics/store_controller_decorator.rb
 - app/helpers/spree_google_analytics/base_helper.rb
+- app/javascript/spree_google_analytics/application.js
+- app/javascript/spree_google_analytics/controllers/spree_google_analytics_controller.js
 - app/models/spree/integrations/google_analytics.rb
 - app/presenters/spree_google_analytics/checkout_presenter.rb
 - app/presenters/spree_google_analytics/order_presenter.rb
@@ -88,11 +90,13 @@ files:
 - app/views/spree_google_analytics/_add_to_cart.html.erb
 - app/views/spree_google_analytics/_add_to_wishlist.erb
 - app/views/spree_google_analytics/_body_end.html.erb
+- app/views/spree_google_analytics/_body_start.html.erb
 - app/views/spree_google_analytics/_cart.html.erb
 - app/views/spree_google_analytics/_checkout_complete.html.erb
 - app/views/spree_google_analytics/_head.html.erb
 - app/views/spree_google_analytics/_product.html.erb
 - app/views/spree_google_analytics/_remove_from_cart.html.erb
+- config/importmap.rb
 - config/initializers/spree.rb
 - config/locales/en.yml
 - config/routes.rb