Hur lägger jag in externa skript på webbplatsen – E37 Hjälpcenter

Introduktion

Denna guide går igenom var och hur du kan lägga till skript-funktioner som komponenter. Dessa är främst tänkt att användas för skript som ska köras på alla webbsidor på hela din butik/webbplats. Detta kan t.ex. vara funktioner från externa tjänster som Live-Chat, omdömesfunktion eller popups, eller skript för spårning av hur besökarna använder din webbplats. Du gör detta genom att lägga till skriptet i en ny skript-komponent.

Det kan även lägga till egna skript på samma sätt, men det förutsätter du har skrivit ett eget skript som ska läggas in på alla sidor på din webbplats, vilket inte är ett vanligt fall.

Om du vill lägga in ett skript på en enda sida, skrolla ned till rubriken "Skript på enskiljda sidor".

Tredjepartstjänster vars skript redan finns inbyggda i E37

För de allra vanligast förekommande tredjepartstjänster E37s butiker använder är inbyggda direkt via Kontrollpanelen -> Webbplats Allmänt -> Fliken Externa tjänster. Här ligger fält för att konfigurera tjänsterna i listan nedan. För dessa tjänster ska du inte själv lägga in något skript från tjänsten i E37s admin.

Google Analytics
Google Tag Manager
Google Search Console
Facebook Pixel
Facebook Business Manager
Facebook Conversion
X (tidigare Twitter)
Lipscore
Share Buttons från AddThis

Lägg alltså inte in skript för tjänsterna ovan, varken som en komponent eller Fri HTML-kod
För ovanstående tjänster ska du alltså inte lägga till som en komponent, (varken som en egen komponent eller från en mall), eller med widgeten Fri HTML-kod.

Gå istället till Kontrollpanelen -> Webbplats Allmänt -> Fliken Externa tjänster konfigurera tjänsten därifrån.

Hur fungerade skript på E37 förut? Varför bytte ni till att skript ska vara inlagda som komponenter?

Tidigare kunde man i E37 admin lägga till skript genom Kontrollpanelen -> Webbplats Allmänt -> Fliken Skript. Hade man många skript ifrån olika externa tjänster, vilket de flesta större webbshoppar som använder E37 snabbt fick, så blev det dock svårt att hålla reda på vilken av delarna i de olika skript-fälten som hörde till vilken extern tjänst. Det ledde i sin tur att det blev onödigt svårt att senare uppdatera eller ta bort ett skript för en specifik tjänst.

Därför har vi på E37 nu uppdaterat till ett system där skript kan läggas till som "komponenter" under Kontrollpanelen -> Webbshop Skript och taggar. Om du lägger in varje extern tjänst som en egen komponent, med en beskrivande titel, så listas alla dessa externa tjänster också där i admin — detta gör det lättare att i framtiden hitta en specifik tjänst för att uppdatera eller ta bort dess skript.
Alla skript inlagda som komponenter hittas på kontrollpanelen. Skript som E37 har färdiga mallar för låses som förinställt för redigering, men du kan klicka på "lås upp"-ikonen om du ändå senare behöver editera dessa skript.

Hur lägger jag till ett skript som en komponent? Steg-för-steg

Gör så här:

Kontrollera att tjänsten du ska lägga till inte är med i punktlistan överst på denna sida. Gör den det, gå då istället till Kontrollpanelen -> Webbplats Allmänt -> Fliken Externa tjänster och konfigurera inställningarna för den aktuella tjänsten där. Skriptet kommer då automatiskt med på din sida utan att du behöver ens se nån kod eller göra nåt mer. Du kan då sluta läsa här.

Om din webbplats ska lägga till en tredjepartstjänst som kräver att du lägger till ett specifikt skript på någon eller alla sidor av din webbplats. Läs om vad tredjepartstjänsten skriver gällande var skriptet ska läggas till: Dels på vilken eller vilka sidor skriptet ska ligga, och på vilken del av sidan skriptet ska läggas in, i <body> eller i <head>? Om ditt skript endast ska ligga i body-taggen på en enda sida, läs stycket om Widgeten fri HTML-kod ovan och överväg om du istället vill följa guiden om widgeten Fri HTML-kod.

Har du flera skript som alla säger att de ska ligga "längst upp" i <head> eller <body>?
Du kan välja ordningen på skript inlagda som komponenter med knappen Sortera komponenter, men vad gör du om flera olika tjänster säger att deras kod ska ligga först?

Tredjepartstjänster verkar älska att ge instruktionen att lägga till deras skript överst i <head> eller <body>. För de flesta av dem är det dock inte kritiskt för att skriptet ska fungera, men det gör att deras får börja ladda sitt skript snabbare vilket gör det mindre troligt att deras användare klagar på att deras skript laddar långsamt. En typ av skript där det faktiskt är kritiskt att de hamnar först är de till tjänster samtyckeslösning, som till exempel och Cookiebot eller Cookie Information. Detta då deras kod behöver köras före annan kod som försöker sätta de cookies samtyckeslösningarna ser till att först få samtycke från användaren för.

Kontrollera om tjänsten du ska lägga till redan har en mall i E37. Gå därför till Kontrollpanelen -> Webbshop Skript och Taggar och klicka knappen Ny komponent från mall. Du får nu upp en dialogruta. I skrivande stund finns följande mallar att välja i listrutan Mall:

Om din tjänst finns listad där, använd mallen istället för att klistra in något skript till en egen komponent.

Se även följande separata guider för mallarna till Cookiebot och Cookie Information.
Om skriptet inte finns där, klicka knappen Avbryt och klicka istället knappen Ny komponent.

