# Hvordan installeres Skyra på Single Page Applications (SPA)?

Canonical: https://www.skyra.no/no/help/hvordan-installeres-skyra-pa-single-page-applications-spa

Language: no

Denne artikkelen forklarer hvordan pop-up undersøkelser fra Skyra installeres på nettsider som er en Single Page Application

<a id="h_7580e649e1"></a>

## **For deg som ikke er teknisk**

Når Skyra installeres på en vanlig nettside, vil pop-upen vises basert på sidevisninger, og loddtrekning for deltakelse i undersøkelser skjer automatisk. På en **Single Page Application (SPA)** fungerer dette litt annerledes fordi nettsiden ikke laster på nytt når brukeren navigerer. Det betyr at Skyra ikke oppdager nye "sidevisninger" på samme måte som på en tradisjonell nettside. For å sikre at undersøkelsene vises korrekt, må nettstedet aktivt fortelle Skyra når en ny "side" lastes inn.

> [!TIP]
> Dette er en enkel justering som deres utvikler kan gjøre.

<a id="h_a8a8f65382"></a>

## **For utviklere: Implementering av Skyra på en SPA**

SPA-er oppdaterer innhold dynamisk uten å laste siden på nytt, noe som gjør at Skyra-scriptet ikke automatisk kjører ved hver "sidevisning". For å sikre at loddtrekning og undersøkelsesvisning skjer som forventet, må du manuelt trigge Skyra sitt script hver gang en ny "side" vises.

Dette kan gjøres ved å kalle følgende metode i JavaScript etter hver navigasjonsendring i SPA-en:

```javascript
window.skyra?.reload?.();
```

Denne metoden sørger for at Skyra sjekker om en undersøkelse skal vises. Hvis en pop-up allerede er aktiv, vil ingen endringer skje. Hvis ingen undersøkelse er i gang, vil Skyra gjennomføre en ny vurdering av om brukeren skal delta i en undersøkelse. Hvordan du integrerer denne funksjonen, avhenger av hvilket rammeverk du bruker. I React kan du for eksempel lytte til ruteendringer med **` useEffect `**, mens i Vue eller Angular kan du bruke en **` watch `**-funksjon for å oppdage endringer i URL-en.

<a id="h_4630549c41"></a>

### Eksempel: React-applikasjon med React Router:

I en React-applikasjon som bruker **` react-router-dom `**for navigasjon, kan du lytte til ruteendringer med **` useEffect `** og **` useLocation `**. Koden nedenfor sørger for at Skyra sitt script oppdateres ved hver navigasjon:

```javascript
import { useEffect } from "react";
import { useLocation } from "react-router-dom";

const SkyraHandler = () => {
  const location = useLocation();

  useEffect(() => {
    window.skyra?.reload?.();
  }, [location.pathname]);

  return null;
};

export default SkyraHandler;
```

> [!WARNING]
> **Plassering: **Husk å plassere denne komponenten i en overordnet layout eller App-komponent slik at den alltid lytter etter endringer.  
> ​  
> For at dette skal fungere optimalt, må **` SkyraHandler `**-komponenten legges i en overordnet komponent, for eksempel **` App.js `** eller **` Layout.js `**, slik at den alltid er aktiv og kan lytte til ruteendringer gjennom hele applikasjonen.

<a id="h_a1baf3231c"></a>

### For andre rammeverk

Sjekk dokumentasjonen for hvordan du lytter etter ruteendringer og kjør **` window.skyra?.reload?.(); `** der det er relevant.

<a id="h_776679abb2"></a>

## **Feilsøking**

Hvis popup-undersøkelsene ikke vises som forventet, kan du prøve følgende:  
​

**1. Sjekk at metoden kalles riktig:**  
​  
Åpne nettleserkonsollen (` F12 ` i Chrome) og kjør:

```javascript
console.log(window.skyra);
```

Dersom ` undefined ` vises, betyr det at Skyra-scriptet ikke er lastet inn på siden.  
​

**2. Legg til debug-meldinger:**  
​  
For å bekrefte at ` window.skyra?.reload?.(); ` faktisk kjører ved ruteendringer, kan du legge til logging i koden som lytter på ruteendringer:

```javascript
console.log('Skyra reload triggered');
```

Hvis denne meldingen ikke vises i konsollen, må du sjekke at ` SkyraHandler ` er riktig plassert i prosjektet.  
​

**3. Test med manuell utløsing av reload:**  
​  
Åpne nettleserkonsollen og kjør:

```javascript
window.skyra?.reload?.();
```

Dersom popup-undersøkelsen vises etter dette, kan problemet være at ` SkyraHandler ` ikke blir trigget ved ruteendringer.

Dersom popup-undersøkelsen ikke vises etter dette kan det skyldes at du nettopp har besvart en annen undersøkelse. Skyra hindrer å vise flere undersøkelser etter hverandre med mindre ` Show survey again after completed/rejected ` er satt til Immediately.  
​

**4. Sørg for at Skyra er riktig installert:**  
Bekreft at Skyra-scriptet er inkludert i ` index.html `, rot-layout eller lastes dynamisk på riktig måte. [Les vår guide for innstallasjon av Skyra.](<https://www.skyra.no/no/help/guide-installasjon-av-skyra-pa-din-nettside>)

Sjekk at innstillingene er korrekte for den undersøkelsen du tester. For eksempel at den er publisert og har spørsmål. Sjekk også ` Show/hide survey on `-regler under Settings.

Det kan være innstillinger for tidsforsinkelse eller invitasjonsrate gjør at du ikke blir trukket ut til å se undersøkelsen eller at den vises forsinket.

## I disse samlingene

- [Installasjon](<https://www.skyra.no/no/help/installasjon.md>) — Installer scriptet