Merge branch 'gece/p2-olcum' into gece/entegrasyon-test-2

This commit is contained in:
bilalgursen
2026-09-21 09:27:12 +03:00
13 changed files with 224 additions and 53 deletions

16
src/app/paket/layout.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { PaketGorunumOlayi } from "@/features/odeme/components/paket-gorunum-olayi";
// Yalnızca ölçüm için: sayfanın kendisine dokunmadan paket_goruntulendi
// olayını bağlar (bkz. paket-gorunum-olayi.tsx).
export default function PaketLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<>
{children}
<PaketGorunumOlayi />
</>
);
}

View File

@@ -12,24 +12,19 @@ import { kullaniciTanit, kullaniciTemizle } from "@/lib/analitik";
export function RybbitIdentify({
kullaniciId,
eposta,
isim,
}: {
/** null = oturum yok; o cihazdaki kimlik temizlenir (çıkış sonrası) */
kullaniciId: string | null;
eposta?: string | null;
isim?: string | null;
}) {
// Yalnızca opak kullanıcı ID'si gider: e-posta/isim gibi kişisel veri
// üçüncü taraf analitiğe trait olarak GÖNDERİLMEZ.
useEffect(() => {
if (!kullaniciId) {
kullaniciTemizle();
return;
}
const traits: Record<string, string> = {};
if (eposta) traits.email = eposta;
if (isim) traits.name = isim;
kullaniciTanit(kullaniciId, traits);
}, [kullaniciId, eposta, isim]);
kullaniciTanit(kullaniciId);
}, [kullaniciId]);
return null;
}

View File

@@ -1,54 +1,60 @@
"use client";
import { useEffect, useRef, type RefObject } from "react";
import { olay, type OlayAdi, type Ozellikler } from "@/lib/analitik";
import { useCallback, useEffect, useRef, type RefCallback } from "react";
import {
olayAnahtari,
olayBirKez,
type OlayAdi,
type Ozellikler,
} from "@/lib/analitik";
/**
* Bir elemanın viewport'a ilk girişinde analitik olayı atan ref hook'u.
* Gösterim olayları (hazir_panel_goruntulendi, kilit_goruntulendi vb.)
* oturum başına en fazla 1 kez sayılmalı; tekilleştirme sessionStorage
* anahtarıyla yapılır. IntersectionObserver yoksa olay hiç atılmaz —
* "görüntülendi" ölçümünde görünürlüğü doğrulayamadığımız cihazı saymak
* veriyi şişirir.
* anahtarıyla yapılır (bkz. olayBirKez). IntersectionObserver yoksa olay hiç
* atılmaz — "görüntülendi" ölçümünde görünürlüğü doğrulayamadığımız cihazı
* saymak veriyi şişirir.
*
* Callback ref döner (RefObject değil): gözlem effect'te değil, DOM düğümü
* bağlandığı anda kurulur. Eleman ilk commit'te yoksa (kaydet-banner: mount
* sonrası açılır, üstelik portal içinde) ya da sökülüp yeni bir düğümle geri
* geliyorsa (tadımlık satırı: tip uymayınca gizlenip fetch sonrası yeniden
* takılır) useRef + effect deseni gözlemi hiç kurmuyordu.
*/
export function useGorunumOlayi<T extends HTMLElement = HTMLElement>(
ad: OlayAdi,
ozellikler?: Ozellikler,
/** Aynı olayın farklı yüzeyleri için tekilleştirme eki ("satir", "kart"). */
anahtarEki?: string,
): RefObject<T | null> {
const ref = useRef<T>(null);
// Özellikler her render sonrası tazelenir; observer effect'i yalnızca
// ad/anahtar değişiminde kurulur (deps'e obje koymamak için ref).
): RefCallback<T> {
// Özellikler her render sonrası tazelenir; callback ref yalnızca ad/anahtar
// değişiminde yeniden kurulur (deps'e obje koymamak için ref).
const ozelliklerRef = useRef(ozellikler);
useEffect(() => {
ozelliklerRef.current = ozellikler;
});
useEffect(() => {
const el = ref.current;
if (!el || typeof IntersectionObserver === "undefined") return;
return useCallback(
(el: T | null) => {
if (!el || typeof IntersectionObserver === "undefined") return;
const anahtar = `kolaytercih.olay.${ad}${anahtarEki ? `.${anahtarEki}` : ""}`;
try {
if (window.sessionStorage.getItem(anahtar)) return;
} catch {
// Storage engelliyse tekilleştirmeden vazgeç, olay yine atılabilir
}
const io = new IntersectionObserver((entries) => {
if (!entries.some((e) => e.isIntersecting)) return;
io.disconnect();
try {
window.sessionStorage.setItem(anahtar, "1");
if (window.sessionStorage.getItem(olayAnahtari(ad, anahtarEki))) return;
} catch {
// yut
// Storage engelliyse tekilleştirmeden vazgeç, olay yine atılabilir
}
olay(ad, ozelliklerRef.current);
});
io.observe(el);
return () => io.disconnect();
}, [ad, anahtarEki]);
return ref;
const io = new IntersectionObserver((entries) => {
if (!entries.some((e) => e.isIntersecting)) return;
io.disconnect();
olayBirKez(ad, ozelliklerRef.current, anahtarEki);
});
io.observe(el);
// React 19 ref temizliği: düğüm sökülünce (ya da ad/anahtar değişince)
// gözlemci bırakılır; yeni düğüm bağlanınca callback baştan çalışır.
return () => io.disconnect();
},
[ad, anahtarEki],
);
}

