HTML-felt: Sett inn Cookiebot, GTM og andre skript i nettbutikken din
Slik bruker du Shoporama HTML-felt til å sette inn Cookiebot, Google Tag Manager, Facebook Pixel, chat-widgeter og annen tilpasset HTML/JavaScript i nettbutikken din.
Vil du ha Cookiebot, Google Tag Manager, Facebook Pixel, en chat-widget eller en bekreftelseskode fra Google Search Console på nettbutikken din? Det gjør du via HTML-feltene i Shoporama. Her kan du selv legge inn koden du har fått fra en tredjepart, og velge om den skal legges inn automatisk i sidens <head> eller <body>.
Slik finner du HTML-feltene
- I venstre sidefelt finner du nettbutikk-seksjonen(merket med et tannhjul-ikon)
- Klikk på «HTML-felt»
Slik oppretter du et HTML-felt
- Klikk på «Legg til nytt HTML-felt»
- Gi feltet et beskrivende navn uten mellomrom, f.eks. «cookiebot», «chat_widget» eller «gsc_verify». Navnet brukes som tagnavn hvis du senere vil hente feltet manuelt i et tema
- Sett inn koden din i tekstfeltet
- Velg Plassering:
- Sett inn helt på slutten av <head> for verifiserings-tagger, Cookiebot og skript som skal lastes inn tidlig
- Sett inn helt på slutten av <body> for chat-widgets og skript som gjerne kan vente
- Ikke legg til automatisk hvis du selv vil styre plasseringen i et privat tema
- Klikk på Lagre
Tips: Du kan slette et felt ved å tømme innholdet og klikke på Lagre.
Hvor havner koden i sidens HTML?
Valget under «Plassering» avgjør nøyaktig hvor koden din havner. Det er verdt å vite når en tredjepart har en klar instruksjon om hvor skriptet deres skal plasseres:
- Sett inn helt på slutten av <head> – koden plasseres helt på slutten av sidens <head>, altså etter temaets egne metatagger, sidetittel og stilark, men før Shoporamas eget sporingsskript og før kode fra apper. Derfor rekker et cookie-banner å lastes inn herfra før sporingen starter
- Sett inn helt på slutten av <body> – koden plasseres nederst på siden, rett etter temaets eget innhold og JavaScript. Siden er fullstendig lastet inn før skriptet ditt starter
- Ikke legg til automatisk – koden settes ikke inn av seg selv. Den vises først når du kaller opp feltets tagnavn i et tema
Et HTML-felt du oppretter under Nettbutikk → HTML-felt, vises på alle sider i nettbutikken, inkludert handlekurven, kassen og kvitteringssiden. Hvis du har flere felt med samme plassering, settes de inn i alfabetisk rekkefølge etter feltnavn. Hvis to skript skal lastes inn i en bestemt rekkefølge, kan du derfor styre dette med navngivningen, f.eks. 1_cookiebot og 2_chat.
Innholdet settes inn nøyaktig slik du har skrevet det. Shoporama endrer ikke koden din, og eventuelle Smarty-koder i feltet blir ikke utført – feltet er ren HTML.
Typiske bruksområder
- Cookiebot – banner for samtykke til informasjonskapsler. Hvis du setter den inn i <head>, kan den blokkere andre sporingsskript inntil kunden har gitt sitt samtykke
- Google Search Console / Bing Webmaster Tools – verifiserings-metatagger som bekrefter at du eier domenet
- Hotjar, Microsoft Clarity, Mouseflow – varmekart og sesjonsopptak
- Chat-widgets – Tidio, Zendesk Chat, Intercom, Drift og lignende
- Tilpasset HTML, CSS eller JavaScript – smarte tilleggsfunksjoner i ditt eget design
Eksempel: verifiseringskoder for søkemotorer og annonsenettverk
Google Search Console, Bing Webmaster Tools, Pinterest og Meta Business Manager krever alle bevis på at du eier domenet før de gir deg tilgang til data om nettbutikken din. De utsteder en liten metatag som må plasseres på forsiden din. En metatag fungerer bare hvis den står i sidens <head>, så her skal plasseringen alltid være «Sett inn sist i <head>».
Opprett ett felt, for eksempel «verifisering», og samle alle verifikasjonskodene dine der. Et felt kan gjerne inneholde flere linjer:
<meta name="google-site-verification" content="DIN-KODE-FRA-SEARCH-CONSOLE">
<meta name="msvalidate.01" content="DIN-KODE-FRA-BING">
<meta name="p:domain_verify" content="DIN-KODE-FRA-PINTEREST">
<meta name="facebook-domain-verification" content="DIN-KODE-FRA-META">Erstatt verdiene i content="..." med de du har fått fra den enkelte leverandøren, og ta kun med de linjene du faktisk skal bruke. Hvis leverandøren tilbyr flere metoder, må du velge den som heter HTML-tag eller meta-tag. Da slipper du å legge ut en fil på domenet.
Ikke slett feltet etterpå. Søkemotorene og annonsenettverkene sjekker koden på nytt med jevne mellomrom. Hvis den forsvinner, mister du tilgangen til dataene og må verifisere på nytt.
Et Google Ads-konverterings-ID, et GA4-måle-ID eller et Facebook Pixel-ID skal derimot ikke legges inn i et HTML-felt. Disse legger du inn under Nettbutikk → Sporing, der Shoporama selv kobler dem til e-handelshendelser. Se avsnittet HTML-felt eller Sporing lenger ned.
Eksempel: chat-widget og live chat
Tidio, Zendesk, Intercom, Crisp, Smartsupp og de fleste andre chatverktøy gir deg en ferdig kodebit som du bare trenger å kopiere inn. En chatboble skal ikke være det første kunden ser, og den kan gjerne lastes inn etter resten av siden. Derfor hører den hjemme nederst:
- Klikk på «Legg til nytt HTML-felt», og gi feltet et navn, for eksempel «chat_widget»
- Sett inn hele kodebiten fra chattleverandøren, inkludert <script> og </script>
- Sett «Plassering» til «Sett inn sist» i <body>
- Klikk på «Lagre»
Kodebiten ser vanligvis slik ut, der id-en er din konto hos leverandøren:
<script src="https://widget.dit-chatvaerktoej.dk/DIN-KONTO-ID.js" async></script>Heatmaps og sesjonsopptak fra for eksempel Hotjar, Microsoft Clarity eller Mouseflow konfigureres på samme måte, men de bør lastes inn tidlig for å rekke å registrere hele besøket. Følg alltid leverandørens egne instruksjoner: hvis det står «head» i veiledningen deres, må du velge «Sett inn sist i <head>».
Hvis du bruker et cookie-banner, må du huske at chat, varmekart og lignende verktøy ofte setter cookies. De må derfor merkes i henhold til cookie-bannerets veiledning, slik at de først aktiveres når kunden har gitt samtykke. Les mer i vår guide til samtykke til informasjonskapsler og Consent Mode.
Eksempel: egen CSS, JavaScript og widgets
En liten justering i designet
Hvis du bare skal rette en enkelt detalj uten å åpne temaet, kan du legge inn CSS-en din i et HTML-felt med plasseringen «Sett inn sist» i <head>. Fordi feltet settes inn etter temaets stylesheets, vil reglene dine som utgangspunkt ha forrang fremfor temaets egne:
<style>
/* Erstatt .din-klasse med klassen du finner i nettleserens inspeksjonsverktøy */
.din-klasse { background: #f5f5f5; }
</style>Har du derimot et lite stykke JavaScript som skal kjøres når siden er lastet inn, kan du plassere det i et felt med plasseringen «Sett inn sist» i <body>. Begrens dette til småting: større endringer i designet hører hjemme i temaet, der de er enklere å holde oversikt over.
En widget som skal vises på et bestemt sted
Noen widgets, for eksempel anmeldelsesvisninger og prisberegnere, består av to deler: et skript som laster inn verktøyet, og et stykke HTML som bestemmer hvor på siden widgeten skal vises. Del dem opp i to felt:
- Selve skriptet legger du i et felt med plasseringen «Sett inn sist i <head>» eller «Sett inn sist i <body>», avhengig av hva leverandøren anbefaler
- Widget-koden legger du i et felt med plasseringen «Ikke legg til automatisk», og angir tagnavnet som det stedet i temaet hvor widgeten skal vises
Lenger ned i avsnittet «Bruk HTML-felt manuelt i et tema » kan du se hvordan du angir tagnavnet.
HTML-felt eller Sporing – hva skal jeg bruke?
Shoporama har også en side under «Nettbutikk» → «Sporing» med ferdige felt for de mest brukte verktøyene:
- Microsoft Ads (Bing)
- Google Analytics 4 (måle-ID)
- Google Ads-konverterings-ID
- Pinterest, Snapchat, TikTok og LinkedIn
- Facebook Pixel-ID og Conversion API
Hvis du bare har en ID for et av disse verktøyene, kan du legge den inn under «Sporing». Shoporama sørger automatisk for riktig oppsett og e-handelshendelser. Bruk først HTML-felt når du har en kodebit som ikke passer inn i et av de faste feltene, for eksempel Cookiebots fullstendige skript eller en verifiseringstag.
Innebygd serversidesporing: Shoporama har sin egen løsning for serversidesporing (sGTM via Stape). Du trenger ikke å konfigurere en Tag Manager selv – bare aktiver server-side sporing under «Sporing», skriv inn ID-ene dine for GA4, Facebook og Google Ads, så sender Shoporama e-handelshendelser på serversiden. Du får også cookie-frie signaler ved manglende samtykke. Tilvalg fra 89 kr/måned ekskl. mva.
Egen GTM: Hvis du foretrekker å styre alt selv i din egen Google Tag Manager-container, kan du sette inn GTM-snippetet som et HTML-felt (plassert helt på slutten av <head>) og styre Cookiebot, Pixel, Hotjar osv. inne i GTM. De to løsningene bør ikke kjøre samtidig.
Bruk HTML-felt manuelt i et tema
Hvis du har et eget tema og ønsker å plassere et HTML-felt på et bestemt sted i malen din, sett feltet til «Ikke legg til automatisk» og hent tagnavnet i Smarty-malen din:
<{$webshop->getHtmlField('cookiebot')}>Innholdet vises i råform, slik at <script>-tagger fungerer som forventet. Husk å slå av automatisk innsetting, ellers vises feltet to ganger.
HTML-felt andre steder enn i nettbutikken
HTML-feltet du oppretter under «Nettbutikk», gjelder for hele nettbutikken. Hvis du kun ønsker et skript på enkelte produkter, kategorier, sider, blogginnlegg eller landingssider, kan du opprette HTML-felt direkte på disse objektene under deres respektive redigeringssider. Dette er praktisk for eksempel for schema-markup eller en kampanjepiksel som kun skal aktiveres på én landingsside.
Viktig informasjon om sikkerhet og hastighet
- Sett kun inn kode fra kilder du stoler på. Skadelig eller feilaktig JavaScript kan påvirke hele nettbutikken, inkludert kassen
- Hvert ekstra skript går ut over sidens hastighet. Bruk «async» eller «defer» hvis tredjepartsleverandøren anbefaler det
- Test alltid nettbutikken din etterpå, for eksempel ved å høyreklikke i nettleseren og velge «Vis kildekode» for å se at koden er lagt inn
Ofte stilte spørsmål
Hvor finner jeg HTML-feltene i administrasjonspanelet?
Gå til Nettbutikk → HTML-felt. Hvis menypunktet ikke er synlig, mangler brukeren din kanskje rettigheter – spør den som har opprettet kontoen din.
Kan jeg ødelegge nettbutikken min ved å tukle med HTML-feltene?
Du rører ikke produktene, ordrene eller kundene dine. I verste fall kan en feil kodebit få sidene til å se merkelige ut, eller påvirke ytelsen. Tøm feltet og lagre, så er det borte igjen.
Hvordan tester jeg om HTML-feltet mitt fungerer?
Åpne nettbutikken i en privat nettleserfane, høyreklikk og velg «Vis kildekode». Slå opp en del av koden din (f.eks. en kommentar eller en tag-ID). For sporingsskript kan du installere nettleserutvidelser som Tag Assistant (GTM/GA4) eller Pixel Helper (Facebook).
Hvordan sletter jeg et HTML-felt jeg ikke bruker lenger?
Tøm hele innholdet i feltet og klikk på «Lagre». Feltet forsvinner. Sjekk først at tagnavnet ikke kalles manuelt et sted i et privat tema, ellers kan du få en tom plass eller en feil.
Hva er forskjellen mellom Nettbutikk → Sporing og HTML-felt?
Sporing har ferdige felt for de mest brukte verktøyene (GA4, Facebook Pixel, Google Ads, Microsoft Ads osv.), der du bare setter inn ID-en din. På samme sted aktiverer du Shoporamas innebygde server-side sporing, slik at du slipper å vedlikeholde en Tag Manager-container selv. HTML-felt er den fleksible løsningen for alt annet – for eksempel Cookiebot, bekreftelseskoder og chat-widgets. Hvis du har muligheten, bør du bruke «Sporing» – Shoporama kobler de offisielle integrasjonene riktig til.
Skal Cookiebot plasseres i <head> eller <body>?
Cookiebot skal plasseres i <head>, slik at den rekker å blokkere sporingsskript inntil kunden har gitt samtykke. Velg derfor «Sett inn sist i <head>» i HTML-feltet. Følg deretter Cookiebots egne instruksjoner for å merke andre skript med samtykkeattributter.
Påvirker HTML-felter sidens lastetid?
Ja – hvert ekstra skript øker lastetiden og kan påvirke Core Web Vitals. Hold antallet nede, bruk «async» eller «defer» der det er mulig, og vurder å samle flere skript i Google Tag Manager, slik at de lastes inn kontrollert fra ett sted.
Må jeg sette det opp på nytt i hver av nettbutikkene mine?
Ja – HTML-felt er spesifikke for hver nettbutikk. Hvis du vil holde det ensartet på tvers av flere butikker, er den enkleste måten å legge alt i én GTM-container og sette inn GTM-koden som et HTML-felt i hver butikk.
Jeg har lagret HTML-feltet mitt, men koden vises ikke i nettbutikken
Sjekk først at Plassering ikke er satt til Ikke legg til automatisk – da vises koden bare hvis den hentes fra temaet. Hvis plasseringen er riktig, skyldes det vanligvis at sidene i en live-butikk lagres i en HTML-cache i opptil fire timer. Du ser alltid den nyeste versjonen hvis du er logget inn i admin i samme nettleser, har noe i handlekurven eller legger til en tilfeldig parameter i adressefeltet, f.eks. ?test=1. Senest etter fire timer oppdateres cachen automatisk, og alle besøkende ser koden.
Skal chat-widgeten min plasseres i head eller body?
Body. En chatboble trenger ikke å være klar før siden er lastet inn, og et skript i <head> forsinker visningen av innholdet. Velg derfor «Sett inn sist i <body>». Unntakene er verktøy som selv ber om å plasseres i head: cookie-bannere som må rekke å blokkere andre skript, og heatmap-verktøy som må rekke å registrere hele besøket.
Kan jeg plassere et skript kun på én kampanjeside eller ett produkt?
Ja. De samme HTML-feltene finnes på det enkelte produkt, i kategorien, på siden, i blogginnlegget og på landingssiden. Et felt som ligger på for eksempel en landingsside, settes inn bare når akkurat den siden vises, og det plasseres etter feltet som gjelder hele nettbutikken. Dette er praktisk hvis en annonsepartner krever en piksel på én kampanjeside, uten at den utløses på resten av nettbutikken.
Leverandøren ber meg legge inn en HTML-fil på domenet mitt. Hva gjør jeg?
Velg en annen metode. Nesten alle søkemotorer og annonsenettverk tilbyr også verifisering med en metatag, og det er den metoden som passer for HTML-felt. Du kopierer bare taggen inn i et felt med plasseringen «Sett inn på slutten av <head>» og klikker på «Lagre». Hvis du kun kan bruke filmetoden, kan du skrive til support@shoporama.dk, så finner vi en løsning.
Har du spørsmål, er du velkommen til å skrive til oss på support@shoporama.dk.
Relaterte artikler
Sporing på serversiden i Shoporama
En komplett guide til sporing på serversiden i Shoporama. Bedre datakvalitet, færre tap på grunn av annonseblokkere, produkt-ID-er som samsvarer...
Samtykke til informasjonskapsler og samtykkemodus v2
Slik konfigurerer du Shoporamas gratis app for samtykke til informasjonskapsler: kategorier, automatisk blokkering, tilbakekalling av samtykke og...
GDPR og retningslinjer for informasjonskapsler for nettbutikken din
Oversikt over GDPR og regelverket for informasjonskapsler i nettbutikker: samtykke før sporing, dokumentasjon og retningslinjer for...
Databehandleravtale
Veiledning for å godkjenne databehandleravtalen med Shoporama i henhold til GDPR.