Ensidesappar och sidbyten

I en ensidesapp laddar webbläsaren sidan bara en gång; därefter byter ramverket innehåll och ändrar adressen via history.pushState. Widgeten upptäcker ändringarna själv. Du behöver inte rapportera eller starta om något.

Inbäddning: exakt en gång

Lägg laddaren en gång i appens skal (index.html, rotlayout, _document), inte i en komponent som renderas om vid varje ruttbyte. Att bädda in den en andra gång är ofarligt (den andra laddaren gör inget, se Skripttagg), men att ta bort och infoga taggen igen startar inte om widgeten.

// Next.js (App Router), app/layout.tsx
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script src="https://cdn.reactive.chat/loader.js"
                data-rc-site-key="SITE_KEY"
                strategy="afterInteractive" />
      </body>
    </html>
  );
}

Enklast kontrollerar du i elementinspektören om en ramverkshjälpare skickar vidare data-*-attributen till det genererade <script>. Om data-rc-site-key saknas där startar inget.

Så upptäcks sidbyten

Widgeten kopplar inte in sig i history.pushState; den observerar bara:

1. webbläsarens Navigation API (navigation.currententrychange), där det finns;
2. annars popstate och hashchange;
3. dessutom en timer som hittar adressändringar utan händelse (varje sekund, var 5:e sekund med Navigation API);
4. pageshow vid återkomst från bakåt-/framåt-cachen.

Räknas som sidbyte: en ny adress (sökväg eller frågedel) och hash-rutter av formen #/… och #!/…. Räknas inte som sidbyte: ett rent hopp till ett ankare (#section) och replaceState till samma adress.

Vad som rapporteras

400 ms efter ändringen (så att mellanlägen vid omdirigeringar inte räknas) skickar widgeten en kontextram till servern – bara med samtycke:

• url, path, title, referrer – url och referrer rensas först från känsliga frågeparametrar (som email, password, token, key, card).
• locale, tz, viewport, screen, ua_hint.
• utm_source, utm_medium, utm_campaign, gclid, msclkid, fbclid från adressen.
• nav – typ av ändring: load, push, replace, reload, back, forward eller traverse.

Om appen anger titeln först efter bytet skickar widgeten en korrigering efter 2 sekunder. På så sätt ser agenterna vilken sida besökaren är på och assistenten relaterar sitt svar till den.

Widgeten läser också den synliga sidtexten på nytt (för svar om den aktuella sidan och för ”Visa mig”) – tidigast 1,2 sekunder efter den senaste ändringen, högst var 5:e sekund, aldrig på sidor som account, checkout eller cart och aldrig från formulärfält. Markera områden assistenten inte ska läsa med data-rc-private (Skripttagg).

Skicka egen kontext per sida

Det finns ingen särskild metod för att rapportera ett sidbyte och ingen behövs. Vill du skicka ytterligare detaljer om den aktuella sidan, som den visade produkten, använder du track efter ruttbytet:

// React Router
const location = useLocation();
useEffect(() => {
  if (produkt) {
    window.ReactiveChat('track', 'produktseite', {
      page_type: 'product', product_id: produkt.sku, price: produkt.preis,
      currency: 'EUR', in_stock: produkt.lieferbar
    });
  }
}, [location.pathname, produkt]);

Vilka fält som kommer fram listas under Identifiera besökare och skicka kontext.

Turbo, htmx, Livewire

Ramverk som byter ut hela <body> tar samtidigt bort widgetens element. Widgeten återansluter då sitt element (högst tio gånger per minut); konversationen fortsätter.

Inloggade användare i SPA:er

Om någon loggar in utan omladdning anropar du identify efteråt med en hash som nyss hämtats från servern. Om användaren ändras skiljer widgeten inmatningsutkastet från den tidigare användaren. Detaljer under Identifiera besökare.

Integritetstext i SPA:er

Om appen infogar integritetspolicyn först efter laddning hittar widgeten ändå elementet data-rc-privacy (den observerar dokumentet). Se Integritetsintegration.

Nästa: Säkerhet och CSP