Script og kode i <head> eller <body>

Tredjepartsleverandører (for eksempel Google Tag Manager, Kommune-Kari eller lignende) gir deg ofte en liten kodesnutt eller et script som du skal legge i nettsidens <head>- eller <body>-tag. Slik gjør du dette.

Publisert 11.01.2021 12.45

Slik legger du til kode i "head" eller "body"

Slik legger du til eller redigerer Script-widgeter

Gå til Innstillinger (du finner den i nettstedsvelgeren øverst til venstre).
Klikk på Script i menyen til venstre

Redigering av eksisterende script

Du ser de eksisterende script-widgetene under overskriften script-widgeter.
Klikke på widgeten for å rediger den.

Legg til nytt script

Klikk på knappen "Legg til" for å opprette en ny script-widget.
Her velger du hvor koden skal plasseres på nettsiden. Du ser tre felt:
1. Legge til kode i <head>-taggen?
2. Legge til kode i starten av <body>-taggen?
3. Legge til kode i slutten av <body>-taggen?
Lim inn kodesnutten fra tredjepartsleverandøren i det feltet som passer best i henhold til leverandørens beskrivelse.

Håndtering av informasjonskapsler (Cookies)

Dersom widgeten bruker informasjonskapsler, slår du på “Benyttes informasjonskapsler”.
Angi deretter informasjonskapselens navn i feltet "Informasjonskapsler som må godkjennes for å vise innholdet", for eksempel “Funksjonelle informasjonskapsler”.

Dette gjør at systemet venter med å vise innholdet/kjøre scriptet til brukeren har godkjent den nødvendige informasjonskapslene.

Eksempel med chatbot

Installasjon av chatbot'en Prokom Sem & Stenersens Kommune-Kari er et ganske vanlig eksempel på når du må legge inn kode på nettstedet.

Ved installasjon av Kommune-Kari får du som regel tilsendt en kodesnutt og bedt om å legge denne i starten av <body>-taggen i kildekoden. Den kan se slik ut:

<script type="text/javascript" data-kommune='kommunenavn' src="https://prokomresources.prokomcdn.no/client-grunt/bot/kari.js"></script>

I dette tilfellet kan du legge kodesnutten i feltet “Legge til kode i starten av <body>-taggen?”

Risikoer ved å legge eksterne JavaScript i "head"

Blokkering av sideinnlasting

Nettleseren parser HTML fra toppen av siden og stopper opp ved <script>-tagger for å laste og utføre JavaScript før den fortsetter.
Dette kan føre til at andre ressurser (f.eks. CSS og HTML) lastes tregere og gjør at siden oppleves som langsom.

Redusert PageSpeed og SEO-poeng

Google PageSpeed Insights kan gi lavere score hvis gjengivelsen blokkeres av JavaScript.
En treg nettside kan gi dårligere brukeropplevelse og påvirke SEO negativt.

Sikkerhetsrisikoer (særlig for tredjeparts script)

Hvis skriptet kommer fra en ekstern kilde, kan det bli kompromittert eller endret av leverandøren uten at du vet det.
Kan inneholde skadelige funksjoner, f.eks. sporing, phishing eller XSS-angrep.

Kryssende avhengigheter

Eksterne skript kan laste inn andre biblioteker eller ha avhengigheter som påvirker ytelse eller kompatibilitet.
Hvis skriptet ikke er tilgjengelig (f.eks. serveren er nede), kan dette skape feil på siden.

Hva bør du sjekke før du legger inn et eksternt script i "head"?

Trenger det virkelig å være i <head>?
- Hvis det ikke påvirker den kritiske gjengivelsen av siden, vurder å laste det asynkront (async) eller utsatt (defer).
- defer anbefales for de fleste eksterne skript fordi det sikrer at HTML-en lastes før JavaScript utføres.
Kilde og sikkerhet
- Stoler du på leverandøren av skriptet?
- Sjekk om domenet bruker HTTPS og har god historikk.
- Bruk en Subresource Integrity (SRI)-hash hvis mulig for å beskytte mot uautoriserte endringer.
Nettverks- og ytelsespåvirkning
- Lastes skriptet fra et raskt og pålitelig CDN?
- Sjekk om det kan kombineres eller caches for å redusere nettverksforespørsler.
Blokkerer det gjengivelsen?
- Test med Lighthouse eller PageSpeed Insights.
- Bruk Chrome DevTools for å se "render-blocking resources".
Er det kompatibelt med andre skript på siden?
- Kan det skape konflikter med eksisterende biblioteker eller kode?

Legg inn informasjonskapsler

Bruksområder

Å legge kode inn i <head>-taggen eller <body>-taggen på nettsiden gir drevne brukere mulighet til å manipulere nettstedets kode. Du kan for eksempel skrive CSS eller JavaScript som overstyrer CMS-ets funksjoner eller nettstedets utseende. Vi anbefaler likevel å ikke bruke disse feltene til mer enn nødvendig - og gjerne kun til kode som er bygget nettopp for dette formålet.

Eksempler på andre produkter som har slike integrasjoner:

Google Search Console
Google Analytics
Task Analytics
Google Tag Manager
Prokom Sem & Stenersens Kommune-Kari
eDialog 24 og andre chatløsninger

Bruksområder

Tilbakemelding