Tek sayfalı uygulamalar ve sayfa değişiklikleri

Tek sayfalı uygulamada tarayıcı sayfayı yalnızca bir kez yükler; ardından uygulama çatınız içeriği değiştirir ve adresi history.pushState üzerinden günceller. Widget bu değişiklikleri kendiliğinden algılar. Hiçbir şey bildirmeniz veya yeniden başlatmanız gerekmez.

Yerleştirme: yalnızca bir kez

Yükleyiciyi uygulamanızın kabuğuna (index.html, kök yerleşim, _document) bir kez ekleyin; her rota değişikliğinde yeniden oluşturulan bir bileşene eklemeyin. İkinci kez yerleştirmek zararsızdır (ikinci yükleyici hiçbir şey yapmaz; Script etiketi bölümüne bakın), ancak etiketi kaldırıp yeniden eklemek widget’ı yeniden başlatmaz.

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

Uygulama çatısının yardımcı aracının data-* özniteliklerini oluşturulan <script> etiketine aktarıp aktarmadığını kontrol etmenin en kolay yolu öğe denetçisidir. Orada data-rc-site-key yoksa hiçbir şey başlamaz.

Sayfa değişiklikleri nasıl algılanır?

Widget, history.pushState işlevine müdahale etmez; yalnızca şunları izler:

1. destekleniyorsa tarayıcının Navigation API arayüzünü (navigation.currententrychange);
2. aksi durumda popstate ve hashchange olaylarını;
3. ayrıca olay olmadan adres değişikliklerini bulan bir zamanlayıcıyı (her saniye; Navigation API varsa her 5 saniyede bir);
4. geri/ileri önbelleğinden dönüşte pageshow olayını.

Sayfa değişikliği sayılır: yeni adres (yol veya sorgu) ve #/… ile #!/… biçimindeki hash rotaları. Sayfa değişikliği sayılmaz: yalnızca bir çapaya atlama (#section) ve aynı adrese replaceState.

Neler bildirilir?

Değişiklikten 400 ms sonra (yönlendirmelerin ara durumlarının sayılmaması için) widget sunucuya bağlam çerçevesi gönderir; yalnızca onayla:

• url, path, title, referrer – url ve referrer önce hassas sorgu parametrelerinden (email, password, token, key, card gibi) temizlenir.
• locale, tz, viewport, screen, ua_hint.
• Adresteki utm_source, utm_medium, utm_campaign, gclid, msclkid, fbclid.
• nav – değişiklik türü: load, push, replace, reload, back, forward veya traverse.

Uygulamanız başlığı değişiklikten sonra ayarlıyorsa widget 2 saniye sonra düzeltme gönderir. Böylece paneldeki temsilciler ziyaretçinin o anda hangi sayfada olduğunu görür ve asistan yanıtını bu sayfayla ilişkilendirir.

Widget ayrıca görünür sayfa metnini yeniden okur (geçerli sayfayla ilgili yanıtlar ve “Bana göster” için): son değişiklikten en erken 1,2 saniye sonra, en fazla her 5 saniyede bir; hesap, ödeme veya sepet gibi sayfalarda ve form alanlarında asla okumaz. Asistanın okumaması gereken alanları data-rc-private ile işaretleyin (Script etiketi).

Sayfa başına kendi bağlamınızı iletme

Sayfa değişikliği bildirmek için özel bir yöntem yoktur ve gerekli de değildir. Geçerli sayfayla ilgili ek bilgiler, örneğin gösterilen ürün hakkında bilgi iletmek istiyorsanız rota değişikliğinden sonra track kullanın:

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

Hangi alanların ulaştığı Ziyaretçileri tanımlama ve bağlam iletme bölümünde listelenir.

Turbo, htmx, Livewire

Tüm <body> öğesini değiştiren uygulama çatıları bu sırada widget öğesini de kaldırır. Widget ardından kendisini yeniden ekler (dakikada en fazla on kez); sohbet devam eder.

SPA içinde oturum açmış kullanıcılar

Birisi yeniden yükleme olmadan oturum açarsa ardından sunucudan yeni alınmış bir özetle identify çağırın. Kullanıcı değişirse widget giriş taslağını önceki kullanıcıdan ayırır. Ayrıntılar Ziyaretçileri tanımlama bölümündedir.

SPA içinde gizlilik metni

Uygulamanız gizlilik politikasını yalnızca yüklemeden sonra eklese de widget data-rc-privacy öğesini bulur (belgeyi izler). Gizlilik entegrasyonu bölümüne bakın.

Sonraki: Güvenlik ve CSP