Jag har släppt shop404 som open source — en liten men realistisk demobutik du kan köra lokalt eller i Docker för att validera analys‑ och experiment‑setup innan det når produktion.

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

Varför detta är viktigt

  • Undvik dåliga data: fånga luckor, namndrift och samtyckesproblem tidigt.
  • Paritetstester: verifiera GA4 vs Matomo‑mappning med samma resor.
  • Snabbare onboarding: öva rena implementationer utan legacy‑bagage.
  • Smidigare släpp: repetera GTM/MTM, samtycke och experiment end‑to‑end.

Vad shop404 är

  • Lättviktsdemo: enkelt e‑handelsflöde plus flerstegswizard för donationer.
  • Verktygs‑agnostisk: enhetligt data layer som GTM (GA4) och MTM (Matomo) kan konsumera.
  • Samtyckesmedveten: sätt upp GTM Consent Mode v2 och Matomos _paq.requireConsent sida vid sida.
  • Runtime‑konfig: injicera ID/URL:er via /config.json för snabb miljöväxling.
  • Lokalt eller Docker: enkelt att spinna upp för QA, workshops eller CI‑smoke.

Verktyg att träna på

  • GA4 via GTM: ecommerce‑events, list‑impressions, purchase och donationssteg.
  • Matomo via MTM: cart‑uppdateringar, content tracking och paritet mot GA4‑namn.
  • Optimizely Web: lägg in snippet för att demo aktivering + mätning (valfritt).
  • ODP: koppla på SDK för events och profiler (valfritt).

Kom igång Se README i repot för de exakta stegen. Typiskt flöde:

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

För test av taggar i dev: peka /public/config.json (eller env i Docker) mot dina GTM/MTM‑containers och ev. Optimizely/ODP‑URL:er. Håll hemligheter utanför Git.

Checklista för trovärdig testning

  • Inkludera alltid valuta på cart/checkout/purchase; håll transaction_id unik.
  • För list‑impressions: inkludera list‑kontext och stabil indexering.
  • Testa samtycke både “på” och “av”, verifiera i GTM Preview och MTM Preview.
  • Jämför GA4 vs Matomo‑payloads för nyckelhändelser för att bekräfta mappning.

Användningsfall

  • Pre‑launch‑QA för taggningsplaner
  • Utbildning och demos utan att röra produktion
  • Migrerings‑torrsim (GA4 ↔ Matomo) med samma trafik

Roadmap (kort)

  • Snapshot‑tester av emitterade payloads och GA4/Matomo‑paritet
  • Exempel‑varianter i Optimizely för aktiveringsmönster

Testa gärna shop404 och önska funktioner via issues eller hör av dig.