Implementera spårning i ett Shoporama-tema

Den här guiden riktar sig till temautvecklare och frilansare som vill implementera e-handelsspårning i ett Shoporama-tema. Vi går igenom temats datalager, konfigurationen av Google Tag Manager, korrekta produkt-ID:n med getTrackingId() och hur du avfyrar anpassade händelser från ditt eget tema.

1. Shoporamas inbyggda spårning kräver ingen temakod

Innan du skriver kod själv bör du överväga Shoporamas spårningsmodul. Du hittar den i vänster sidomeny under Webbshop (kugghjulsikonen) → Spårning. Markera rutan Aktivera spårning, välj de plattformar du vill skicka data till och ange dina ID:n och åtkomsttoken.

Spårningsmodulen infogar själv sina skript och utlöser sina händelser. Detta sker på serversidan, utanför temats filer, så du behöver varken inkludera partials, infoga skript eller ändra en enda rad i temat. 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)
• Consent Mode v2

Om webbutiken endast ska använda vanlig e-handelsspårning är du som temautvecklare klar här. Resten av artikeln handlar om webbutiker som vill köra sin egen konfiguration, vanligtvis via Google Tag Manager, utöver eller istället för den inbyggda spårningen.

2. Tematets datalager

Standardtemana (Delaware, Montana, Massachusetts m.fl.) innehåller en partial som heter partials/datalayer.html. Den skickar GA4-kompatibla e-handelshändelser till window.dataLayer så snart spårningen är aktiverad i webbutiken. Det är den du bygger vidare på om webbutiken ska ha sin egen GTM-konfiguration.

Följande händelser utlöses automatiskt av temat:

En view_item-push på produktsidan bör se ut så här i mallen:

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({ ecommerce: null });
window.dataLayer.push({
  event: 'view_item',
  ecommerce: {
    currency: '<{$webshop->getCurrency()}>',
    items: [{
      item_id: '<{$product->getTrackingId()}>',
      item_name: '<{$product->getName()|escape:"javascript"}>',
      price: <{$product->getRealPrice()|number_format:2:".":""}>,
      quantity: 1
    }]
  }
});
</script>

Observera item_id: Det hämtas från $product->getTrackingId() och inte från ett id som du själv skapar. Varför detta är avgörande går vi igenom i nästa avsnitt.

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. Produkt-id: använd alltid getTrackingId()

Annonsplattformar som Meta och Google matchar dina händelser mot produktkatalogen via produkt-id:t. Det innebär att item_id i dina händelser måste vara identiskt med id:t (g:id) i webbutikens produktfeed. Om de två skiljer sig åt kan plattformen inte koppla händelsen till produkten i katalogen, vilket leder till att katalogmatchning, dynamisk remarketing och produktrapporterna misslyckas.

Därför ska du aldrig själv sätta ihop produkt-id:n i dina mallar. Använd istället getTrackingId(), som alltid returnerar exakt det id som butikens feed använder:

item_id: '<{$product->getTrackingId()}>'

Formatet beror på webbutikens inställningar:

• Standard: det numeriska produkt-id:et, t.ex. 154585.
• Varianter: produkt-id och variantvärdets id åtskilda av kolon, t.ex. 154585:45789.
• Butiker med språk- eller landsflöden: artikelnumret (SKU) istället, eftersom det är den stabila nyckeln över landsbutikerna. Variantens varunummer används om det är ifyllt, annars produktens. Om produkten inte har något varunummer alls faller id:t tillbaka till det numeriska formatet.

Allt detta hanteras automatiskt av getTrackingId() per butik. Om du känner till variantvärdets ID, t.ex. i samband med varukorgen, kassan eller kvittot, skickar du med det som en andra parameter:

item_id: '<{$product->getTrackingId(null, $attribute_value_id)}>'

Den första parametern är attributets ID. Den kan sättas till null, då hämtas den automatiskt utifrån variantvärdet.

Läs mer om ID-schemat och hur du felsöker matchningsgraden i Produkt-ID:n och katalogmatchning hos Meta och Google.

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

Om du har fyllt i fältet Google Tag Manager-ID under butikens inställningar infogar Shoporama automatiskt GTM-snippet åt dig. Det finns längst ner i partials/datalayer.html.

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

Ett typiskt GTM-snippet i ett HTML-fält med inställningen ”Lägg till automatiskt i head” 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 fallbacken <noscript> 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.

5. Taggar och utlösare i GTM

Med standarddataskiktet aktiverat kan du använda GA4:s inbyggda taggar och anpassade händelseutlösare. En typisk konfiguration ser ut så här:

• GA4-konfigurations-tag med ditt mät-ID, utlöst på alla sidor
• GA4-händelsetagg för varje e-handelshändelse, inställd på att läsa e-handelsobjektet från datalagret
• Anpassade händelseutlösare med namnen view_item, add_to_cart, begin_checkout, purchase osv.
• Använd förhandsgranskningsläget i GTM för att verifiera att händelserna aktiveras med korrekta data

För Google Ads-konverteringar länkar du ditt Google Ads-konverterings-ID/etikett till händelsen ”purchase”. Se även Google Analytics-spårning av din webbshop.

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

Om du behöver avfyra händelser som inte täcks av standarddataskiktet, t.ex. en videouppspelning, ett flikklick, en chattöppning eller en anpassad CTA, ska du skicka data 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: 'Produktdemo',
    video_id: 'demo-123'
  });
}
</script>

På bekräftelsessidan kan du avfyra din egen purchase-händelse med order-objektet och Smarty. Använd getTrackingId() för item_id och kapsla in allt i dubbelhetsskyddet getTrackingCalled() / setTrackingCalled(), så att händelsen endast utlöses en gång per beställning, även om kunden laddar om kvittosidan:

