E-commerce platform

Server-Side Tracking for Spree / Solidus

Stop losing conversions to iOS ITP, short-lived cookies, and ad-blockers. TrakSolv hosts a first-party server-side GTM container for your Spree / Solidus store and forwards clean, deduplicated conversions to GA4, Meta CAPI, Google Ads and more. Live in minutes, flat monthly pricing.

No credit card to startFlat monthly pricingNative Spree / Solidus dataLayerGA4 · Meta CAPI · Google Ads
Why it matters for Spree / Solidus

The pixel alone is leaking your data.

Browser-side tracking on Spree / Solidus loses a growing share of conversions. Here's what moving to a server-side setup fixes.

Recover conversions lost to ITP & ad-blockers

On Spree / Solidus, browser-side pixels are throttled by Safari/Firefox ITP, capped 7-day cookies, and blocked outright by ad-blockers and consent walls. Server-side tracking moves the measurement off the browser, so purchases and add-to-carts that the pixel silently drops are recovered and reported.

First-party data, served from your own domain

TrakSolv hosts your Google Tag Manager server container on a subdomain of your Spree / Solidus site. Requests come from a first-party context — they survive 3rd-party cookie deprecation, last far longer than client-side cookies, and look like your own traffic, not a tracker.

Clean, deduplicated conversions to every ad platform

The Spree / Solidus dataLayer fires every GA4 enhanced-ecommerce event with a stable event_id, so your server-side container can forward purchases and add-to-carts to GA4, Meta CAPI, Google Ads Enhanced Conversions, TikTok and more — deduplicated against the browser pixel, with higher match quality.

Step by step

How to set up server-side tracking on Spree / Solidus

Paste the TrakSolv loader and the Spree / Solidus dataLayer snippet into your store's custom-code area, save, and you're done. Every step below has the exact snippet with a copy button.

Install guide

How to install on Spree / Solidus