View File

@@ -38,8 +38,10 @@ export function GirisForm({ callbackURL }: { callbackURL: string }) {
// Yeniden gönderim arası bekleme (sn) — istemeden spam'lenmesin
const [bekleme, setBekleme] = useState(0);
// 60 sn: sunucunun adres başına gönderim soğumasıyla hizalı; daha kısa
// sayaçta "Yeniden gönder" sessizce yutulur, kullanıcı gelmeyen maili bekler.
function geriSayimBaslat() {
setBekleme(30);
setBekleme(60);
const sayac = setInterval(() => {
setBekleme((s) => {
if (s <= 1) {
@@ -59,6 +61,7 @@ export function GirisForm({ callbackURL }: { callbackURL: string }) {
callbackURL,
});
if (error) {
olay("giris_hata", { yontem: "google", status: error.status ?? 0 });
toast.error("Google ile giriş başarısız. Tekrar dener misin?");
setBusy(null);
}
@@ -81,7 +84,13 @@ export function GirisForm({ callbackURL }: { callbackURL: string }) {
});
setBusy(null);
if (error) {
toast.error("Bağlantı gönderilemedi. Tekrar dener misin?");
olay("giris_hata", { yontem: "eposta", status: error.status ?? 0 });
// 429 = hız sınırı: "tekrar dene" demek sınırı daha da uzatır
toast.error(
error.status === 429
? "Çok sık denedin, bir dakika sonra tekrar dene"
: "Bağlantı gönderilemedi. Tekrar dener misin?",
);
return;
}
setSent(true);

View File

@@ -44,11 +44,11 @@ export async function UserNav() {
return (
<div className="order-2 flex shrink-0 items-center gap-1.5 sm:gap-2">
<RybbitIdentify kullaniciId={u.id} eposta={u.email} isim={u.name} />
<RybbitIdentify kullaniciId={u.id} />
<ListeSenkron userId={u.id} />
<ListemButonu />
<Link
href="/paket"
href="/paket?kaynak=nav"
className="inline-flex h-9 items-center gap-1.5 whitespace-nowrap rounded-full border border-slate-200 bg-white px-3 text-xs font-semibold text-slate-700 transition-colors duration-200 hover:border-slate-300 hover:bg-slate-50 sm:h-12 sm:gap-2 sm:px-5 sm:text-sm"
title="Kredilerin — yüklemek için tıkla"
>

View File

@@ -163,6 +163,7 @@ function KapıIcerik({
sira_kovasi: siraKovasi(siraDeger),
});
} catch {
olay("sira_form_hata", { kaynak: duzenle ? "duzenle" : "kapi" });
setHata("Bir şeyler ters gitti, tekrar dener misin?");
} finally {
setYukleniyor(false);

View File

@@ -0,0 +1,25 @@
"use client";
// /paket görüntülenmesini ve ziyaretçiyi oraya getiren yüzeyi ölçer.
//
// Neden ayrı bileşen + layout: /paket sayfası sunucu bileşeni ve statik
// kalmalı. `useSearchParams` kullanılmaz — cacheComponents açıkken Suspense
// sınırı/CSR bailout gerektirir; parametre yalnızca ölçüm için lazım, mount
// sonrası window.location'dan okumak yeter.
import { useEffect } from "react";
import { olayBirKez } from "@/lib/analitik";
// Serbest metin analitiğe sızmasın: bilinmeyen değerler "diger"e düşer.
const KAYNAKLAR = ["kilit", "kredi_bitti", "nav"] as const;
export function PaketGorunumOlayi() {
useEffect(() => {
const ham = new URLSearchParams(window.location.search).get("kaynak");
const kaynak = KAYNAKLAR.find((k) => k === ham) ?? "diger";
// Oturum başına kaynak başına 1 kez: yenileme sayıyı şişirmesin
olayBirKez("paket_goruntulendi", { kaynak }, kaynak);
}, []);
return null;
}

View File

@@ -84,9 +84,11 @@ export function ListeUretici({
} else if (sonuc.code === "AUTH") {
router.push(`/giris?callback=${encodeURIComponent("/listem?uret=1")}`);
} else {
olay("liste_uretim_hata", { kod: sonuc.code });
setDurum({ ad: "hata", mesaj: sonuc.error });
}
} catch {
olay("liste_uretim_hata", { kod: "ISTISNA" });
setDurum({
ad: "hata",
mesaj: "Beklenmeyen bir hata oluştu, tekrar dener misin?",
@@ -131,7 +133,7 @@ export function ListeUretici({
size="lg"
className="mt-6 cursor-pointer bg-orange-500 text-white transition-colors duration-200 hover:bg-orange-600"
>
<Link href="/paket">
<Link href="/paket?kaynak=kredi_bitti">
{hasPaket ? "+30 kredi yükle — 129 TL" : "Paketi aktive et — 299 TL"}
<ArrowRight className="size-4" aria-hidden />
</Link>

View File

@@ -285,7 +285,7 @@ export function ListemGovde({
asChild
className="h-11 w-full shrink-0 cursor-pointer bg-orange-500 text-white transition-[background-color,transform] duration-200 active:scale-[0.97] hover:bg-orange-600 sm:w-auto"
>
<Link href="/paket">
<Link href="/paket?kaynak=kilit">
Analizleri aç — {paketFiyati} TL
<ArrowRight data-icon="inline-end" aria-hidden />
</Link>
@@ -366,7 +366,7 @@ export function ListemGovde({
size="lg"
className="mt-5 w-full cursor-pointer bg-orange-500 text-white transition-[background-color,transform] duration-200 active:scale-[0.97] hover:bg-orange-600"
>
<Link href="/paket">
<Link href="/paket?kaynak=kilit">
Kişisel analizi aç
<ArrowRight data-icon="inline-end" aria-hidden />
</Link>

View File

@@ -21,6 +21,7 @@ import {
DrawerTitle,
} from "@/components/ui/drawer";
import { SectionEyebrow } from "@/components/pixel-decor";
import { useGorunumOlayi } from "@/components/use-gorunum-olayi";
import {
SihirbazAdimlarLazy,
preloadSihirbazAdimlar,
@@ -73,6 +74,10 @@ export function CtaSiraForm({ baslik }: { baslik?: string }) {
const [yukleniyor, setYukleniyor] = useState(false);
const [hata, setHata] = useState<string | null>(null);
const [girisli, setGirisli] = useState(false);
// Huni girişi ölçümü: ref yalnızca profilsiz daldaki karta bağlanır; kayıtlı
// profilli ziyaretçi formu hiç görmediğinden sayılmaz. Sayfa ayrımı için
// özellik gerekmez — Rybbit olayın pathname'ini zaten yazar.
const formRef = useGorunumOlayi<HTMLElement>("cta_form_goruntulendi");
// Yazarken binlik ayracıyla biçimle (85000 → 85.000)
function siralamaDegisti(ham: string) {
@@ -108,6 +113,7 @@ export function CtaSiraForm({ baslik }: { baslik?: string }) {
sira_kovasi: siraKovasi(value),
});
} catch {
olay("sira_form_hata", { kaynak: "cta" });
setHata("Bir şeyler ters gitti, tekrar dener misin?");
} finally {
setYukleniyor(false);
@@ -159,7 +165,10 @@ export function CtaSiraForm({ baslik }: { baslik?: string }) {
}
return (
<section className="rounded-2xl border border-primary/20 bg-primary/5 p-6 sm:p-8">
<section
ref={formRef}
className="rounded-2xl border border-primary/20 bg-primary/5 p-6 sm:p-8"
>
<h2 className="font-heading text-xl font-bold text-slate-900">
{baslik ?? "Sıralamanla nereye yerleşirsin? Saniyede gör."}
</h2>

View File

@@ -85,6 +85,7 @@ export function HeroForm() {
sira_kovasi: siraKovasi(value),
});
} catch {
olay("sira_form_hata", { kaynak: "hero" });
setHata("Bir şeyler ters gitti, tekrar dener misin?");
} finally {
setYukleniyor(false);

View File

@@ -9,7 +9,7 @@ import { useReducedMotion } from "motion/react";
import { Button } from "@/components/ui/button";
import { PixelField } from "@/components/pixel-decor";
import { useGorunumOlayi } from "@/components/use-gorunum-olayi";
import { olay } from "@/lib/analitik";
import { olay, olayBirKez, siraKovasi } from "@/lib/analitik";
import type { SihirbazFacetleri } from "@/types/yokatlas";
import { SIHIRBAZ_AC_EVENT, SIHIRBAZ_STORAGE_KEY, sihirbazDogrula, type SihirbazSecimleri } from "@/features/sihirbaz/sihirbaz-sabitler";
import { tercihProfiliYaz } from "@/features/sihirbaz/sihirbaz-profil";
@@ -82,6 +82,22 @@ export function SihirbazBolumu({
// görsün diye ref'te tutulur; olay dinleyicisi bir kez bağlanır.
const bekleyenRef = useRef<BekleyenSecim | null>(null);
// Huni adımı: sonuç sayfası görüntülendi. URL sıralamayı taşıdığı için
// pathname maskeli (bkz. app/layout.tsx); huni bu olayla kurulur. Oturum
// başına girişli/anonim için birer kez — girişten dönen ziyaretçi ikinci
// kez "girisli" olarak sayılır. Ham sıra gönderilmez, yalnızca kovası.
useEffect(() => {
olayBirKez(
"sonuc_goruntulendi",
{
girisli: girisliMi ? "evet" : "hayir",
sira_kovasi: siraKovasi(sira),
},
girisliMi ? "girisli" : "anonim",
);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
// Mount sonrası storage'dan bekleyen seçimleri oku
useEffect(() => {
try {

View File

@@ -3,8 +3,9 @@
*
* Script yalnızca prod build'de yükleniyor (bkz. app/layout.tsx) ve reklam
* engelleyiciler tarafından bloklanabiliyor; bu yüzden buradaki her çağrı
* `window.rybbit` yoksa sessizce hiçbir şey yapmaz — çağıran taraf asla
* varlık kontrolü yapmak zorunda kalmasın.
* `window.rybbit` yoksa kullanıcıya hiçbir şey hissettirmez (olaylar kısa
* süre kuyrukta bekler, script gelmezse atılır) — çağıran taraf asla varlık
* kontrolü yapmak zorunda kalmasın.
*
* KURAL: Öğrencinin ham başarı sıralaması analitiğe GÖNDERİLMEZ. Sıralama
* her zaman `siraKovasi()` ile bantlanır.
@@ -29,7 +30,13 @@ export type OlayAdi =
| "kilit_goruntulendi"
| "kredi_bitti"
| "tadimlik_goruntulendi"
| "kaydet_banner_goruntulendi";
| "kaydet_banner_goruntulendi"
| "cta_form_goruntulendi"
| "sira_form_hata"
| "sonuc_goruntulendi"
| "paket_goruntulendi"
| "liste_uretim_hata"
| "giris_hata";
export type Ozellikler = Record<string, string | number>;
@@ -48,16 +55,100 @@ declare global {
}
}
/** Özel olay gönderir. Script yoksa no-op. */
// Erken olay kuyruğu: script `afterInteractive` yüklendiği için sert sayfa
// yüklemesinde (OAuth dönüşü, e-postadaki link, yer imi) mount effect'leri
// `window.rybbit`'ten önce koşar. Mount anında atılan olaylar
// (sonuc_goruntulendi, paket_goruntulendi) kaybolmasın diye script gelene
// kadar burada bekletilir. Script hiç gelmezse (reklam engelleyici, dev)
// kuyruk 10 sn sonra sessizce atılır ve bir daha doldurulmaz.
const KUYRUK_SINIRI = 20;
const DENEME_ARALIGI_MS = 500;
const DENEME_SINIRI = 20;
let kuyruk: Array<[OlayAdi, Ozellikler | undefined]> = [];
let zamanlayici: ReturnType<typeof setInterval> | null = null;
let denemeSayisi = 0;
let kuyrukKapali = false;
function zamanlayiciyiDurdur(): void {
if (zamanlayici !== null) clearInterval(zamanlayici);
zamanlayici = null;
}
/** Bekleyen olayları geliş sırasıyla gönderir. */
function kuyruguBosalt(rybbit: RybbitApi): void {
const bekleyenler = kuyruk;
kuyruk = [];
zamanlayiciyiDurdur();
for (const [ad, ozellikler] of bekleyenler) {
try {
rybbit.event(ad, ozellikler);
} catch {
// yut
}
}
}
function kuyrugaEkle(ad: OlayAdi, ozellikler?: Ozellikler): void {
if (kuyrukKapali || kuyruk.length >= KUYRUK_SINIRI) return;
kuyruk.push([ad, ozellikler]);
if (zamanlayici !== null) return;
zamanlayici = setInterval(() => {
denemeSayisi += 1;
if (window.rybbit) {
kuyruguBosalt(window.rybbit);
} else if (denemeSayisi >= DENEME_SINIRI) {
// Script gelmedi: bekleyenleri at, sonraki olaylar eski no-op'a dönsün
kuyruk = [];
kuyrukKapali = true;
zamanlayiciyiDurdur();
}
}, DENEME_ARALIGI_MS);
}
/** Özel olay gönderir. Script henüz yoksa kısa süre kuyrukta bekletir. */
export function olay(ad: OlayAdi, ozellikler?: Ozellikler): void {
if (typeof window === "undefined") return;
try {
window.rybbit?.event(ad, ozellikler);
if (!window.rybbit) {
kuyrugaEkle(ad, ozellikler);
return;
}
// Sıra bozulmasın: bekleyen varsa önce onlar gider
if (kuyruk.length > 0) kuyruguBosalt(window.rybbit);
window.rybbit.event(ad, ozellikler);
} catch {
// Analitik hiçbir koşulda kullanıcı akışını bozmaz
}
}
/** Oturum başına tekilleştirme anahtarı (useGorunumOlayi ile ortak). */
export function olayAnahtari(ad: OlayAdi, anahtarEki?: string): string {
return `kolaytercih.olay.${ad}${anahtarEki ? `.${anahtarEki}` : ""}`;
}
/**
* Olayı oturum (sekme) başına en fazla 1 kez gönderir; "görüntülendi" türü
* olaylar yenileme ve geri-ileri gezinmede şişmesin diye. Tekilleştirme
* sessionStorage anahtarıyla yapılır.
*/
export function olayBirKez(
ad: OlayAdi,
ozellikler?: Ozellikler,
/** Aynı olayın farklı yüzeyleri/durumları için tekilleştirme eki. */
anahtarEki?: string,
): void {
if (typeof window === "undefined") return;
const anahtar = olayAnahtari(ad, anahtarEki);
try {
if (window.sessionStorage.getItem(anahtar)) return;
window.sessionStorage.setItem(anahtar, "1");
} catch {
// Storage engelliyse tekilleştirmeden vazgeç, olay yine atılır
}
olay(ad, ozellikler);
}
/**
* Ham sıralamayı analitik için bantlar. Panelde "hangi sıralama bandı
* dönüşüyor" sorusunu yanıtlar ama tekil öğrenciyi işaret etmez.