React Uygulamasına Geri Bildirim Widget'ı Ekleme

Pintelly, tek bir script etiketiyle React tek sayfa uygulamasına görsel geri bildirim butonu, analitik ve isteğe bağlı oturum kaydı ekler. npm paketi veya bileşen gerekmez: script React'in yanında çalışır, React Router ya da başka bir router ile yapılan rota değişiklikleri history.pushState ve popstate üzerinden otomatik izlenir.

Başlamadan önce siteyi Pintelly'de proje olarak ekleyin ve kurulum kodunu Proje Ayarları'ndan kopyalayın. Kod şuna benzer:

<script
  type="module"
  src="https://pintelly.com/cdn/feedback-module.es.js"
  data-backend="https://pintelly.com"
  crossorigin="anonymous"
></script>

Vite

Kodu proje kökündeki index.html dosyasında <head> içine yapıştırın. Vite onu derlenen sayfaya olduğu gibi taşır.

Create React App

Kodu public/index.html dosyasında <head> içine yapıştırın.

Koddan yüklemek

HTML dosyasını düzenleyemiyorsanız (örneğin bir micro-frontend'de), script'i uygulama başlarken bir kez ekleyin:

const s = document.createElement("script");
s.type = "module";
s.src = "https://pintelly.com/cdn/feedback-module.es.js";
s.dataset.backend = "https://pintelly.com";
s.crossOrigin = "anonymous";
document.head.appendChild(s);

Bileşenlerin dışında, bir kez çalıştırın; böylece React'in yeniden render'ları ve Strict Mode script'i iki kez eklemez.

Oturum açmış kullanıcıları tanımlama

Oturumları ve geri bildirimleri kendi kullanıcı ID'lerinizle görmek için script kurulduktan sonra Kullanıcı Tanımlama sayfasını izleyin.

Çalıştığını kontrol edin

1. Canlı siteyi gizli pencerede açın; böylece önbellek veya oturum açık hali değişikliği gizlemez.
2. Sayfanın köşesinde geri bildirim butonu görünmeli. Tıklayın, herhangi bir öğeye yorum iğneleyin ve gönderin.
3. Projeyi Pintelly'de açın. Geri bildirim ekran görüntüsüyle orada olmalı, ziyaret de bir dakika içinde Analitik altında görünmeli.

Buton görünmüyorsa tarayıcı konsolunu açın. Content Security Policy hatası, sitenizin script-src ve connect-src içinde https://pintelly.com adresine izin vermesi gerektiği anlamına gelir. Hata yoksa bir önbellek veya script optimizasyon katmanı eski sayfayı sunuyor olabilir: temizleyip yeniden yükleyin.

Sonra: widget görünürlüğünü, görünümünü ve onay yönetimini Proje Ayarları'ndan seçin. Çerez banner'ı kullanıyorsanız Onay Yönetimi sayfasına bakın.