Implementere sporing i et Shoporama-tema

Denne veiledningen er for temautviklere og frilansere som ønsker å implementere sporing av e-handel i et Shoporama-tema. Vi tar for oss Shoporamas innebygde sporing, det automatiske datalaget, konfigurering av Google Tag Manager og hvordan du kan utløse egendefinerte hendelser fra ditt eget tema.

1. Bruk Shoporamas innebygde sporing

Før du skriver kode selv, bør du vurdere Shoporamas sporingsmodul. Du finner den i venstre sidefelt under Nettbutikk (tannhjulikonet) → Sporing. Kryss av for Aktiver sporing, velg plattformene du vil sende data til, og angi ID-er og tilgangstokener.

Modulen støtter:

• Facebook Pixel og Conversion API
• Google Ads (inkl. offline-konverteringer)
• Microsoft Ads
• Google GA4
• Pinterest, Snapchat, TikTok og LinkedIn
• Sporing på serversiden via ditt eget underdomene (unngår adblockere)
• Samtykkemodus v2

Når sporingsmodulen er aktiv, sender Shoporama automatisk hendelser til de valgte plattformene. Et komplett GA4-datalag for e-handel pluss en Google Tag Manager-container vil også bli sendt til butikkens frontend hvis du har fylt ut en GTM-ID i butikkinnstillingene.

2. Det automatiske datalaget

Standardtemaene (Delaware, Montana, Massachusetts osv.) inkluderer en partiell fil som heter partials/datalayer.html. Den sender GA4-kompatible e-handelshendelser til window.dataLayer så snart sporing er aktivert i butikken.

Følgende hendelser utløses automatisk av temaet:

En typisk view_item-push generert av temaet ser slik ut:

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

Hvis du bygger ditt eget tema fra bunnen av, kan du kopiere templates/partials/datalayer.html fra Delaware-temaet og inkludere den i global.html:

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

3. Konfigurer Google Tag Manager via HTML-felt

Hvis du har fylt ut Google Tag Manager Container ID-feltet i butikkinnstillingene dine, vil Shoporama automatisk sette inn GTM-snippet for deg - det er nederst i partials/datalayer.html.

Hvis du vil kontrollere GTM (eller andre skript som Cookiebot, Hotjar eller Klaviyo) manuelt, må du bruke HTML-felt i stedet. Gå til Nettbutikk → HTML-felt. Her kan du opprette navngitte felt og velge om du vil sette dem inn automatisk i head eller body, eller om du vil bruke dem manuelt i temaet ditt via et tagnavn.

En typisk GTM-snippet i et HTML-felt som er satt til "Legg automatisk til i head", ser slik ut:

<!-- 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-XXXXXXXXX');</script> <!-- Slutt på Google Tag Manager -->.

Husk også <noscript> fallback i body-feltet:

<!-- 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> <!-- End Google Tag Manager (noscript) -->

Les mer om hvordan HTML-felt fungerer i HTML-felt: Sett inn Cookiebot, GTM og andre skript.

4. Tagger og triggere i GTM

Når standard datalag er aktivt, kan du bruke GA4s innebygde tagger og egendefinerte hendelsesutløsere. Et typisk oppsett ser slik ut:

• GA4-konfigurasjonstagg med din målings-ID, avfyrt på alle sider
• GA4 Event Tag for hver e-handelshendelse - satt til å lese e-handelsobjektet fra datalaget
• Egendefinerte hendelsesutløsere med navnene view_item, add_to_cart, begin_checkout, purchase osv.
• Bruk forhåndsvisningsmodus i GTM for å kontrollere at hendelsene utløses med riktige data

For Google Ads-konverteringer kobler du Google Ads Conversion ID/Label til kjøpshendelsen. Se også Google Analytics-sporing av nettbutikken din.

5. Tilpassede hendelser fra ditt eget tema

Hvis du trenger å utløse hendelser som ikke dekkes av standard datalag - for eksempel en videoavspilling, et klikk på en fane, en chat-åpning eller en tilpasset CTA - kan du pushe direkte til window.dataLayer fra temaet ditt:

