Jednostránkové aplikace a změny stránek

Jak widget sám rozpoznává změny stránek v React, Vue, Angular, Next.js, Turbo nebo htmx, co při tom hlásí serveru a na co myslet v jednostránkové aplikaci.

V jednostránkové aplikaci prohlížeč načte stránku jen jednou; potom framework vyměňuje obsah a mění adresu přes history.pushState. Widget tyto změny rozpoznává sám. Nemusíte nic hlásit ani restartovat.

Vložení: právě jednou

Umístěte loader jednou do základního rámce aplikace (index.html, kořenové rozložení, _document), ne do komponenty, která se při každé změně trasy znovu vykreslí. Druhé vložení nevadí (druhý loader nic nedělá, viz Značka script), ale odstranění a opětovné vložení značky widget nerestartuje.

// 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>
  );
}

Nejsnazší způsob, jak ověřit, zda pomocník frameworku předává atributy data-* do vygenerovaného <script>, je inspektor prvků. Pokud tam data-rc-site-key chybí, nic se nespustí.

Jak se rozpoznávají změny stránek

Widget nezasahuje do history.pushState; pouze sleduje:

Navigation API prohlížeče (navigation.currententrychange), pokud je k dispozici;
jinak popstate a hashchange;
navíc časovač, který najde změny adresy bez události (každou sekundu, s Navigation API každých 5 sekund);
pageshow při návratu z mezipaměti zpět/vpřed.

Za změnu stránky se počítá: nová adresa (cesta nebo dotaz) a hashové trasy ve tvaru #/… a #!/…. Za změnu stránky se nepočítá: pouhý přechod na kotvu (#section) a replaceState na stejnou adresu.

Co se hlásí

400 ms po změně (aby se nepočítaly mezistavy přesměrování) odešle widget serveru kontextový rámec — pouze se souhlasem:

url, path, title, referrer – z url a referrer se nejprve odstraní citlivé parametry dotazu (například email, password, token, key, card).
locale, tz, viewport, screen, ua_hint.
utm_source, utm_medium, utm_campaign, gclid, msclkid, fbclid z adresy.
nav – typ změny: load, push, replace, reload, back, forward nebo traverse.

Pokud aplikace nastaví název až po změně, widget po 2 sekundách odešle opravu. Operátoři v pultu tak vidí, na které stránce návštěvník právě je, a asistent vztahuje odpověď k této stránce.

Widget také znovu načítá viditelný text stránky (pro odpovědi o aktuální stránce a funkci „Ukažte mi to“) — nejdříve 1,2 sekundy po poslední změně, nejvýše každých 5 sekund, nikdy na stránkách jako account, checkout nebo cart a nikdy z formulářových polí. Oblasti, které asistent nemá číst, označte data-rc-private (Značka script).

Předání vlastního kontextu pro každou stránku

Samostatná metoda pro hlášení změny stránky neexistuje a není potřeba. Pokud chcete předat další údaje o aktuální stránce, například zobrazený produkt, použijte po změně trasy track:

// 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]);

Která pole dorazí, je uvedeno v části Identifikace návštěvníků a předávání kontextu.

Turbo, htmx, Livewire

Frameworky, které vyměňují celé <body>, při tom odstraní i prvek widgetu. Widget se pak znovu připojí (nejvýše desetkrát za minutu); konverzace pokračuje.

Přihlášení uživatelé v SPA

Pokud se někdo přihlásí bez opětovného načtení, zavolejte poté identify s hashem čerstvě získaným ze serveru. Při změně uživatele widget oddělí rozepsaný koncept od předchozího uživatele. Podrobnosti v části Identifikace návštěvníků.

Text o ochraně osobních údajů v SPA

Pokud aplikace vloží zásady ochrany osobních údajů až po načtení, widget přesto prvek data-rc-privacy najde (sleduje dokument). Viz Integrace soukromí.

Dále: Zabezpečení a CSP

آخر تحديث: 2026-10-25