На головну

SPA та переходи між сторінками

Як віджет самостійно визначає переходи в React, Vue, Angular, Next.js, Turbo або htmx, що повідомляє серверу та на що зважати в односторінковому застосунку.

В односторінковому застосунку браузер завантажує сторінку лише один раз; потім фреймворк замінює вміст і змінює адресу через history.pushState. Віджет визначає ці зміни самостійно. Вам не потрібно нічого повідомляти чи перезапускати.

Вбудовування: рівно один раз

Додайте завантажувач один раз до оболонки застосунку (index.html, кореневий макет, _document), а не до компонента, що повторно відображається за кожної зміни маршруту. Повторна вставка нешкідлива (другий завантажувач нічого не робить, див. Тег скрипту), але видалення й повторне додавання тегу не перезапускає віджет.

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

Найпростіше перевірити, чи допоміжний засіб фреймворку передає атрибути data-* до створеного <script>, через інспектор елементів. Якщо там немає data-rc-site-key, нічого не запуститься.

Як визначаються переходи між сторінками

Віджет не втручається в history.pushState; він лише спостерігає за:

Navigation API браузера (navigation.currententrychange), якщо доступний;
інакше — popstate і hashchange;
додатково — таймером, що знаходить зміни адреси без події (щосекунди, з Navigation API — кожні 5 секунд);
pageshow після повернення з кешу назад/уперед.

Вважається переходом: нова адреса (шлях або запит) і hash-маршрути виду #/… та #!/…. Не вважається переходом: лише перехід до якоря (#section) та replaceState на ту саму адресу.

Що повідомляється

Через 400 мс після зміни (щоб не враховувати проміжні стани перенаправлень) віджет надсилає серверу кадр контексту — лише за згодою:

url, path, title, referrer — url і referrer спочатку очищуються від чутливих параметрів запиту (як-от email, password, token, key, card).
locale, tz, viewport, screen, ua_hint.
utm_source, utm_medium, utm_campaign, gclid, msclkid, fbclid з адреси.
nav — тип зміни: load, push, replace, reload, back, forward або traverse.

Якщо застосунок задає заголовок лише після зміни, віджет надсилає виправлення через 2 секунди. Так оператори бачать у панелі поточну сторінку відвідувача, а асистент пов’язує відповідь із нею.

Віджет також повторно читає видимий текст сторінки (для відповідей про неї та «Покажіть») — щонайраніше через 1,2 секунди після останньої зміни, щонайчастіше кожні 5 секунд, ніколи на сторінках облікового запису, оформлення замовлення чи кошика та ніколи з полів форм. Позначайте області, які асистент не має читати, через data-rc-private (Тег скрипту).

Передавання власного контексту для сторінки

Окремого методу повідомляти про зміну сторінки немає, і він не потрібний. Якщо ви хочете передати додаткові відомості про поточну сторінку, наприклад показаний товар, використовуйте 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]);

Перелік полів, що надходять, є в розділі Ідентифікація відвідувачів і передавання контексту.

Turbo, htmx, Livewire

Фреймворки, що замінюють увесь <body>, також видаляють елемент віджета. Тоді він додає себе знову (щонайбільше десять разів за хвилину); розмова продовжується.

Користувачі, які ввійшли, у SPA

Якщо людина входить без перезавантаження, після цього викличте identify із хешем, щойно отриманим із сервера. За зміни користувача віджет відокремлює чернетку введення від попереднього користувача. Подробиці — Ідентифікація відвідувачів.

Текст конфіденційності в SPA

Якщо застосунок вставляє політику конфіденційності лише після завантаження, віджет усе одно знаходить елемент data-rc-privacy (він спостерігає за документом). Див. Інтеграція конфіденційності.

Далі: Безпека й CSP

Оновлено: 2026-10-25