MockShop

En mock‑butik + donationsflöde för analys och experiment

analysexperimente‑handeldonationermatomoga4gtmoptimizelyodp

Varför jag bygger MockShop, stacken bakom det och hur du kör det lokalt eller i Docker för att validera implementationer i GA4/Matomo/ODP/Optimizely.

Obs: MockShop har bytt namn till shop404. Namn och exempel nedan kan fortfarande referera till MockShop medan jag uppdaterar dokumentationen.

De flesta analys‑ och experimentjobb sker på riktiga sajter med riktiga begränsningar. Det är bra för kontext – men mindre bra när du behöver en säker, upprepbar miljö för att ta fram datamodeller, validera taggning eller köra paritetstester mellan verktyg.

Enter MockShop: min pågående privata demobutik som kombinerar ett enkelt e‑handelsflöde med en flerstegswizard för donationer. Den är avsiktligt “lagom” komplex för att täcka verkliga fall utan att dra in dig i framework‑internals eller krångliga backends.

Status: privat, WIP (inte släppt ännu). Hör av dig om du är nyfiken eller vill ha tidig tillgång.

Varför jag bygger detta

  • Upprepbar QA: Spinna upp en ren, konsekvent miljö för validering av analys och tag manager.
  • Paritetstester: Jämför GA4 och Matomo sida vid sida med samma händelser och resor.
  • Samtyckes‑medvetna demos: Visa hur Consent Mode (GTM) och _paq.requireConsent (Matomo) påverkar datainsamlingen.
  • Experimentramverk: Lägg in Optimizely Web‑snuttar för att prototypa aktiveringar och mäta effekt.
  • Utbildningsyta: En konkret lekplats för workshops och onboarding av analytiker/ingenjörer.

Vad ingår

  • E‑handelsflöde: produktgrid → produktdetalj → varukorg → checkout → orderbekräftelse.
  • Donationswizard (SPA): belopp → uppgifter → betalning → granskning → klart.
    • Puff för månadsvis vs engång; valfritt ihågkommet månadsval per enhet.
    • Klientvalidering med donation_step‑felmarkörer (perfekt för trattar).
  • Analytikshjälpare: enhetliga pushes till window.dataLayer (GA4/GTM) och window._mtm (Matomo Tag Manager).
    • GA4‑struktur för varor med kategorihierarki (item_category..item_category5).
    • List‑kontext för impressions (item_list_name, item_list_id, items[].index).
    • Valuta/köp‑mappning; valfria tax/shipping.
  • Matomo Content Tracking i Learn/Resources‑delen:
    • Automatiska impressions + “visible impressions”, explicita interaktioner på CTA:er/teasers.
    • SPA‑säkring via trackContentImpressionsWithinNode(document).
  • Samtyckesbanner med kategorier (analytics, marketing, experimentation).
    • GTM laddar alltid; Consent Mode v2 styr beteendet.
    • Matomo använder _paq.requireConsent och samtyckeshändelser från _mtm.
  • Runtime‑konfig via /config.json: injicerar GTM‑ID, MTM‑container‑URL, Optimizely Web‑snippet och ODP‑SDK‑URL.

Stack & angreppssätt

  • Frontend: Vite + React + Tailwind (snabb dev‑loop, tydliga komponentgränser, minsta möjliga ceremoni).
  • Ingen databasserver: Det här är en mock – allt du behöver för analys finns klient‑side, och runtime‑konfig kommer från /config.json.
  • Docker‑först: Produktionsimagen serverar statiska tillgångar och ett litet runtime som exponerar /config.json från miljövariabler.
  • Indexering avstängd som default: robots och meta‑taggar blockerar crawlers i demo‑byggen.

Nyckelhändelser & data layer MockShop emitterar en fokuserad uppsättning händelser du förväntar dig från en modern butik och ett donationsflöde:

  • page_view: vid sidbyten/route‑ändringar.
  • view_item_list: impressions med item_list_name, item_list_id och per‑item index.
  • view_item: produktdetalj.
  • add_to_cart: lägga i varukorg (inkludera alltid ecommerce.currency).
  • begin_checkout: start på checkout (med ecommerce.currency).
  • purchase: orderbekräftelse (inkluderar transaction_id, value, currency, valfria tax/shipping).
  • donation_step: donationssteg med metadata (t.ex. step, valfri amount, interval, error).

GA4‑mappningsnotiser

  • Varor följer GA4‑namn (item_id, item_name, price, quantity, item_category..item_category5).
  • Impressions innehåller list‑kontext (item_list_name, item_list_id, index).
  • Valuta följer med på varukorg/checkout/purchase.
  • För trattar annoteras donationssteg med fel och kontext.

Matomo‑mappningsnotiser

  • Tagga via Matomo Tag Manager och konsumera samma ecommerce‑objekt och custom‑events från _mtm.
  • Paritet: GA4:s single‑item add_to_cart vs Matomos update_cart (HELA VAGNEN). MockShop emitterar update_cart vid lägg/ta bort/kvantitet och igen vid begin_checkout.
  • Content tracking: block markeras med matomoTrackContent och data-content-*; SPA‑sidor triggar skanning explicitt.

Samtyckesbeteende

  • GTM: Consent Mode v2 nekar som standard; användarens val uppdaterar modellen. GTM laddar alltid men följer samtycke.
  • Matomo: _paq.requireConsent köas; samtyckeshändelser från bannern styr tillåt/nekad. MTM‑triggers kan nyckla på _mtm‑events.

Lokal utveckling Förkrav: Node 18+.

  1. Installera och kör
npm install
npm run dev
# Appen kör på http://localhost:5173
  1. Konfigurera taggar i dev
  • Redigera public/config.json och sätt GTM_ID, MATOMO_TAG_MANAGER_CONTAINER_URL samt ev. Optimizely/ODP‑URL:er.
  • Commita inte hemligheter – public/config.json i dev är din sandlåda.
  1. Build/preview
npm run build
npm run preview

Docker (lokal build)

docker build -t mockshop .
docker run -p 8080:3000 \
  -e GTM_ID=GTM-XXXXXXX \
  -e MATOMO_TAG_MANAGER_CONTAINER_URL=https://matomo.example.com/js/container_ABC123.js \
  -e OPTIMIZELY_WEB_SNIPPET_URL=https://cdn.optimizely.com/js/PROJECT_ID.js \
  -e ODP_SDK_URL=https://cdn.foqt.com/v1/odp.js \
  mockshop

# Appen finns på http://localhost:8080, och /config.json speglar miljövariablerna

Snabba tips för trovärdig testning

  • Använd små, realistiska volymer; du validerar logik, inte lasttestar.
  • Håll transaction_id unikt vid köp; inkludera currency konsekvent.
  • För impressions: inkludera alltid list‑kontext; för kategorier: föredra en stig/hierarki som kan mappas till GA4‑fält och Matomo‑variabler.
  • För samtycke: testa både “analytics på” och “analytics av” och verifiera i GTM Preview och MTM Preview.

Roadmap (WIP)

  • Testharness som snapshot:ar payloads och jämför mot förväntningar (GA4 & Matomo paritet).
  • Valfria Optimizely‑varianter för att demonstrera aktiveringsmönster (URL, målgrupper, attribut).
  • Lättviktig produktkatalog som täcker varianter/optioner.

Aktuell status & åtkomst MockShop ligger privat medan jag rundar av kanter och dokumentation. Jag publicerar när det är stabilt och ordentligt dokumenterat. Vill du ha tidig tillgång för QA eller utbildning – hör av dig.