shop404

Public demo shop to validate analytics and experimentation before production

analyticstestingexperimentationecommercematomoga4gtmoptimizelyodp

I’ve open‑sourced shop404 — a small, realistic demo shop you can run locally or in Docker to validate analytics and experimentation setups before they ever touch production.

Repository: https://github.com/Puttrix/shop404

Why this matters

  • Prevent bad data: Catch tracking gaps, naming drift, and consent issues early.
  • Parity checks: Verify GA4 vs Matomo mappings with the same journeys.
  • Faster onboarding: Practice clean implementations without legacy constraints.
  • Smoother launches: Rehearse GTM/MTM, consent, and experiments end‑to‑end.

What shop404 is

  • Lightweight demo: simple ecommerce flow plus a multi‑step donation wizard.
  • Tool‑agnostic: emits a unified data layer that GTM (GA4) and MTM (Matomo) can consume.
  • Consent‑aware: set up GTM Consent Mode v2 and Matomo _paq.requireConsent side‑by‑side.
  • Runtime config: inject IDs/URLs via /config.json so you can quickly switch environments.
  • Local or Docker: easy to spin up for QA, workshops, or CI smoke checks.

Tools you can practice

  • GA4 via GTM: ecommerce events, list impressions, purchase, and donation steps.
  • Matomo via MTM: cart updates, content tracking, and parity with GA4 naming.
  • Optimizely Web: drop in the snippet to demo activation + measurement (optional).
  • ODP: wire up SDK for event capture and profile enrichment (optional).

Quick start See the README for authoritative steps. Typical flow:

git clone https://github.com/Puttrix/shop404.git
cd shop404
npm install
npm run dev    # http://localhost:5173

To test tags in dev, point /public/config.json (or envs in Docker) at your GTM/MTM containers and optional Optimizely/ODP URLs. Keep secrets out of Git.

Credible testing checklist

  • Always include currency on cart/checkout/purchase; keep transaction_id unique.
  • For list impressions, include list context and stable indexing.
  • Test consent “on” and “off”, verify behavior in GTM Preview and MTM Preview.
  • Compare GA4 vs Matomo payloads for key events to confirm mapping.

Use cases

  • Pre‑launch QA for tagging plans
  • Training and demos without touching production
  • Migration dry‑runs (GA4 ↔ Matomo) with the same traffic

Roadmap (short)

  • Snapshot tests for emitted payloads and GA4/Matomo parity
  • Example Optimizely variations for activation patterns

If you try shop404 and want something added, open an issue or ping me.