Nödsituation

Vid nödsituationer eller driftstörningar kan du skicka ett SMS till vår jourtelefon

Jourtelefon (endast SMS)

+45 29 70 15 95

Skicka ett SMS med följande information:

  • Ditt namn och din webbshop
  • Beskrivning av problemet
  • Ditt telefonnummer för återuppringning

Anteckningar: Denna tjänst är endast avsedd för kritiska situationer där din webbshop ligger nere eller har allvarliga problem. För vanlig support, vänligen använd våra normala supportkanaler.

Alla supportartiklar

HTML-fält: infoga Cookiebot, GTM och andra skript i din webbutik

Så här använder du Shoporama HTML-fält för att infoga Cookiebot, Google Tag Manager, Facebook Pixel, chattwidgets och annan anpassad HTML/JavaScript i din webbutik.

Lästid: ca {åtta} minuter
Shopejer Utvecklare

Vill du ha Cookiebot, Google Tag Manager, Facebook Pixel, en chatt-widget eller en verifieringskod från Google Search Console i din webbshop? Det gör du via HTML-fält i Shoporama. Här kan du själv infoga den kod du har fått från tredjepart och välja om den ska infogas automatiskt i sidans <head> eller <body>.

Så här hittar du HTML-fält

  1. I vänster sidomeny hittar du avsnittet Webbshop(markerat med ett kugghjulsikon)
  2. Klicka på HTML-fält

Så här skapar du ett HTML-fält

HTML-felter-siden i Shoporama med et felt ved navn cookiebot, Cookiebot-scriptet indsat og placering sat til Indsæt sidst i head.
Ett HTML-fält som heter cookiebot med Cookiebot-skriptet infogat och placeringen inställd på Infoga längst bak i head. Längst ner finns knappen Lägg till nytt HTML-fält, där du kan skapa fler fält.
  1. Klicka på ”Lägg till nytt HTML-fält”
  2. Ge fältet ett beskrivande namn utan mellanslag, t.ex. cookiebot, chat_widget eller gsc_verify. Namnet används som tagnamn om du senare vill anropa fältet manuellt i ett tema
  3. Infoga din kod i textfältet
  4. Välj placering:
    • Infoga längst bak i <head> för verifieringstaggar, Cookiebot och skript som ska laddas tidigt
    • Infoga längst bak i <body> för chatt-widgets och skript som gärna får vänta
    • Lägg inte till automatiskt om du själv vill styra placeringen i ett privat tema
  5. Klicka på Spara

Tips: Du kan ta bort ett fält genom att tömma innehållet och klicka på Spara.

Var hamnar koden i sidans HTML?

Valet under Placering avgör exakt var din kod hamnar. Det är bra att veta när en tredjepart har tydliga anvisningar om var deras skript ska placeras:

  • Infoga längst bak i <head> – koden placeras allra sist i sidans <head>, det vill säga efter temats egna metataggar, sidtitel och stilmallar, men före Shoporamas eget spårningsskript och före kod från appar. Därför hinner en cookie-banner härifrån laddas innan spårningen startar
  • Infoga längst ner i <body> – koden placeras längst ner på sidan, direkt efter temats eget innehåll och JavaScript. Sidan har hunnit laddas klart innan ditt skript startar
  • Lägg inte till automatiskt – koden infogas inte av sig själv. Den visas först när du anropar fältets tagnamn i ett tema

Ett HTML-fält som du skapar under Webbshop → HTML-fält visas på alla sidor i webbshopen, även i varukorgen, kassan och på kvittosidan. Om du har flera fält med samma placering infogas de i alfabetisk ordning efter fältnamn. Om två skript ska laddas i en viss ordning kan du därför styra detta genom namngivningen, t.ex. 1_cookiebot och 2_chat.

Innehållet infogas exakt så som du har skrivit det. Shoporama gör inga ändringar i din kod, och eventuella Smarty-koder i fältet exekveras inte – fältet består av ren HTML.

Typiska användningsområden

  • Cookiebot – banner för samtycke till cookies. Om du infogar den i <head> kan den blockera andra spårningsskript tills kunden har gett sitt samtycke
  • Google Search Console / Bing Webmaster Tools – verifieringsmetataggar som bekräftar att du äger domänen
  • Hotjar, Microsoft Clarity, Mouseflow – värmekartor och sessionsinspelningar
  • Chatt-widgets – Tidio, Zendesk Chat, Intercom, Drift och liknande
  • Anpassad HTML, CSS eller JavaScript – smarta extrafunktioner i din egen design