This is your install. Every step below has its exact snippet with a Copy button — go step by step. The Loader card above and DataLayer card below are reference copies of the same snippets.

  1. 1

    Locate your storefront theme

    Navigate

    Your Spree app: app/views/spree/shared/ (Spree v4+) OR app/views/layouts/spree/ (older themes)

    Spree doesn't have a plug-in 'tracking code' field — install is via theme template editing. Backup the file before editing.

  2. 2

    Loader — head half

    Loader • Head

    Edit app/views/spree/shared/_head.html.erb → paste the Loader Head snippet inside the <head> block

  3. 3

    Loader — body half + DataLayer

    Loader • Body

    Edit app/views/layouts/spree/storefront.html.erb (or the equivalent in your theme) → paste before </body>

  4. 4

    DataLayer snippet

    DataLayer

    Same storefront layout, after the Loader Body → paste the DataLayer snippet right after

    Auto-detects Spree URL patterns (/products/{slug}, /t/{taxon}, /cart, /checkout, /orders/{number}) and intercepts /cart/add_item + /api/v2/storefront/cart AJAX calls for live cart events.

    HTML
    <!-- Traksolv · Spree DataLayer — paste in app/views/layouts/spree/storefront.html.erb before </body> -->
    <script>
    (function (w, d) {
      w.dataLayer = w.dataLayer || [];
      var DEBUG = false;
      try {
        var q = new URLSearchParams(location.search);
        if (q.get('tcDebug') === '1') { DEBUG = true; try { localStorage.setItem('tcDebug', '1'); } catch (e) {} }
        else if (q.get('tcDebug') === '0') { DEBUG = false; try { localStorage.removeItem('tcDebug'); } catch (e) {} }
        else { try { if (localStorage.getItem('tcDebug') === '1') DEBUG = true; } catch (e) {} }
      } catch (e) {}
      w.tcDebug = DEBUG;
      if (DEBUG && w.console && w.console.log) {
        try { w.console.log('%c[Traksolv]%c dataLayer debug ON — every push will log here. Disable with ?tcDebug=0', 'color:#22c55e;font-weight:600;background:#0a1f0c;padding:2px 6px;border-radius:3px', ''); } catch (e) {}
      }
      function log() {
        if (!DEBUG || !w.console || !w.console.log) return;
        try { w.console.log.apply(w.console, ['[Traksolv]'].concat([].slice.call(arguments))); } catch (e) {}
      }
      function push(eventName, eventId, params) {
        try {
          if (params && params.ecommerce !== undefined) w.dataLayer.push({ ecommerce: null });
          var ev = { event: eventName, event_id: eventName + '.' + eventId };
          if (params) for (var k in params) if (Object.prototype.hasOwnProperty.call(params, k)) ev[k] = params[k];
          w.dataLayer.push(ev);
          log('push ' + eventName, ev);
        } catch (e) {}
      }
      function once(key) {
        try { if (sessionStorage.getItem(key)) return false; sessionStorage.setItem(key, '1'); return true; }
        catch (e) { return true; }
      }
      function money(v) { return parseFloat(String(v == null ? '' : v).replace(/[^\d.\-]/g, '')) || 0; }
      function textOf(sel, root) { var el = (root || d).querySelector(sel); return el ? (el.textContent || '').trim() : ''; }
      function attrOf(sel, a, root) { var el = (root || d).querySelector(sel); return el ? (el.getAttribute(a) || '') : ''; }
      function currency() {
        return attrOf('meta[itemprop="priceCurrency"]', 'content') ||
               attrOf('[data-currency-iso]', 'data-currency-iso') ||
               'USD';
      }
    
      w.tcFirePurchase = function (o) {
        try {
          if (!o || !o.orderId) return;
          if (!once('tc_purchase_' + o.orderId)) return;
          push('purchase', String(o.orderId), {
            ecommerce: {
              transaction_id: String(o.orderId),
              value:    Number(o.value) || 0,
              currency: o.currency || currency(),
              items:    Array.isArray(o.items) ? o.items : []
            }
          });
        } catch (e) {}
      };
    
      function pageType() {
        var path = (location.pathname || '').toLowerCase();
        if (/\/(orders|checkout)\/[^\/]+\/complete/.test(path) || /\/orders\/[a-z0-9]+$/.test(path)) return 'order';
        if (/\/checkout/.test(path))       return 'checkout';
        if (/^\/cart$/.test(path))          return 'cart';
        if (/\/products\/[^\/]+/.test(path)) return 'product';
        if (/\/t\/[^\/]+/.test(path) || path === '/products' || d.querySelector('.product-card, .product-tile')) return 'category';
        return 'other';
      }
      w.tcPageType = pageType;
    
      function fireViewItem() {
        try {
          var pid = attrOf('[data-product-id]', 'data-product-id') ||
                    attrOf('meta[itemprop="productID"]', 'content') ||
                    (location.pathname.match(/\/products\/([^\/?]+)/) || [])[1];
          if (!pid) return;
          if (!once('tc_view_item_' + pid)) return;
          var name = textOf('h1[itemprop="name"], h1.product-title, h1.product-name, h1');
          var price = money(textOf('[itemprop="price"], .product-price, .price') ||
                            attrOf('meta[itemprop="price"]', 'content'));
          var brand = textOf('[itemprop="brand"], .product-brand');
          var sku   = textOf('[itemprop="sku"], .sku');
          push('view_item', String(pid), {
            ecommerce: {
              currency: currency(),
              value:    price,
              items: [{
                item_id:    String(pid),
                item_name:  name,
                item_brand: brand || undefined,
                item_sku:   sku || undefined,
                price:      price,
                quantity:   1
              }]
            }
          });
        } catch (e) {}
      }
    
      function fireViewItemList() {
        try {
          var cards = d.querySelectorAll('.product-card, .product-tile, .product-list .product, .products-list .product, [data-product-id]');
          if (!cards.length) return;
          if (!once('tc_view_item_list_' + location.pathname)) return;
          var items = [];
          for (var i = 0; i < Math.min(cards.length, 25); i++) {
            var c = cards[i];
            var pid = c.getAttribute('data-product-id') ||
                      (c.querySelector('a[href*="/products/"]') ? (c.querySelector('a[href*="/products/"]').href.match(/\/products\/([^\/?]+)/) || [])[1] : '');
            if (!pid) continue;
            items.push({
              item_id:   String(pid),
              item_name: textOf('.product-card__name, .product-name, h2, h3, a', c) || pid,
              price:     money(textOf('.product-card__price, .product-price, .price', c)),
              index:     i
            });
          }
          if (!items.length) return;
          push('view_item_list', location.pathname, {
            ecommerce: { item_list_id: location.pathname, item_list_name: textOf('h1') || location.pathname, items: items }
          });
        } catch (e) {}
      }
    
      function readCartRows() {
        var rows = d.querySelectorAll('table.cart tr.cart-item, .cart-items .cart-item, .line-item, [data-line-item]');
        var items = []; var total = 0;
        for (var i = 0; i < rows.length; i++) {
          var r = rows[i];
          var name = textOf('.cart-item-name, .line-item-name, a, h4', r);
          var price = money(textOf('.cart-item-price, .line-item-price, .price', r));
          var qty = parseInt((textOf('.cart-item-quantity, .line-item-quantity', r) ||
                              attrOf('input[name*="quantity"]', 'value', r) || '1').replace(/\D/g, '') || '1', 10) || 1;
          var pid = r.getAttribute('data-product-id') ||
                    r.getAttribute('data-variant-id') ||
                    name;
          items.push({ item_id: String(pid), item_name: name, price: price, quantity: qty });
          total += price * qty;
        }
        return { items: items, total: total };
      }
    
      function fireCart(eventName) {
        try {
          var d2 = readCartRows();
          if (!d2.items.length) return;
          var key = location.pathname + '.' + d2.items.length;
          if (!once('tc_' + eventName + '_' + key)) return;
          push(eventName, key.slice(0, 64), {
            ecommerce: { currency: currency(), value: d2.total, items: d2.items }
          });
        } catch (e) {}
      }
    
      function firePurchase() {
        try {
          var orderId = (location.pathname.match(/\/orders\/([A-Za-z0-9]+)/) || [])[1] ||
                        (location.pathname.match(/\/checkout\/([A-Za-z0-9]+)\/complete/) || [])[1] ||
                        textOf('.order-number, [data-order-number]') ||
                        ('spree.' + Date.now());
          orderId = String(orderId).replace(/[^A-Za-z0-9_-]/g, '');
          if (!once('tc_purchase_' + orderId)) return;
          var d2 = readCartRows();
          var total = money(textOf('.order-total, .order-summary__total, .grand-total')) || d2.total;
          push('purchase', String(orderId), {
            ecommerce: {
              transaction_id: String(orderId),
              affiliation:    'Spree',
              value:          total,
              currency:       currency(),
              items:          d2.items
            }
          });
        } catch (e) {}
      }
    
      // ── Fetch interceptor for live cart events (Spree v4+ APIs) ──
      (function () {
        if (!w.fetch || w._tcSpreeCartPatched) return;
        w._tcSpreeCartPatched = true;
        var orig = w.fetch.bind(w);
        w.fetch = function (input, init) {
          var url = (typeof input === 'string') ? input : (input && input.url) || '';
          var method = ((init && init.method) || (typeof input === 'object' && input && input.method) || 'GET').toUpperCase();
          var isAdd = /\/cart\/add_item|\/api\/v\d+\/storefront\/cart\/add_item/i.test(url || '');
          var isRem = method === 'DELETE' && /\/(line_items|cart_items)\/[\d]+/i.test(url || '');
          var p = orig(input, init);
          if (!isAdd && !isRem) return p;
          return p.then(function (res) {
            try {
              if (!res) return res;
              if (isAdd) {
                // Read product details from current PDP (assumption: add fires from PDP).
                var name = textOf('h1[itemprop="name"], h1.product-title, h1.product-name') || 'product';
                var price = money(textOf('[itemprop="price"], .product-price') || attrOf('meta[itemprop="price"]', 'content'));
                var qty = parseInt((attrOf('input[name*="quantity"]', 'value') || '1').replace(/\D/g, '') || '1', 10) || 1;
                push('add_to_cart', name + '.' + Date.now(), {
                  ecommerce: { currency: currency(), value: price * qty,
                    items: [{ item_id: name, item_name: name, price: price, quantity: qty }] }
                });
              } else if (isRem) {
                push('remove_from_cart', 'cart.' + Date.now(), {
                  ecommerce: { currency: currency(), value: 0, items: [] }
                });
              }
            } catch (e) {}
            return res;
          });
        };
      })();
    
      function boot() {
        var t = pageType();
        if (t === 'product')  fireViewItem();
        if (t === 'category') fireViewItemList();
        if (t === 'cart')     fireCart('view_cart');
        if (t === 'checkout') fireCart('begin_checkout');
        if (t === 'order')    firePurchase();
      }
      if (d.readyState === 'loading') d.addEventListener('DOMContentLoaded', boot);
      else boot();
    })(window, document);
    </script>
    <!-- End Traksolv Spree DataLayer -->
    
    <!-- Traksolv · DataLayer enrichment — customer lifecycle + remarketing + attribution -->
    <script>
    (function (w, d) {
      function readLT() {
        try {
          var raw = localStorage.getItem('tc_lifetime');
          var p = raw ? JSON.parse(raw) : null;
          return {
            orderCount:    (p && p.orderCount)    || 0,
            lifetimeValue: (p && p.lifetimeValue) || 0,
            firstOrderTs:  (p && p.firstOrderTs)  || null,
            lastOrderTs:   (p && p.lastOrderTs)   || null,
            lastOrderId:   (p && p.lastOrderId)   || null
          };
        } catch (e) {
          return { orderCount: 0, lifetimeValue: 0, firstOrderTs: null, lastOrderTs: null, lastOrderId: null };
        }
      }
      function writeLT(lt) {
        try { localStorage.setItem('tc_lifetime', JSON.stringify(lt)); } catch (e) {}
      }
      function tier(v) {
        if (v >= 1000) return 'vip';
        if (v >= 250)  return 'mid';
        if (v > 0)     return 'low';
        return 'guest';
      }
      function readCookie(n) {
        try {
          var m = d.cookie.match(new RegExp('(^|; )' + n + '=([^;]+)'));
          return m ? decodeURIComponent(m[2]) : null;
        } catch (e) { return null; }
      }
      function readAttr() {
        try { var r = readCookie('_tc_attr'); return r ? JSON.parse(r) : null; } catch (e) { return null; }
      }
    
      w.tcReadLifetime    = readLT;
      w.tcCustomerTier    = function (v) { return tier(v != null ? v : readLT().lifetimeValue); };
      w.tcReadAttribution = readAttr;
    
      // ── Wrap tcFirePurchase to add customer-lifecycle + attribution ──
      // before the underlying snippet pushes the purchase event. Idempotent
      // per orderId, so customer refreshing the thank-you page doesn't
      // inflate their lifetime counters.
      var orig = w.tcFirePurchase;
      if (typeof orig === 'function') {
        w.tcFirePurchase = function (o) {
          try {
            if (!o || !o.orderId) return orig.apply(this, arguments);
            var lt = readLT();
            var firstFire = lt.lastOrderId !== String(o.orderId);
            var orderCount    = firstFire ? lt.orderCount + 1 : lt.orderCount;
            var lifetimeValue = firstFire ? lt.lifetimeValue + (o.value || 0) : lt.lifetimeValue;
            var firstOrderTs  = lt.firstOrderTs || Date.now();
            var newCustomer   = orderCount === 1;
            var daysSinceFirst = Math.floor((Date.now() - firstOrderTs) / 86400000);
    
            if (firstFire) {
              writeLT({
                orderCount:    orderCount,
                lifetimeValue: lifetimeValue,
                firstOrderTs:  firstOrderTs,
                lastOrderTs:   Date.now(),
                lastOrderId:   String(o.orderId)
              });
            }
    
            var attr = readAttr();
            // Build the enriched order. Preserve every original field; add
            // customer + attribution on top.
            var enriched = {};
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) enriched[k] = o[k];
            enriched.new_customer            = newCustomer;
            enriched.customer_type           = newCustomer ? 'new' : 'returning';
            enriched.customer_status         = 'customer';
            enriched.customer_lifetime_value = Math.round(lifetimeValue * 100) / 100;
            enriched.customer_order_count    = orderCount;
            enriched.customer_aov            = orderCount > 0 ? Math.round((lifetimeValue / orderCount) * 100) / 100 : 0;
            enriched.purchase_number         = orderCount;
            enriched.days_since_first_order  = daysSinceFirst;
            enriched.value_tier              = tier(lifetimeValue);
            if (attr) enriched.attribution = {
              landing:   attr.u   || null,
              referrer:  attr.r   || null,
              utm:       attr.utm || null,
              click_ids: attr.cid || null
            };
            return orig.call(this, enriched);
          } catch (e) {
            try { return orig.apply(this, arguments); } catch (e2) {}
          }
        };
      }
    
      // ── tc_visitor_context — emits visitor lifecycle + remarketing on
      //    every page-view. GTM / GA4 audience triggers + Google Ads
      //    dynamic remarketing tag read these.
      function visitorContext() {
        try {
          var lt = readLT();
          var attr = readAttr();
          var pageType = (typeof w.tcPageType === 'function') ? (w.tcPageType() || 'other') : 'other';
          w.dataLayer = w.dataLayer || [];
          w.dataLayer.push({
            event:                   'tc_visitor_context',
            event_id:                'tc_visitor_context.' + Date.now() + '.' + Math.random().toString(36).slice(2, 6),
            customer_status:         lt.orderCount > 0 ? 'returning_customer' : 'guest',
            customer_type:           lt.orderCount > 0 ? 'returning' : 'guest',
            value_tier:              tier(lt.lifetimeValue),
            customer_lifetime_value: Math.round(lt.lifetimeValue * 100) / 100,
            customer_order_count:    lt.orderCount,
            days_since_first_order:  lt.firstOrderTs ? Math.floor((Date.now() - lt.firstOrderTs) / 86400000) : null,
            ecomm_pagetype:          pageType,
            attribution: attr ? {
              landing:   attr.u   || null,
              referrer:  attr.r   || null,
              utm:       attr.utm || null,
              click_ids: attr.cid || null
            } : null
          });
        } catch (e) {}
      }
      if (d.readyState === 'loading') d.addEventListener('DOMContentLoaded', visitorContext);
      else visitorContext();
    })(window, document);
    </script>
    <!-- End Traksolv enrichment -->
  5. 5

    Restart Rails and test

    Save

    Restart your Rails server → visit your storefront → verify view_item + add_to_cart fire

    ?tcDebug=1 in the URL will log dataLayer pushes to console. For Solidus, the same install applies — Solidus uses the spree/* namespace.

The loader Head + Body snippets are generated for your container inside the TrakSolv dashboard. Create a free account to grab them, or see the full how-it-works walkthrough.

FAQ

Server-side tracking for Spree / Solidus, answered

Does server-side tracking work with Spree / Solidus?

Yes. TrakSolv works with Spree / Solidus via a lightweight loader snippet plus a Spree / Solidus-specific dataLayer that fires every GA4 enhanced-ecommerce event. You paste it once in Spree / Solidus's custom-code area and conversions start flowing through your own server-side GTM container.

How do I install TrakSolv on Spree / Solidus?

Add the TrakSolv loader (head + body) and the Spree / Solidus dataLayer snippet to your store's custom-code settings, then save. The full step-by-step is on this page. Most Spree / Solidus merchants are live in a few minutes — no developer required.

What can I track server-side on Spree / Solidus?

Page views, product views, purchases and add-to-carts, begin-checkout and more — every standard GA4 enhanced-ecommerce event, forwarded server-side to GA4, Meta CAPI, Google Ads and other destinations with deduplication.

How much does server-side tracking for Spree / Solidus cost?

TrakSolv uses flat monthly pricing — one event sent to many destinations still counts as one event, and paid plans never auto-pause at quota. You can start free and go live in minutes.

Recover your Spree / Solidus conversions — start free.

Spin up a first-party server-side GTM container for Spree / Solidus and watch your match quality climb. No credit card, live in minutes.

WhatsApp
Server-Side Tracking for Spree / Solidus — TrakSolv | Traksolv