Implementer tracking i et Shoporama-tema

Denne guide er til tema-udviklere og freelancere, der vil implementere e-commerce tracking i et Shoporama-tema. Vi gennemgår Shoporamas indbyggede sporing, det automatiske data layer, opsætning af Google Tag Manager og hvordan du kan fyre custom events fra dit eget tema.

1. Brug Shoporamas indbyggede sporing

Før du skriver kode selv, så overvej Shoporamas sporingsmodul. Du finder det i venstre sidebar under Webshop (tandhjul-ikonet) → Sporing. Sæt flueben i Aktiver sporing, vælg de platforme du vil sende data til, og indtast dine ID'er og access tokens.

Modulet understøtter:

• Facebook Pixel og Conversion API
• Google Ads (inkl. offline conversions)
• Microsoft Ads
• Google GA4
• Pinterest, Snapchat, TikTok og LinkedIn
• Server-side tracking via dit eget underdomæne (slipper for adblockers)
• Consent Mode v2

Når sporingsmodulet er aktivt, fyrer Shoporama automatisk events til de valgte platforme. I din shops frontend bliver der også pushet et komplet GA4 e-commerce data layer plus en Google Tag Manager-container, hvis du har udfyldt et GTM-ID under shoppens indstillinger.

2. Det automatiske data layer

Standardtemaerne (Delaware, Montana, Massachusetts m.fl.) inkluderer en partial der hedder partials/datalayer.html. Den pusher GA4-kompatible e-commerce events til window.dataLayer, så snart sporing er aktiveret på shoppen.

Følgende events fyres automatisk af temaet:

Et typisk view_item push genereret af temaet ser sådan ud:

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

Bygger du dit eget tema fra bunden, kan du kopiere templates/partials/datalayer.html fra Delaware-temaet og inkludere den i din global.html:

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

3. Opsæt Google Tag Manager via HTML-felter

Hvis du har udfyldt feltet Google Tag Manager Container ID under shoppens indstillinger, indsætter Shoporama automatisk GTM-snippet'en for dig — den ligger i bunden af partials/datalayer.html.

Vil du i stedet styre GTM (eller andre scripts som Cookiebot, Hotjar eller Klaviyo) manuelt, skal du bruge HTML-felter i stedet. Gå til Webshop → HTML-felter. Her kan du oprette navngivne felter og vælge om de skal indsættes automatisk i head eller body, eller bruges manuelt i dit tema via et tagnavn.

Et typisk GTM-snippet i et HTML-felt sat til "Tilføj automatisk til head" ser sådan ud:

Husk også

Læs mere om hvordan HTML-felter virker i HTML-felter: Indsæt Cookiebot, GTM og andre scripts.

4. Tags og triggers i GTM

Med standard data layer aktivt kan du bruge GA4's indbyggede tags og custom event-triggers. En typisk opsætning ser sådan ud:

• GA4 Configuration Tag med dit Measurement ID, fyret på All Pages
• GA4 Event Tag for hvert e-commerce event — sat til at læse ecommerce-objektet fra data layer
• Custom Event triggers med navnene view_item, add_to_cart, begin_checkout, purchase osv.
• Brug Preview-mode i GTM til at verificere at events fyrer med korrekte data

For Google Ads-konverteringer linker du dit Google Ads Conversion ID/Label til purchase-eventet. Se også Google Analytics tracking af din webshop.

5. Custom events fra dit eget tema

Skal du fyre events der ikke er dækket af standard-datalayeret — fx en video-afspilning, en faneklik, en chat-åbning eller en custom CTA — så push direkte til window.dataLayer fra dit tema:

Afspil video

På kvitteringssiden kan du udvide eller erstatte standard purchase-eventet ved at bruge order-objektet og Smarty:

Bemærk at Shoporamas standard-purchase event allerede sætter setTrackingCalled() på ordren, så det kun fyrer én gang. Hvis du vil have samme adfærd på dit custom event, må du selv håndtere idempotens (fx via en cookie eller localStorage).

6. Test og fejlfinding

• Brug Chrome-udvidelsen GTM/GA Debugger eller Tag Assistant til at se hvilke events der fyrer
• Skriv window.dataLayer i browser-konsollen for at se hele dataLayer-historikken
• Brug GTM's Preview-mode til at se tags fire i realtid
• Verificer purchase-events i GA4 DebugView
• Hvis intet fyrer: tjek om Aktiver sporing er sat i Webshop → Sporing — uden den er datalayer.html-blokken inaktiv

Ofte stillede spørgsmål

Skal jeg vælge mellem Shoporamas indbyggede sporing og min egen GTM-opsætning?

Nej, du kan sagtens køre begge dele samtidig. Det indbyggede sporingsmodul sender data server-side til de valgte platforme, mens dit eget GTM-setup kører klient-side. Mange shops kører faktisk begge for at få den mest robuste sporing — især under Consent Mode hvor klient-side events kan blokeres.

Hvor skal jeg lægge GTM-snippet'en hvis jeg ikke vil bruge HTML-felter?

Direkte i dit temas templates/global.html eller en custom header-partial. Vi anbefaler dog HTML-felter, da de overlever tema-opdateringer og kan ændres uden at deploye et nyt tema.

Kan jeg overskrive eller deaktivere de standard-events Shoporama fyrer?

Ja. Hvis du har et helt custom tema, så lad være med at inkludere partials/datalayer.html. Bygger du videre på Delaware eller Montana og kun vil ændre enkelte events, så lav din egen partial og inkludér den i stedet for standard-versionen.

Hvilke variabler har jeg adgang til i dataLayer-templaten?

De typiske: $webshop, $product, $category, $order, $basket, $customer, $voucher samt $inc der angiver hvilken template der renderes (fx basket.html, thanks.html). Klasserne er dokumenteret i admin/class/safe/.

Hvordan undgår jeg at fyre purchase-eventet to gange hvis kunden refresher kvitteringssiden?

Det håndteres allerede af temaet via $order->getTrackingCalled() og $order->setTrackingCalled(). Bygger du dit eget purchase-event, så genbrug samme mønster, eller læg en flag-cookie/localStorage-værdi efter første fyring.

Skal jeg tage højde for Consent Mode i mit eget tema?

Ja. Hvis kunden ikke har givet samtykke, må du ikke fyre tracking-events der bruger cookies. Brug en cookie consent manager (Cookiebot, CookieInformation eller egen løsning) og lad GTM-tags afhænge af consent state. Shoporamas server-side sporing håndterer Consent Mode automatisk når du aktiverer Brug Consent Mode i sporingsmodulet.

Kan jeg sende egne dataLayer-events til andre platforme end Google?

Ja. dataLayer er platform-agnostisk. Du kan opsætte tags i GTM til Meta CAPI, TikTok Events API eller hvad som helst der understøtter dataLayer som kilde. Alternativt kan du fyre direkte til platformenes egne SDK'er (fx fbq() eller ttq.track()) fra dit tema.

Har du brug for hjælp med implementeringen? Skriv til support@shoporama.dk.