Next.js'e Geri Bildirim Widget'ı Ekleme

Pintelly, tek bir script etiketiyle Next.js uygulamasına görsel geri bildirim butonu, analitik ve isteğe bağlı oturum kaydı ekler. İstemci tarafı gezinme otomatik izlenir: script history.pushState ve popstate olaylarını takip eder, bu yüzden her rota değişikliği ek kod olmadan sayfa görüntüleme sayılır.

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>

App Router

Script'i kök layout'ta next/script ile bir kez yükleyin:

// app/layout.tsx
import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="tr">
      <body>
        {children}
        <Script
          type="module"
          src="https://pintelly.com/cdn/feedback-module.es.js"
          data-backend="https://pintelly.com"
          crossOrigin="anonymous"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Pages Router

Aynı <Script> öğesini pages/_app.tsx içinde <Component {...pageProps} /> yanına koyun.

Content Security Policy

Uygulamanız CSP header'ı ayarlıyorsa (next.config.js headers veya middleware içinde), script-src ve connect-src içine https://pintelly.com ekleyin. Nonce tabanlı CSP kullanıyorsanız nonce'u <Script nonce={nonce} /> ile geçin.

Yalnızca production'da

Yerel geliştirmeyi verinizden uzak tutmak için <Script>'i yalnızca process.env.NODE_ENV === "production" olduğunda render edin ya da staging alan adınız için ayrı bir Pintelly projesi açın.

Ç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.