<{if $order && !$order->getTrackingCalled()}>
<{assign var="orderproducts" value=$order->getOrderProducts()}>
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({ ecommerce: null });
window.dataLayer.push({
  event: 'purchase',
  ecommerce: {
    transaction_id: '<{$order->getWebshopOrderId()}>',
    value: <{$order->getTotalPrice()|number_format:2:".":""}>,
    currency: '<{$webshop->getCurrency()}>',
    coupon: '<{$order->getVoucherCode()|escape:"javascript"}>',
    items: [
      <{foreach from=$orderproducts item=op}>
        <{assign var="p" value=$op->getProduct()}>
        <{assign var="attributes" value=$op->getAttributes()}>
        {
          <{if $attributes|@count == 1}>
            <{foreach from=$attributes item=attr}>
              item_id: '<{$p->getTrackingId(null, $attr.attribute_value_id)}>',
              item_variant: '<{$attr.val|escape:"javascript"}>',
            <{/foreach}>
          <{else}>
            item_id: '<{$p->getTrackingId()}>',
          <{/if}>
          item_name: '<{$op->getName()|escape:"javascript"}>',
          price: <{$op->getPrice()|number_format:2:".":""}>,
          quantity: <{$op->getAmount()}>
        },
      <{/foreach}>
    ]
  }
});
</script>
<{$order->setTrackingCalled()}>
<{/if}>

Flaggan är gemensam för alla spårningssnippets i beställningen, även temats standarddataskikt. Om du har flera konverteringssnippets på kvittosidan (t.ex. en Pricerunner-pixel plus din egen köphändelse), så kontrollera flaggan med getTrackingCalled() i varje kodsnutt, men anropa endast setTrackingCalled() på ett ställe, som det sista, när alla kodsnuttar har körts. Samma mönster används i guiden Implementera Pricerunner-spårning.

7. Test och felsökning

• Använd Chrome-tillägget GTM/GA Debugger 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 som utlöses i realtid
• Verifiera köphändelser i GA4 DebugView
• Kontrollera katalogmatchningen hos Meta i Events Manager → Test Events eller med webbläsartillägget Meta Pixel Helper. Felmeddelandet ”Inga innehålls-ID:n har mottagits” betyder vanligtvis att item_id saknas eller inte stämmer överens med feedet. Se avsnittet om getTrackingId() ovan
• Om temats datalager inte aktiveras: kontrollera om ”Aktivera spårning” är aktiverat i Webshop → Spårning. Utan den är datalayer.html-blocket inaktivt

Vanliga frågor

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

Nej, du kan utan problem köra båda samtidigt. Den inbyggda spårningsmodulen hanterar sina egna händelser utanför temat, medan din egen GTM-konfiguration körs i temat. Många butiker använder båda för att få den mest robusta spårningen, särskilt i Consent Mode, där händelser på klientsidan kan blockeras.

Vilket format ska item_id ha i mina händelser?

Samma format som id:t i webbutikens produktfeed: numeriskt produkt-id som standard, produkt-id:variantvärde-id för varianter, och varunumret (SKU) för webbutiker med språk- eller landsfeeds. Du behöver inte hålla reda på det själv. Använd $product->getTrackingId(), så stämmer id:t alltid överens med flödet. Se detaljerna i Produkt-id:n och katalogmatchning.

Varför är matchningsgraden i min Meta-katalog låg, trots att mina händelser fungerar?

Nästan alltid för att händelsens item_id inte är identiskt med feedets id. Vanliga orsaker är manuellt skapade id:n, varianter i fel ordning eller SKU på ett ställe och numeriskt id på ett annat. Byt till getTrackingId() överallt och verifiera med Test Events i Meta Events Manager.

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

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

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

Ja, för temats datalager. Om du har ett helt anpassat tema ska du undvika att inkludera partials/datalayer.html. Om du bygger vidare på Delaware eller Montana och endast vill ändra enskilda händelser, skapa då din egen delfil och inkludera den istället för standardversionen. Den inbyggda server-side-spårningen styrs däremot från Webshop → Spårning och påverkas inte av temat.

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

De vanligaste: $webshop, $product, $category, $order, $basket, $customer, $voucher samt $inc som anger vilken mall som renderas (t.ex. basket.html, thanks.html).

Hur undviker jag att avfyra purchase-händelsen två gånger om kunden uppdaterar kvittosidan?

Kontrollera $order->getTrackingCalled() innan du utlöser händelsen, och anropa $order->setTrackingCalled() när alla dina konverteringssnippets har utlösts. Flaggan sparas på ordern, så den kvarstår även vid uppdatering. Se det fullständiga exemplet i avsnittet om anpassade händelser ovan.

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

Ja. Om kunden inte har gett sitt samtycke får du inte avfyra spårningshändelser som använder cookies. Använd en cookie-samtyckeshanterare (Cookiebot, CookieInformation eller en egen lösning) och låt GTM-taggarna bero på samtyckesstatusen. Shoporamas serversidiga spårning hanterar Consent Mode automatiskt när du aktiverar ”Använd Consent Mode” i spårningsmodulen.

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

Ja. dataLayer är plattformsoberoende. Du kan konfigurera taggar i GTM för Meta CAPI, TikTok Events API eller vad som helst som stöder dataLayer som källa. Alternativt kan du skicka händelser direkt till plattformarnas egna SDK:er (t.ex. fbq() eller ttq.track()) från ditt tema. Kom ihåg att använda getTrackingId() som produkt-id, oavsett plattform.

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