Denne artikkelen forklarer hvordan pop-up undersøkelser fra Skyra installeres på nettsider som er en Single Page Application
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.
Dette er en enkel justering som deres utvikler kan gjøre.
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:
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.
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:
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.
For andre rammeverk
Sjekk dokumentasjonen for hvordan du lytter etter ruteendringer og kjør window.skyra?.reload?.(); der det er relevant.
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:
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:
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:
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.
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.