@beefynachos/cm-tracker

A lightweight JavaScript/React-friendly client-side tracking library for Sort’d Merchandiser. This package provides the official tracking implementation required to power Sort’d analytics, scoring, automation insights, and merchandising optimisation.

It supports all required storefront events:

• Collection views
• Product views
• Product card (grid) impressions
• Add-to-cart actions

Purchase events are handled separately via a Shopify Pixel implemented by the Sort’d team.

🚀 Installation

npm install @beefynachos/cm-tracker
# or
yarn add @beefynachos/cm-tracker

📦 Basic Usage (React Example)

Create a global tracker instance and wrap your app with a provider:

import {createContext, useContext, useEffect, useRef} from 'react';
import {CMEventTracker} from '@beefynachos/cm-tracker';

const CmTrackerContext = createContext(null);

export function CmTrackerProvider({children}) {
  const trackerRef = useRef(null);

  useEffect(() => {
    if (typeof window === 'undefined') return;

    trackerRef.current = new CMEventTracker({
      store: 'your-store.myshopify.com',
      endpoint: 'https://your-sortd-endpoint.example.com',
      debug: false,
    });
  }, []);

  return (
    <CmTrackerContext.Provider value={trackerRef.current}>
      {children}
    </CmTrackerContext.Provider>
  );
}

export function useCmTracker() {
  return useContext(CmTrackerContext);
}

Use it anywhere in your components:

const cmTracker = useCmTracker();

cmTracker?.trackCollectionView({
  collectionId: 123456789,
});

📘 Full Setup Guide

For complete implementation instructions—including required events, Hydrogen/Next.js examples, testing guidance, and best practices—refer to the full documentation:

👉 Sort’d Headless Tracking Integration Guide

🛒 Purchase Tracking

Checkout completion events are tracked automatically using a Shopify Pixel implemented and maintained by the Sort’d team. No additional development is required in your storefront.

Domain Requirements

Your storefront domain must match your checkout complete domain for attribution to work correctly. If they differ, contact your Sort’d representative for assistance.

Test Purchases

If you'd like Sort’d to verify purchase tracking, please provide:

• Instructions for completing a test order
• Any required discount codes or bypass steps
• Details on which product(s) to use

🧪 Debugging

To enable debug output:

new CMEventTracker({
  store,
  endpoint,
  debug: true,
});

Inspect network events using Chrome DevTools → Network and filter by your endpoint URL.

💬 Support

If you have questions or need help implementing the tracker, the Sort’d team is here to assist.

📨 [email protected]