Script-tillägg

Aktivera extra tracking-funktioner med data-attribut på scriptet.

Snabböversikt

AttributFunktion
data-outbound-linksSpåra klick på externa länkar
data-file-downloadsSpåra nedladdningar av filer
data-formsSpåra formulärinlämningar
data-scroll-depthSpåra scroll-djup (25%, 50%, 75%, 100%)
<meta name="va-404">Spåra 404-fel

Grundscript

Börja med grundscriptet och lägg till de attribut du vill använda:

<!-- Grundscript -->
<script defer
  data-site-id="din-sajt-id"
  data-api="https://besokskollen.se"
  src="https://besokskollen.se/script.js">
</script>

<!-- Med alla tillägg -->
<script defer
  data-site-id="din-sajt-id"
  data-api="https://besokskollen.se"
  data-outbound-links
  data-file-downloads
  data-forms
  data-scroll-depth
  src="https://besokskollen.se/script.js">
</script>

Utgående länkar

När data-outbound-links är aktiverat sparas alla klick på länkar som går till andra domäner.

<script defer
  data-site-id="din-sajt-id"
  data-api="https://besokskollen.se"
  data-outbound-links
  src="https://besokskollen.se/script.js">
</script>

Event som skickas

  • Event-namn: Outbound Link: Click
  • Property: url - Full URL till målet

Exempel: När en besökare klickar på en länk till https://partner.com/offersparas eventet med { url: "https://partner.com/offer" }.

Filnedladdningar

När data-file-downloads är aktiverat sparas klick på länkar till filer.

<script defer
  data-site-id="din-sajt-id"
  data-api="https://besokskollen.se"
  data-file-downloads
  src="https://besokskollen.se/script.js">
</script>

Event som skickas

  • Event-namn: File Download
  • Property: file - Filnamnet

Filer som spåras automatiskt:

.pdf, .zip, .rar, .7z, .tar, .gz, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .csv, .exe, .dmg, .pkg, .msi, .apk, .ipa

Formulär

När data-forms är aktiverat sparas alla formulärinlämningar på sidan.

<script defer
  data-site-id="din-sajt-id"
  data-api="https://besokskollen.se"
  data-forms
  src="https://besokskollen.se/script.js">
</script>

Event som skickas

  • Event-namn: Form Submit
  • Properties:
  • form - Formulärets ID eller namn
  • action - Formulärets action-URL

Tips

Ge dina formulär ett id eller name-attribut för att enkelt skilja dem åt i statistiken.

<!-- Bra: Formulär med ID -->
<form id="contact-form" action="/submit">
  ...
</form>

<!-- Event: { form: "contact-form", action: "/submit" } -->

Scroll Depth

När data-scroll-depth är aktiverat sparas hur långt ner besökare scrollar på sidan. Events skickas vid 25%, 50%, 75% och 100%.

<script defer
  data-site-id="din-sajt-id"
  data-api="https://besokskollen.se"
  data-scroll-depth
  src="https://besokskollen.se/script.js">
</script>

Event som skickas

  • Event-namn: Scroll Depth
  • Property: depth - Procent scrollad (25, 50, 75 eller 100)

Varje milstolpe skickas bara en gång per sidvisning. Om en besökare scrollar ner till 75% och sedan tillbaka upp, skickas inget nytt event.

Användningsområden

  • • Se om besökare läser hela artiklar
  • • Mäta innehållsengagemang
  • • Optimera sidlängd och innehållsplacering

404-tracking

404-tracking är automatisk och kräver inget extra attribut. Lägg bara till en meta-tagg på din 404-sida:

<!-- På din 404-sida -->
<head>
  <meta name="va-404">
  <!-- ... övrigt head-innehåll ... -->
</head>

Event som skickas

  • Event-namn: 404
  • Property: path - Sökvägen som gav 404

Detta låter dig se vilka trasiga länkar besökare försöker besöka, så du kan fixa dem eller lägga till omdirigeringar.

Next.js exempel

// app/not-found.tsx
export default function NotFound() {
  return (
    <>
      <head>
        <meta name="va-404" />
      </head>
      <div>
        <h1>404 - Sidan hittades inte</h1>
      </div>
    </>
  );
}

Komplett exempel

Här är ett komplett exempel med alla tillägg aktiverade:

<!DOCTYPE html>
<html>
<head>
  <title>Min sajt</title>

  <!-- Besökskollen med alla tillägg -->
  <script defer
    data-site-id="abc123"
    data-api="https://besokskollen.se"
    data-outbound-links
    data-file-downloads
    data-forms
    data-scroll-depth
    src="https://besokskollen.se/script.js">
  </script>
</head>
<body>
  <!-- Externa länkar spåras automatiskt -->
  <a href="https://partner.com">Vår partner</a>

  <!-- Filnedladdningar spåras automatiskt -->
  <a href="/files/rapport.pdf">Ladda ner rapport</a>

  <!-- Formulär spåras automatiskt -->
  <form id="newsletter" action="/subscribe">
    <input type="email" name="email" required>
    <button type="submit">Prenumerera</button>
  </form>
</body>
</html>

Prestanda

Alla tillägg använder event delegation och lägger till minimalt overhead. Scriptet förblir under 2KB med alla tillägg aktiverade.

Prompta din AI

Kopiera prompten nedan och klistra in i din favorit-AI (ChatGPT, Claude, etc.) för att få hjälp med att välja rätt script-tillägg för din sajt.

AI-prompt för script-tillägg

Jag använder Besökskollen (besokskollen.se) för webbanalys. De har följande automatiska tracking-tillägg som aktiveras med data-attribut på scriptet: Tillgängliga tillägg: - data-outbound-links - Spårar klick på externa länkar (event: "Outbound Link: Click") - data-file-downloads - Spårar nedladdningar (.pdf, .zip, .doc, etc.) (event: "File Download") - data-forms - Spårar formulärinlämningar (event: "Form Submit") - data-scroll-depth - Spårar scroll-djup vid 25%, 50%, 75%, 100% (event: "Scroll Depth") - <meta name="va-404"> - Spårar 404-fel (event: "404") Min sajt är: [BESKRIV DIN SAJT - t.ex. "en blogg med artiklar och nyhetsbrev-signup"] Hjälp mig välja rätt tillägg: 1. Vilka tillägg är relevanta för min sajttyp? 2. Ge mig det kompletta script-taggen med rätt attribut 3. Förklara vilka events jag kommer att se i dashboarden 4. Finns det något jag bör skapa mål (goals) för baserat på dessa events?