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.