На главную

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 при возврате из кеша переходов назад/вперёд.

Считается переходом: новый адрес (путь или строка запроса) и хеш-маршруты вида #/… и #!/…. Не считается переходом: обычный переход к якорю (#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