Implementere sporing i et Shoporama-tema

Denne veiledningen er rettet mot temautviklere og frilansere som ønsker å implementere e-handelssporing i et Shoporama-tema. Vi går gjennom temaets datalag, konfigurering av Google Tag Manager, korrekte produkt-ID-er med getTrackingId() og hvordan du utløser tilpassede hendelser fra ditt eget tema.

1. Shoporamas innebygde sporing krever ingen temakode

Før du skriver kode selv, bør du vurdere Shoporamas sporingsmodul. Du finner den i venstre sidefelt under Nettbutikk (tannhjulikonet) → Sporing. Sett haken i «Aktiver sporing», velg plattformene du vil sende data til, og skriv inn ID-ene og tilgangstokenene dine.

Sporingsmodulen setter inn skriptene sine selv og utløser hendelsene sine selv. Dette skjer på serversiden, utenom temaets filer, så du trenger verken å inkludere partials, sette inn skript eller endre en eneste linje i temaet. Modulen støtter:

• Facebook Pixel og Conversion API
• Google Ads (inkl. offline-konverteringer)
• Microsoft Ads
• Google GA4
• Pinterest, Snapchat, TikTok og LinkedIn
• Serverside-sporing via ditt eget underdomene (omgår adblockere)
• Consent Mode v2

Hvis nettbutikken kun skal bruke vanlig e-handelssporing, er du som temautvikler ferdig her. Resten av artikkelen handler om nettbutikker som ønsker å kjøre sin egen konfigurasjon, vanligvis via Google Tag Manager, i tillegg til eller i stedet for den innebygde sporingen.

2. Temaets datalag

Standardtemaene (Delaware, Montana, Massachusetts m.fl.) inkluderer en partial som heter partials/datalayer.html. Den sender GA4-kompatible e-handelshendelser til window.dataLayer så snart sporing er aktivert i nettbutikken. Det er denne du bygger videre på hvis nettbutikken skal ha sin egen GTM-konfigurasjon.

Følgende hendelser utløses automatisk av temaet:

En view_item-push på produktsiden bør se slik ut i malen:

<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>

Merk deg item_id: Den hentes fra $product->getTrackingId() og ikke fra en id du selv setter sammen. Hvorfor dette er avgjørende, går vi gjennom i neste avsnitt.

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

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

3. Produkt-ID-en: bruk alltid getTrackingId()

Annonseplattformer som Meta og Google sammenstiller hendelsene dine med produktkatalogen via produkt-ID-en. Det betyr at item_id i hendelsene dine må være identisk med ID-en (g:id) i nettbutikkens produktfeed. Hvis de to er forskjellige, kan ikke plattformen knytte hendelsen til produktet i katalogen, og da vil katalogsammenstilling, dynamisk remarketing og produktrapportene mislykkes.

Derfor må du aldri sette sammen produkt-ID-er selv i malene dine. Bruk i stedet getTrackingId(), som alltid returnerer nøyaktig den ID-en nettbutikkens feed bruker:

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

Formatet avhenger av nettbutikkens oppsett:

• Standard: den numeriske produkt-ID-en, f.eks. 154585.
• Varianter: produkt-ID og variantverdienes ID, atskilt med kolon, f.eks. 154585:45789.
• Butikker med språk- eller landfeeder: varenummeret (SKU) i stedet, da dette er den stabile nøkkelen på tvers av landbutikkene. Varianterens varenummer brukes hvis det er utfylt, ellers produktets. Har produktet ikke noe varenummer i det hele tatt, faller ID-en tilbake til det numeriske formatet.

Alt dette håndteres automatisk av getTrackingId() per nettbutikk. Hvis du kjenner ID-en til variantverdien, for eksempel i sammenheng med handlekurv, kasse eller kvittering, sender du den med som en annen parameter:

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

Den første parameteren er attributtets ID. Den kan settes til null, da blir den automatisk hentet ut fra variantverdien.

Les mer om ID-skjemaet og hvordan du feilsøker samsvaringsgraden i Produkt-ID-er og katalogsamsvar hos Meta og Google.

4. Konfigurer Google Tag Manager via HTML-felt

Hvis du har fylt ut feltet «Google Tag Manager ID» under butikkens innstillinger, setter Shoporama automatisk inn GTM-snippet for deg. Det ligger nederst i partials/datalayer.html.

Hvis du i stedet ønsker å styre GTM (eller andre skript som Cookiebot, Hotjar eller Klaviyo) manuelt, må du bruke HTML-felt. Gå til Nettbutikk → HTML-felt. Her kan du opprette navngitte felt og velge om de skal settes inn automatisk i head eller body, eller brukes manuelt i temaet ditt via et tagnavn.

Et typisk GTM-utdrag i et HTML-felt med innstillingen «Legg til automatisk 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-XXXXXXX');</script>
<!-- Slutt på Google Tag Manager -->

Husk også <noscript>-fallbacken 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>
<!-- Slutt på Google Tag Manager (noscript) -->

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

5. Tagger og utløsere i GTM

Med standard datalag aktivert kan du bruke GA4s innebygde tagger og tilpassede hendelsesutløsere. Et typisk oppsett ser slik ut:

• GA4-konfigurasjonstag med ditt måle-ID, utløst på «All Pages»
• GA4-hendelsestag for hver e-handelshendelse, satt til å lese e-handelsobjektet fra datalaget
• Tilpassede hendelsesutløsere med navnene view_item, add_to_cart, begin_checkout, purchase osv.
• Bruk forhåndsvisningsmodus i GTM for å verifisere at hendelsene utløses med riktige data

