Implementera spårning i ett Shoporama-tema

Den här guiden är till för temautvecklare och frilansare som vill implementera e-handelsspårning i ett Shoporama-tema. Vi kommer att täcka Shoporamas inbyggda spårning, det automatiska datalagret, konfigurera Google Tag Manager och hur du kan avfyra anpassade händelser från ditt eget tema.

1. Använd Shoporamas inbyggda spårning

Innan du skriver kod själv, överväg Shoporamas spårningsmodul. Du hittar den i det vänstra sidofältet under Online Store (kugghjulsikon) → Tracking. Kryssa i Aktivera spårning, välj de plattformar du vill skicka data till och ange dina ID och åtkomsttokens.

Modulen stöder:

• Facebook Pixel och Conversion API
• Google Ads (inkl. offlinekonverteringar)
• Microsoft Ads
• Google GA4
• Pinterest, Snapchat, TikTok och LinkedIn
• Spårning på serversidan via din egen underdomän (undviker adblockers)
• Samtyckesläge v2

När spårningsmodulen är aktiv avfyrar Shoporama automatiskt händelser till de valda plattformarna. Ett komplett GA4-datalager för e-handel plus en Google Tag Manager-container kommer också att skjutas till din butiks frontend om du har fyllt i ett GTM-ID i butiksinställningarna.

2. Det automatiska datalagret

Standardtemana (Delaware, Montana, Massachusetts etc.) innehåller en partial som heter partials/datalayer.html. Den skickar GA4-kompatibla e-handelshändelser till window.dataLayer så snart spårning är aktiverad i butiken.

Följande händelser avfyras automatiskt av temat:

En typisk view_item-push som genereras av temat ser ut så här:

window.dataLayer = window.dataLayer || []; window.dataLayer.push({ ecommerce: null }); window.dataLayer.push({ event: 'view_item', ecommerce: { items: [{ item_id: '12345', item_name: 'Example product', affiliation: 'My Webshop', currency: 'DKK', index: 0, item_brand: 'Brand', price: 199.00, quantity: 1 }] } });

Om du bygger ditt eget tema från grunden kan du kopiera templates/partials/datalayer.html från Delaware-temat och inkludera den i din global.html:

<{include file="partials/datalayer.html"}>

3. Konfigurera Google Tag Manager via HTML-fält

Om du har fyllt i fältet Google Tag Manager Container ID i dina butiksinställningar kommer Shoporama automatiskt att infoga GTM-snippet åt dig - det finns längst ner i partials/datalayer.html.

Om du vill styra GTM (eller andra skript som Cookiebot, Hotjar eller Klaviyo) manuellt måste du använda HTML-fält istället. Gå till Webshop → HTML-fält. Här kan du skapa namngivna fält och välja om du vill infoga dem automatiskt i head eller body eller använda dem manuellt i ditt tema via ett taggnamn.

En typisk GTM-snutt i ett HTML-fält som är inställt på "Lägg automatiskt till i huvudet" ser ut så här:

