Statiska sajter

Integrera Besökskollen med Hugo, Jekyll, Gatsby, Eleventy och andra static site generators.

Svårighetsgrad: Enkel

Tar cirka 2 minuter

Hugo

Lägg till scriptet i din head partial:

{{/* layouts/partials/head.html */}}
<script defer
  data-site-id="DIN-SAJT-ID"
  data-api="https://besokskollen.se"
  src="https://besokskollen.se/script.js">
</script>

Eller lägg till i din baseof.html:

{{/* layouts/_default/baseof.html */}}
<!DOCTYPE html>
<html>
<head>
  {{ partial "head.html" . }}
  <script defer
    data-site-id="DIN-SAJT-ID"
    data-api="https://besokskollen.se"
    src="https://besokskollen.se/script.js">
  </script>
</head>
<body>
  {{ block "main" . }}{{ end }}
</body>
</html>

Jekyll

Lägg till i _includes/head.html:

<!-- _includes/head.html -->
<head>
  <meta charset="utf-8">
  <title>{{ page.title }}</title>

  <script defer
    data-site-id="DIN-SAJT-ID"
    data-api="https://besokskollen.se"
    src="https://besokskollen.se/script.js">
  </script>
</head>

Gatsby

Använd gatsby-ssr.js för att lägga till scriptet:

// gatsby-ssr.js
import React from 'react'

export const onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    <script
      key="savri-analytics"
      defer
      data-site-id="DIN-SAJT-ID"
      data-api="https://besokskollen.se"
      src="https://besokskollen.se/script.js"
    />
  ])
}

Eleventy (11ty)

Lägg till i din base layout:

<!-- _includes/base.njk -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>{{ title }}</title>

  <script defer
    data-site-id="DIN-SAJT-ID"
    data-api="https://besokskollen.se"
    src="https://besokskollen.se/script.js">
  </script>
</head>
<body>
  {{ content | safe }}
</body>
</html>

Astro

Lägg till i din layout-komponent:

---
// src/layouts/Layout.astro
const { title } = Astro.props
---

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>{title}</title>

  <script
    defer
    data-site-id="DIN-SAJT-ID"
    data-api="https://besokskollen.se"
    src="https://besokskollen.se/script.js">
  </script>
</head>
<body>
  <slot />
</body>
</html>

Docusaurus

Lägg till i docusaurus.config.js:

// docusaurus.config.js
module.exports = {
  // ...
  scripts: [
    {
      src: 'https://besokskollen.se/script.js',
      defer: true,
      'data-site-id': 'DIN-SAJT-ID',
      'data-api': 'https://besokskollen.se'
    }
  ]
}

Generell regel

Oavsett vilken static site generator du använder är principen densamma: lägg till scriptet i <head>-taggen på alla sidor. Scriptet är litet (~2KB) och blockerar inte rendering.

Behöver du hjälp?

Se alla integrationsguider →