Exempel: verifieringskoder för sökmotorer och annonsnätverk

Google Search Console, Bing Webmaster Tools, Pinterest och Meta Business Manager kräver alla bevis på att du äger domänen innan de ger dig tillgång till data om din webbutik. De tillhandahåller en liten metatagg som ska placeras på din startsida. En metatagg fungerar bara om den placeras i sidans <head>, så här ska placeringen alltid vara ”Infoga längst bak i <head>”.

Skapa ett fält, t.ex. verifiering, och samla alla dina verifieringskoder där. Ett fält kan gärna innehålla flera rader:

<meta name="google-site-verification" content="DIN-KOD-FRÅN-SEARCH-CONSOLE">
<meta name="msvalidate.01" content="DIN-KOD-FRÅN-BING">
<meta name="p:domain_verify" content="DIN-KOD-FRÅN-PINTEREST">
<meta name="facebook-domain-verification" content="DIN-KOD-FRÅN-META">

Ersätt värdena i content="..." med de du har fått från respektive leverantör och ta endast med de rader du faktiskt behöver. Om leverantören erbjuder flera metoder ska du välja den som heter HTML-tagg eller metatagg. Då slipper du att lägga upp en fil på domänen.

Ta inte bort fältet efteråt. Sökmotorerna och annonsnätverken kontrollerar koden regelbundet. Om den försvinner förlorar du tillgången till data och måste verifiera på nytt.

Ett Google Ads-konverterings-ID, ett GA4-mätnings-ID eller ett Facebook Pixel-ID ska däremot inte anges i ett HTML-fält. Dessa anger du under Webbshop → Spårning, där Shoporama själv kopplar ihop dem med e-handelshändelser. Se avsnittet HTML-fält eller Spårning längre ner.

Exempel: chatt-widget och livechatt

Tidio, Zendesk, Intercom, Crisp, Smartsupp och de flesta andra chattverktyg ger dig en färdig kodsnutt som du bara behöver kopiera in. En chattbubbla ska inte vara det första kunden ser, och den får gärna laddas efter resten av sidan. Därför hör den hemma längst ner:

  1. Klicka på ”Lägg till nytt HTML-fält” och ge fältet namnet t.ex. chat_widget
  2. Infoga hela kodsnuttet från chattleverantören, inklusive <script> och </script>
  3. Ställ in Placering på Infoga sist i <body>
  4. Klicka på Spara

Kodsnuttet ser vanligtvis ut så här, där id:t är ditt konto hos leverantören:

<script src="https://widget.dit-chatvaerktoej.dk/DIN-KONTO-ID.js" async></script>

Heatmaps och sessionsinspelningar från t.ex. Hotjar, Microsoft Clarity eller Mouseflow konfigureras på samma sätt, men de bör laddas in tidigt för att hinna spela in hela besöket. Följ alltid leverantörens egna anvisningar: om det står head i deras instruktioner ska du välja Infoga sist i <head>.

Om du använder en cookie-banner, kom ihåg att chatt, värmekartor och liknande verktyg ofta sätter cookies. De måste därför märkas enligt cookie-bannerets anvisningar, så att de först aktiveras när kunden har gett sitt samtycke. Läs mer i vår guide om cookie-samtycke och Consent Mode.

Exempel: egen CSS, JavaScript och widgets

En liten justering i designen

Om du bara behöver justera en enskild detalj utan att öppna temat kan du lägga in din CSS i ett HTML-fält med placeringen ”Infoga sist” i <head>. Eftersom fältet infogas efter temats stylesheets har dina regler i utgångspunkten företräde framför temats egna:

<style>
/* Ersätt .din-klass med den klass du hittar i webbläsarens inspektör */
.din-klass { background: #f5f5f5; }
</style>

Om du däremot har en liten bit JavaScript som ska köras när sidan har laddats, placera den i ett fält med placeringen ”Infoga sist” i <body>. Använd detta endast för små justeringar: större ändringar i designen hör hemma i temat, där de är lättare att hålla reda på.

En widget som ska visas på en viss plats

Vissa widgets, t.ex. recensionsvisningar och prisberäknare, består av två delar: ett skript som laddar verktyget och en bit HTML som bestämmer var på sidan widgeten ska ritas. Dela upp dem i två fält:

  • Själva skriptet placerar du i ett fält med placeringen Infoga sist i <head> eller Infoga sist i <body>, beroende på vad leverantören rekommenderar
  • Widgetkoden placerar du i ett fält med placeringen ”Lägg inte till automatiskt” och anger tagnamnet på den plats i temat där widgeten ska visas

Längre ner i avsnittet Använd HTML-fält manuellt i ett tema kan du se hur du anger tagnamnet.

HTML-fält eller spårning – vad ska jag använda?

Shoporama har också en sida under Webbutik → Spårning med färdiga fält för de vanligaste verktygen:

  • Microsoft Ads (Bing)
  • Google Analytics 4 (mätnings-ID)
  • Google Ads-konverterings-ID
  • Pinterest, Snapchat, TikTok och LinkedIn
  • Facebook Pixel-ID och Conversion API

Om du bara har ett ID för något av dessa verktyg, ange det under Spårning. Shoporama sköter automatiskt korrekt konfiguration och e-handelshändelser. Använd HTML-fält först när du har en kodsnutt som inte passar in i något av de fasta fälten, t.ex. Cookiebots fullständiga skript eller en verifieringstagg.

Inbyggd serversidespårning: Shoporama har sin egen lösning för serversidespårning (sGTM via Stape). Du behöver inte själv konfigurera en tagghanterare – aktivera bara serversidigt spårning under Spårning, ange dina ID:n för GA4, Facebook och Google Ads, så skickar Shoporama e-handelshändelser på serversidan. Du får även cookielösa signaler vid avsaknad av samtycke. Tillval från 89 kr/mån exkl. moms.

Egen GTM: Om du föredrar att hantera allt själv i din egen Google Tag Manager-container kan du infoga GTM-snippetet som ett HTML-fält (placerat längst bak i <head>) och hantera Cookiebot, Pixel, Hotjar m.fl. inuti GTM. De två lösningarna bör inte köras samtidigt.

Använd HTML-fält manuellt i ett tema

Om du har ett eget tema och vill placera ett HTML-fält på en specifik plats i din mall, ställ in fältet på ”Lägg inte till automatiskt” och anropa tagnamnet i din Smarty-mall:

<{$webshop->getHtmlField('cookiebot')}>

Innehållet renderas i råformat, så att <script>-taggar fungerar som förväntat. Kom ihåg att stänga av automatisk infogning, annars visas fältet två gånger.

HTML-fält på andra ställen än i webbutiken

Det HTML-fält som du skapar under Webbutik gäller för hela webbutiken. Om du bara vill ha ett skript på enskilda produkter, kategorier, sidor, blogginlägg eller landningssidor kan du skapa HTML-fält direkt på dessa objekt under deras respektive redigeringssidor. Det är praktiskt för exempelvis schema-markup eller en kampanjpixel som endast ska aktiveras på en landningssida.

Viktigt om säkerhet och hastighet

  • Infoga endast kod från källor du litar på. Skadligt eller felaktigt JavaScript kan påverka hela webbutiken, inklusive kassan
  • Varje extra skript påverkar sidhastigheten negativt. Använd async eller defer om tredjepartsleverantören rekommenderar det
  • Testa alltid din webbutik efteråt, t.ex. genom att högerklicka i webbläsaren och välja ”Visa källkod” för att kontrollera att koden har laddats in

Vanliga frågor

Var hittar jag HTML-fält i admin?

Gå till Webbutik → HTML-fält. Om menyalternativet inte syns kan det hända att du saknar behörighet – fråga den som har skapat ditt konto.

Kan jag förstöra min webbutik genom att mixtra med HTML-fält?

Du påverkar inte dina produkter, beställningar eller kunder. I värsta fall kan en felaktig kodsnutt få sidorna att se konstiga ut eller påverka prestandan. Rensa fältet och spara, så försvinner det igen.

Hur testar jag om mitt HTML-fält fungerar?

Öppna webbutiken i ett privat webbläsarfönster, högerklicka och välj ”Visa källkod”. Sök efter en del av din kod (t.ex. en kommentar eller ett tagg-ID). För spårningsskript kan du installera webbläsartillägg som Tag Assistant (GTM/GA4) eller Pixel Helper (Facebook).

Hur tar jag bort ett HTML-fält som jag inte använder längre?

Töm hela innehållet i fältet och klicka på Spara. Fältet försvinner. Kontrollera först att tagnamnet inte anropas manuellt någonstans i ett privat tema, annars kan du få en tom plats eller ett fel.

Vad är skillnaden mellan Webshop → Spårning och HTML-fält?

Spårning har färdiga fält för de vanligaste verktygen (GA4, Facebook Pixel, Google Ads, Microsoft Ads osv.) där du bara anger ditt ID. På samma ställe aktiverar du Shoporamas inbyggda serversidiga spårning, så att du slipper underhålla en Tag Manager-container själv. HTML-fält är den flexibla lösningen för allt annat – t.ex. Cookiebot, verifieringskoder och chatt-widgets. Om du har möjlighet, använd Spårning – Shoporama kopplar ihop de officiella integrationerna korrekt.

Ska Cookiebot placeras i <head> eller <body>?

Cookiebot ska placeras i <head> så att den hinner blockera spårningsskript tills kunden har gett sitt samtycke. Välj därför ”Infoga sist i <head>” i HTML-fältet. Följ sedan Cookiebots egna anvisningar för att märka andra skript med samtyckesattribut.

Påverkar HTML-fält sidans laddningshastighet?

Ja – varje extra skript förlänger laddningstiden och kan påverka Core Web Vitals. Håll antalet nere, använd async eller defer där det är möjligt och överväg att samla flera skript i Google Tag Manager så att de laddas på ett och samma ställe.

Måste jag konfigurera det på nytt i var och en av mina webbutiker?

Ja – HTML-fält är specifika för varje webbshop. Om du vill ha en enhetlig lösning för flera butiker är det enklast att lägga allt i en GTM-container och infoga GTM-snippetet som ett HTML-fält i varje butik.

Jag har sparat mitt HTML-fält, men koden visas inte i webbutiken

Kontrollera först att Placering inte är inställd på Lägg inte till automatiskt – då visas koden endast om den anropas från temat. Om placeringen är korrekt beror det oftast på att sidorna i en live-webbutik sparas i en HTML-cache i upp till fyra timmar. Du ser alltid den senaste versionen om du är inloggad i admin i samma webbläsare, har något i varukorgen eller lägger till en slumpmässig parameter i adressfältet, t.ex. ?test=1. Senast efter fyra timmar uppdateras cachen automatiskt, och alla besökare ser koden.

Ska min chattwidget placeras i head eller body?

Body. En chattbubbla behöver inte vara klar innan sidan har laddats, och ett skript i <head> fördröjer visningen av innehållet. Välj därför ”Infoga sist i <body>”. Undantagen är verktyg som själva kräver att placeras i head: cookiebannrar som måste hinna blockera andra skript, och heatmap-verktyg som måste hinna registrera hela besöket.

Kan jag placera ett skript endast på en kampanjsida eller en produkt?

Ja. Samma HTML-fält finns på enskilda produkter, kategorier, sidor, blogginlägg och landningssidor. Ett fält som finns på exempelvis en landningssida infogas endast när just den sidan visas, och det placeras efter det fält som gäller hela webbutiken. Det är praktiskt om en annonspartner kräver en pixel på en kampanjsida, utan att den aktiveras på resten av webbutiken.

Leverantören ber mig att lägga upp en HTML-fil på min domän. Vad gör jag?

Välj en annan metod. Nästan alla sökmotorer och annonsnätverk erbjuder även verifiering med en metatagg, och det är den metoden som passar för HTML-fält. Du kopierar helt enkelt taggen till ett fält med placeringen ”Infoga i slutet av <head>” och klickar på Spara. Om du endast kan använda filmetoden, skriv till support@shoporama.dk så hittar vi en lösning.

Om du har frågor är du välkommen att skriva till oss på support@shoporama.dk.

Relaterade artiklar

Spårning på serversidan i Shoporama

En komplett guide till server-side tracking i Shoporama. Bättre datakvalitet, färre förluster på grund av annonsblockerare, produkt-ID:n som...

Samtycke till cookies och samtyckesläge v2

Så här konfigurerar du Shoporamas kostnadsfria app för samtycke till cookies: kategorier, automatisk blockering, återkallande av samtycke och...

GDPR och regler för cookies i din webbutik

Översikt över GDPR och cookie-reglerna för webbutiker: samtycke före spårning, dokumentation och cookiepolicy, samt hur Shoporama uppfyller kraven.

Avtal om databehandling

Guide för att godkänna databehandlingsavtalet med Shoporama enligt GDPR.