<!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:''';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-XXXXXXX');</script> <!-- Slut på Google Tag Manager -->

Kom också ihåg <noscript>-fallbacken i body-fältet:

<!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- Slut på Google Tag Manager (noscript) -->

Läs mer om hur HTML-fält fungerar i HTML-fält: Infoga Cookiebot, GTM och andra skript.

4. Taggar och triggers i GTM

När standarddatalagret är aktivt kan du använda GA4:s inbyggda taggar och anpassade händelsetriggers. En typisk inställning ser ut så här:

• GA4-konfigurationstagg med ditt mätnings-ID, avfyras på alla sidor
• GA4 Event Tag för varje e-handelshändelse - inställd på att läsa e-handelsobjektet från datalagret
• Anpassade Event triggers med namnen view_item, add_to_cart, begin_checkout, purchase etc.
• Använd förhandsgranskningsläget i GTM för att kontrollera att händelserna utlöses med rätt data

För Google Ads-omvandlingar länkar du ditt Google Ads Conversion ID/Label till purchase-eventet. Se även Google Analytics-spårning av din onlinebutik.

5. Anpassade händelser från ditt eget tema

Om du behöver utlösa händelser som inte omfattas av standarddatalagret - t.ex. en videouppspelning, ett klick på en flik, en chattöppning eller en anpassad CTA - kan du skicka direkt till window.dataLayer från ditt tema:

<button onclick="trackVideoPlay()">Spela upp video</button> <script> function trackVideoPlay() { window.dataLayer = window.dataLayer || []; window.dataLayer.push({ event: 'video_play', video_title: 'Product demo', video_id: 'demo-123' }); } </script>

På kvittosidan kan du utöka eller ersätta standardhändelsen för köp genom att använda orderobjektet och Smarty:

<script> window.dataLayer = window.dataLayer || []; window.dataLayer.push({ event: 'custom_purchase', ecommerce: { transaction_id: '<{$order->getWebshopOrderId()}>', value: <{$order->getTotalPrice()|number_format:2:".":"""}>', valuta: '<{$webshop->getCurrency()}>', kupong: '<{$order->getVoucherCode()|escape:"javascript"}>' }); </script>

Observera att Shoporamas standardköphändelse redan ställer in setTrackingCalled() på ordern, så den utlöses bara en gång. Om du vill ha samma beteende i din anpassade händelse måste du hantera idempotens själv (t.ex. via en cookie eller localStorage).

6. Testning och felsökning

• Använd GTM/GA Debugger Chrome-tillägget eller Tag Assistant för att se vilka händelser som utlöses
• Skriv window.dataLayer i webbläsarkonsolen för att se hela dataLayer-historiken
• Använd GTM:s förhandsgranskningsläge för att se taggar avfyras i realtid
• Verifiera köphändelser i GA4 DebugView
• Om inget utlöses: kontrollera om Aktivera spårning är inställt i Webshop → Spårning - utan det är datalayer.html-blocket inaktivt

Ofta ställda frågor

Måste jag välja mellan Shoporamas inbyggda spårning och min egen GTM-installation?

Nej, du kan köra båda samtidigt. Den inbyggda spårningsmodulen skickar data på serversidan till de valda plattformarna, medan din egen GTM-installation körs på klientsidan. Många butiker kör faktiskt båda för att få den mest robusta spårningen - särskilt under samtyckesläget där händelser på klientsidan kan blockeras.

Var ska jag placera GTM-snippet om jag inte vill använda HTML-fält?

Direkt i ditt temas templates/global.html eller en anpassad header partial. Vi rekommenderar dock HTML-fält eftersom de överlever temauppdateringar och kan ändras utan att distribuera ett nytt tema.

Kan jag skriva över eller inaktivera de standardhändelser som Shoporama utlöser?

Ja, det kan du göra. Om du har ett helt anpassat tema ska du inte inkludera partials/datalayer.html. Om du bygger på Delaware eller Montana och bara vill ändra några få händelser, skapa din egen partiella och inkludera den istället för standardversionen.

Vilka variabler har jag tillgång till i dataLayer-mallen?

De typiska: $webshop, $product, $category, $order, $basket, $customer, $voucher och $inc som anger vilken mall som återges (t.ex. basket.html, thanks. html). Klasserna finns dokumenterade i admin/class/safe/.

Hur undviker jag att utlösa köphändelsen två gånger om kunden uppdaterar kvittosidan?

Detta hanteras redan av temat via $order->getTrackingCalled() och $order->setTrackingCalled(). Om du bygger din egen köphändelse kan du återanvända samma mönster eller ställa in ett flaggcookie/localStorage-värde efter den första avfyrningen.

Måste jag ta hänsyn till Consent Mode i mitt eget tema?

Ja, det behöver du. Om kunden inte har gett sitt samtycke ska du inte starta spårningshändelser som använder cookies. Använd en cookie consent manager (Cookiebot, CookieInformation eller din egen lösning) och låt GTM-taggar bero på samtyckesläget. Shoporamas spårning på serversidan hanterar Consent Mode automatiskt när du aktiverar Use Consent Mode i spårningsmodulen.

Kan jag skicka mina egna dataLayer-händelser till andra plattformar än Google?

Ja. dataLayer är plattformsagnostiskt. Du kan ställa in taggar i GTM för Meta CAPI, TikTok Events API eller något annat som stöder dataLayer som källa. Alternativt kan du skicka direkt till plattformarnas egna SDK:er (t.ex. fbq( ) eller ttq.track()) från ditt tema.

Behöver du hjälp med implementeringen? Skriv till support@shoporama.dk.