For Google Ads-konverteringer kobler du Google Ads-konverterings-ID/etikett til «purchase»-hendelsen. Se også Google Analytics-sporing av nettbutikken din.

6. Tilpassede hendelser fra ditt eget tema

Hvis du skal utløse hendelser som ikke dekkes av standard datalaget, f.eks. avspilling av en video, et klikk på en fane, åpning av en chat eller en tilpasset CTA, må du sende data direkte til `window.dataLayer` fra temaet ditt:

<button onclick="trackVideoPlay()">Spill av video</button>

<script>
function trackVideoPlay() {
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: 'video_play',
    video_title: 'Produktdemo',
    video_id: 'demo-123'
  });
}
</script>

På kvitteringssiden kan du utløse din egen purchase-hendelse med order-objektet og Smarty. Bruk getTrackingId() for item_id, og pakk det hele inn i duplikatbeskyttelsen getTrackingCalled() / setTrackingCalled(), slik at hendelsen kun utløses én gang per ordre, selv om kunden laster inn kvitteringssiden på nytt:

<{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}>

Flagget er felles for alle sporingssnippets på bestillingen, inkludert temaets standard datalag. Hvis du har flere konverteringssnippets på kvitteringssiden (f.eks. et Pricerunner-piksel pluss din egen kjøpshendelse), må du sjekke flagget med getTrackingCalled() i hvert snippet, men kun kalle setTrackingCalled() én gang, som det siste, når alle snippets er utløst. Det samme mønsteret brukes i veiledningen Implementer Pricerunner-sporing.

7. 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 nettleserkonsollen for å se hele dataLayer-loggen
• Bruk GTMs forhåndsvisningsmodus for å se taggene utløses i sanntid
• Bekreft kjøpshendelser i GA4 DebugView
• Sjekk katalogsamsvar hos Meta i Events Manager → Test Events eller med nettleserutvidelsen Meta Pixel Helper. Feilmeldingen «Det er ikke mottatt innholds-ID-er» betyr vanligvis at item_id mangler eller ikke samsvarer med feedet. Se avsnittet om getTrackingId() ovenfor
• Hvis temaets datalag ikke utløses: sjekk om «Aktiver sporing» er merket av i Webshop → Sporing. Uten dette er datalayer.html-blokken inaktiv

Ofte stilte spørsmål

Må jeg velge mellom Shoporamas innebygde sporing og min egen GTM-konfigurasjon?

Nei, du kan godt kjøre begge deler samtidig. Det innebygde sporingsmodulet håndterer sine egne hendelser utenom temaet, mens din egen GTM-konfigurasjon kjører i temaet. Mange nettbutikker bruker begge deler for å få den mest robuste sporingen, spesielt i samtykkemodus, der hendelser på klientsiden kan blokkeres.

Hvilket format skal item_id ha i hendelsene mine?

Samme format som ID-en i nettbutikkens produktfeed: numerisk produkt-ID som standard, produkt-ID:variantverdi-ID for varianter, og varenummeret (SKU) på nettbutikker med språk- eller landfeeds. Du trenger ikke å holde styr på dette selv. Bruk $product->getTrackingId(), så vil ID-en alltid samsvare med feedet. Se detaljene i Produkt-ID-er og katalogsamsvar.

Hvorfor er samsvaringsgraden i Meta-katalogen min lav, selv om hendelsene mine går på høygir?

Nesten alltid fordi hendelsens item_id ikke er identisk med feedets id. Typiske årsaker er håndlagde id-er, varianter i feil rekkefølge eller SKU på det ene stedet og numerisk id på det andre. Bytt til getTrackingId() overalt, og verifiser med Test Events i Meta Events Manager.

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

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

Kan jeg overskrive eller deaktivere standardhendelsene som Shoporama utløser?

Ja, for temaets datalag. Hvis du har et helt tilpasset tema, må du ikke inkludere partials/datalayer.html. Hvis du bygger videre på Delaware eller Montana og bare vil endre enkelte hendelser, må du lage din egen delfil og inkludere den i stedet for standardversjonen. Den innebygde sporingen på serversiden styres derimot fra Nettbutikk → Sporing og påvirkes ikke av temaet.

Hvilke variabler har jeg tilgang til i dataLayer-malen?

De vanligste: $webshop, $product, $category, $order, $basket, $customer, $voucher samt $inc, som angir hvilken mal som vises (f.eks. basket.html, thanks.html).

Hvordan unngår jeg å utløse purchase-hendelsen to ganger hvis kunden oppdaterer kvitteringssiden?

Sjekk $order->getTrackingCalled() før du utløser hendelsen, og kall $order->setTrackingCalled() når alle konverteringssnippene dine er utløst. Flagget lagres på ordren, så det beholdes også ved oppfrisking. Se det fullstendige eksemplet i avsnittet om tilpassede hendelser ovenfor.

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

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

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

Ja. dataLayer er plattformuavhengig. Du kan konfigurere tagger i GTM til Meta CAPI, TikTok Events API eller hva som helst som støtter dataLayer som kilde. Alternativt kan du sende data direkte til plattformenes egne SDK-er (f.eks. fbq() eller ttq.track()) fra temaet ditt. Husk å bruke getTrackingId() som produkt-ID, uansett plattform.

Trenger du hjelp med implementeringen? Send en e-post til support@shoporama.dk.