<button onclick="trackVideoPlay()">Avspill 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å kvitteringssiden kan du utvide eller erstatte standard kjøpshendelse ved å bruke ordreobjektet og 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>

Merk at Shoporamas standard kjøpshendelse allerede setter setTrackingCalled() på bestillingen, slik at den bare utløses én gang. Hvis du vil ha samme oppførsel på din egendefinerte hendelse, må du håndtere idempotens selv (f.eks. via en informasjonskapsel eller localStorage).

6. Testing og feilsøking

• Bruk Chrome-utvidelsen GTM/GA Debugger eller Tag Assistant for å se hvilke hendelser som utløses
• Skriv inn window.dataLayer i konsollen i nettleseren for å se hele dataLayer-historikken
• Bruk GTMs forhåndsvisningsmodus for å se tagger utløses i sanntid
• Verifiser kjøpshendelser i GA4 DebugView
• Hvis ingenting utløses: sjekk om Aktiver sporing er angitt i Nettbutikk → Sporing - uten dette er datalayer.html-blokken inaktiv

Ofte stilte spørsmål

Må jeg velge mellom Shoporamas innebygde sporing og mitt eget GTM-oppsett?

Nei, du kan kjøre begge deler samtidig. Den innebygde sporingsmodulen sender data på serversiden til de valgte plattformene, mens ditt eget GTM-oppsett kjører på klientsiden. Mange butikker kjører faktisk begge deler for å få mest mulig robust sporing - spesielt i samtykkemodus, der hendelser på klientsiden kan blokkeres.

Hvor skal jeg plassere GTM-snippet hvis jeg ikke vil bruke HTML-felt?

Direkte i temaets templates/global.html eller i en tilpasset header partial. Vi anbefaler imidlertid HTML-felt, ettersom de overlever temaoppdateringer og kan endres uten å distribuere et nytt tema.

Kan jeg overskrive eller deaktivere standardhendelsene Shoporama utløser?

Ja, det kan du. Hvis du har et helt tilpasset tema, må du ikke inkludere partials/datalayer.html. Hvis du bygger på Delaware eller Montana og bare ønsker å endre noen få hendelser, kan du opprette din egen partiell og inkludere den i stedet for standardversjonen.

Hvilke variabler har jeg tilgang til i dataLayer-malen?

De typiske: $webshop, $product, $category, $order, $basket, $customer, $voucher og $inc som indikerer hvilken mal som gjengis (f.eks. basket.html, thanks .html). Klassene er dokumentert i admin/class/safe/.

Hvordan unngår jeg at kjøpshendelsen utløses to ganger hvis kunden oppdaterer kvitteringssiden?

Dette håndteres allerede av temaet via $order->getTrackingCalled() og $order->setTrackingCalled(). Hvis du bygger din egen kjøpshendelse, kan du gjenbruke det samme mønsteret eller angi en flagg-cookie/localStorage-verdi etter den første avfyringen.

Må jeg ta hensyn til Consent Mode i mitt eget tema?

Ja, det må du. Hvis kunden ikke har gitt samtykke, må du ikke utløse sporingshendelser som bruker informasjonskapsler. Bruk en cookie consent manager (Cookiebot, CookieInformation eller din egen løsning) og la GTM-koder avhenge av samtykkestatusen. Shoporamas sporing på serversiden håndterer samtykkemodus automatisk når du aktiverer Bruk samtykkemodus i sporingsmodulen.

Kan jeg sende mine egne dataLayer-hendelser til andre plattformer enn Google?

Ja. dataLayer er plattformagnostisk. Du kan sette opp tagger i GTM for Meta CAPI, TikTok Events API eller hva som helst som støtter dataLayer som kilde. Alternativt kan du sende direkte til plattformenes egne SDK-er ( f.eks. fbq( ) eller ttq.track()) fra temaet ditt.

Trenger du hjelp med implementeringen? Skriv til support@shoporama.dk.