Kurulum kılavuzu

Kurulum tek satır koddan ibarettir. Aşağıda önce temel adımlar, sonra popüler platformlar için birebir yönergeler, ardından tüm ayar parametreleri ve doğrulama adımları yer alır.

Hızlı kurulum (her site)

Proje oluşturun

Kaydolun → Yeni proje → proje adı + alan adı. Panel size yv_… biçiminde bir site anahtarı verir.

Kodu ekleyin

Aşağıdaki satırı <head> içine yapıştırın (SITE_ANAHTARINIZ yerine kendi anahtarınız):

<script async src="https://a.yerliveri.com/v1/sdk.js" data-site="SITE_ANAHTARINIZ"></script>

Doğrulayın

Sitenizi açın ve panelde Gerçek zamanlı görünümüne bakın — birkaç saniye içinde ziyaretçiniz görünür. Ekran görüntüsü/iframe içinde kalmayan gerçek bir ziyaretçi gerekir.

Platformlara göre kurulum

WordPress

Tema düzenleyiciden header.php dosyasını açın ve kodu </head> satırının hemen üstüne ekleyin. Alternatif: eklenti kullanmıyorsanız functions.php'ye şu parçayı ekleyin:

add_action('wp_head', function () {
  echo '<script async src="https://a.yerliveri.com/v1/sdk.js" data-site="SITE_ANAHTARINIZ"></script>';
}, 99);

Önbellek eklentisi varsa (WP Rocket, LiteSpeed vb.) kurulumdan sonra önbelleği temizleyin.

Shopify

Yönetim paneli → Online Store → Themes → ⋯ → Edit code → layout/theme.liquid dosyasını açın, kodu </head> öncesi ekleyip kaydedin.

Next.js (App Router)

Kök app/layout.tsx içinde <head>'e ekleyin. Next.js'te <Script> bileşeni de kullanılabilir:

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

export default function RootLayout({ children }) {
  return (
    <html lang="tr">
      <body>
        {children}
        <Script src="https://a.yerliveri.com/v1/sdk.js"
                strategy="afterInteractive"
                data-site="SITE_ANAHTARINIZ" />
      </body>
    </html>
  );
}

React / Vite (SPA)

index.html dosyanızın <head> bölümüne aynı satırı ekleyin. SPA içi sayfa geçişleri (history.pushState) SDK tarafından otomatik algılanır — ayrıca rota değişikliği dinlemenize gerek yoktur.

Astro

Paylaşılan layout dosyanızın (src/layouts/*.astro) <head> bölümüne düz <script is:inline> yerine doğrudan <script> etiketi olarak ekleyin:

<head>
  ...
  <script async src="https://a.yerliveri.com/v1/sdk.js" data-site="SITE_ANAHTARINIZ"></script>
</head>

Blogger

Tema → HTML'i düzenle → </head> öncesine yapıştırıp kaydedin.

Webflow

Site ayarları → Custom Code → Head Code alanına ekleyip yayınlamayı unutmayın (ücretsiz planda yayın gerekir).

Statik HTML / çok sayfalı site

Her sayfanın (ya da ortak header include'ının) <head> bölümüne aynı satır. Bir include mekanizmanız yoksa, en azından ana sayfa + giriş/karar sayfalarına ekleyin.

SDK parametreleri (data-*)

Parametre	Varsayılan	Açıklama
`data-site`	— (zorunlu)	Site anahtarı (`yv_…`). Bilinen bir anahtar yerine alan adı da yazılabilir; tanımsız alan adları anonim proje olarak otomatik açılır ve düşük limite tabi tutulur.
`data-auto`	`true`	Otomatik toplama (sayfa görüntüleme, tıklama, hata, vitals…). `false` yaparsanız yalnızca `YerliVeri.track()` çağrılarınız gönderilir.
`data-sample-mouse`	`0.5`	Fare yolu örnekleme oranı (0–1). 0 = kapatır.
`data-consent`	`standard`	`standard` \| `granular` \| `strict`. `strict` fare yolu toplamayı tamamen kapatır. Çalışma zamanında `YerliVeri.setConsent('strict')` ile de değiştirilebilir.
`data-endpoint`	SDK adresinden türetilir	Toplama adresini değiştirmek isteyenler için (gelişmiş).
`data-debug`	`false`	`true` ise olaylar tarayıcı konsoluna da yazılır.

Kendi olaylarınız

SDK global olarak YerliVeri nesnesi sunar:

YerliVeri.track('kayit_tamamlandi', { plan: 'pro' });  // özel olay
YerliVeri.identify('musteri-123');                     // oturumda kimlik
YerliVeri.setConsent('strict');                        // onay modu
YerliVeri.flush();                                     // bekleyenleri gönder

track değerlerinde e-posta/şifre gibi kişisel veri göndermeyin; sunucu tarafında yasaklı anahtarlar otomatik atılır.

CSP (Content-Security-Policy) uyumu

Sitenizde katı bir CSP varsa aşağıdaki kaynaklara izin verin:

script-src  https://a.yerliveri.com
connect-src https://a.yerliveri.com
img-src     https://a.yerliveri.com

SDK, gönderimleri text/plain gövdeyle yaptığı için CORS ön kontrolü (preflight) hiçbir zaman tetiklenmez.

JS çalışmayan ortamlar: pixel

Newsletter'lar, CSP kısıtlı gömüler veya JS'siz sayfalar için 1×1 piksel de kullanabilirsiniz (yalnızca sayfa görüntüleme sayar):

<img src="https://a.yerliveri.com/v1/pixel.gif?k=SITE_ANAHTARINIZ&e=page_view" width="1" height="1" alt="">

Doğrulama ve alan adı sahipliği

Canlı kontrol: Panel → proje → Gerçek zamanlı. Ziyaretçi görünmüyorsa: reklam engelleyiciyi kapatın, data-site değerini kontrol edin, sayfayı gizli pencerede açın.
Alan adı doğrulama (önerilir): Panel → Kurulum → 2. adımda gösterilen TXT kaydını DNS'inize ekleyin. Doğrulanmış alan adları güven skorunu yükseltir ve sizin adınıza veri gönderilmesini engeller.

Kurulum kontrol listesi

Kod, <head> içinde ve async ile ekli
data-site değeri paneldeki anahtarla birebir aynı
Önbellek temizlendi (CDN/WordPress)
Reklam engelleyici kapalıyken Gerçek zamanlı görünümde ziyaretçi görünüyor
CSP varsa üç kaynak izni eklendi
Alan adı DNS TXT ile doğrulandı

Dikkat: Aynı anahtarı hem üretim hem test ortamında kullanmak verilerinizi karıştırır. Ayrı projeler (ayrı anahtarlar) oluşturun.