Du får nu upp följande dialogruta:
Bocka för rutan Aktiv för att skriptet du lägger in ska inkluderas på sidan alls.
Rutorna uppe till höger under rubriken Aktiverad i webbplatser bockar du ur om du använder shop-in-shop och vill avaktivera skriptet på någon eller några av dina webbplatser.
Bocka i rutan Kräver Javascript-objekt på klienten om du har skrivit till delar i ditt skript som använder E37s Objekt och objektfält för skriptanpassningar. Om du endast ska lägga in ett skript ifrån en tredjepartstjänst så kommer dessa såklart inte använda E37s objekt och då bör rutan inte heller bockas för. Om du däremot vill lägga till en IF-sats runt skriptet baserat på till exempel "sidtyp" så måste rutan däremot bockas för, annars vet skriptet inte vad som menas med objektet Page.ID och ger då ett error.
Titel syns endast i admin. Om skriptet är för en tredjepartstjänst, sätt gärna en Titel som inkluderar trejdepartstjänstens namn och eventuellt även en beskrivning av vad skriptet gör om tredjepartstjänsten har funktioner för att göra flera olika saker.
Beskrivning syns också bara i admin men kräver att man går in på komponenten för att den ska visas. Här kan du om Titel inte hade plats att vara tillräckligt beskrivande lägga in flera detaljer om skriptet. Tänk på att även om det nu när du lägger in ett skript troligen är självklart för dig vad ett skript från en viss tredjepartstjänst gör, så är det kanske inte lika självklart när en kollega tittar på skriptet om några år, efter att tredjepartstjänsten har bytt namn och/eller utökat sitt sortiment av tjänster. Då kan att du tar 30 sekunder att skriva en beskrivning av skriptet nu spara många minuters felsökning.
Beroende på om skriptet ska läggas in i <head> eller <body>, byt till fliken Head-tagg eller Body-tagg. För tredjepartstjänster står det typiskt på sidan du kopierade deras skript från också var skriptet ska läggas in.
Beroende på vilken flik du valde, i fältet HTML-inkluderingar i head eller HTML-inkluderingar längst ner på sidan lägger du nu in skriptet, inklusive öppnande och stängande <script>-taggar.
Klicka knappen Spara.
Skriptkomponenter cachas inte på serversidan, så direkt efter att du tryckt Spara kan du ladda om en webbsida och kontrollera att skriptet fungerar som det ska.

Skript på enskiljda sidor

Widgeten fri HTML-kod — för skript som endast ska ligga på en sida eller en sorts systemsida

Om skriptet endast ska ligga på en enda innehållssida, eller på en sorts systemsida, till exempel bara på alla artikelsidor, och skriptet ska läggas längst ned i body-taggen så kan du, precis som tidigare, lägga in skriptet med hjälp av widgeten Fri HTML-kod, vilket oftast är det enklare alternativet. Om ett skript ska ligga i <body> eller <head> framgår oftast om du läser instruktionerna på sidan för tredjepartstjänsten där du kopierar deras skript ifrån. Se då guiden om widgeten Fri HTML-kod.

Om du till exempel vill lägga in ett skript som endast ska finnas på orderbekräftelsesidan så gör du det genom att under Webbplats -> Sidor -> Fliken Systemsidor -> Orderbekräftelse lägga till skriptet med widgeten Fri HTML-kod. Lägg widgeten längst ned på sidan. Skriptet hamnar då längst ned i <body>-taggen på orderbekräftelsesidan.

Måste jag för skript till enskilda sidor använda widgeten Fri HTML-kod? Måste skripet hamna i <body>?

Nej, det går även att lägga in ett skript på en enda sida eller en sorts systemsida som en komponent genom att använda lägga till en IF-sats runt skriptet som tittar på Page.ID. Detta gör att skript för tjänster som till exempel ska ligga i <head> istället för i <body> på en enskild sida eller sidtyp fortfarande går att lägga in. Det gör det också möjligt att som en enda komponent lägga in olika skript från en enda tjänst, där olika skript ska hamna på olika sidtyper.

Om du vill att ett skript endast ska inkluderas om vissa kriterier baserade på systemets Objekt och Objektfält så kan du göra detta med hjälp av en IF-sats för dynamiskt innehåll. Om ett skript (eller en del av ett skript) endast ska inkluderas på en viss sidtyp, till exempel på orderbekräftelsesidan, så lägger du till följande två kodrader runt hela skriptet:

@if(Page.ID = "OrderConfirmation")

@end-if

Ovanstående kod fungerar i fälten HTML-inkluderingar i head och HTML-inkluderingar längst ner på sidan, men inte i fältet Klient-script (javascript) på fliken Klient-script, eftersom detta fält inte kör skript för dynamiskt innehåll på servern. I fältet Klient-script (javascript) kan du istället direkt i JavaScriptet använda objektfältet TC.Page.ID i en IF-sats som då blir skriven i JavaScript istället. Notera att kryssrutan Kräver Javascript-objekt på klienten i komponenten då måste vara ikryssad; annars vet skriptet inte vad TC.Page.ID är, och kommer att ge ett error.

JavaScript-koden för IF-satsen blir då:

if(TC.Page.ID == "OrderConfirmation"){
    //Här lägger du ett JavaScript som endast ska köras
    //om skriptet laddas på orderbekräftelsesidan.
}

För fullständig dokumentation av vilka objekt och objektfält som finns i systemet och i vilka situationer de finns tillgängliga, se den här guiden. För mer detaljerade instruktioner om dynamiskt innehåll, se guiden Hur skapar och visar jag dynamiskt innehåll i widgetar och skript?