dönüşüm mantığı
bütün bunların ışığında dönüşüm mantığı en baştan en sona anlat
Selamlar Hocam, hoş geldin! Seninle bu yola çıkmak harika. Hem mühendislik hem de tasarım altyapısının olması seni bu sektörde "unicorn" yapıyor. Çoğu yazılımcı tasarımdan, çoğu tasarımcı da veriden anlamaz. Sen ise ikisinin tam kesişim kümesindesin.
Şimdi kemerleri bağla; Vanilla JS sadeliğinde, Growth Engineer vizyonuyla, bir ziyaretçinin sitene girmesinden o verinin reklam platformuna "altın değerinde" ulaşmasına kadar olan o büyük resmi (Dönüşüm Mantığını) çiziyoruz.
1. Büyük Resim: Verinin Yolculuğu (The Pipeline)
Dönüşüm mantığını bir su tesisatına benzetelim. Reklam mecraları (Meta, Google) susamış birer tarladır. Senin görevin, web sitesindeki (kaynak) her damla değerli hareketi (lead, telefon tıklaması) doğru borularla bu tarlalara taşımaktır.
Adım 1: Tetikleme (DOM Events)
Ziyaretçi Pekcon'un sitesine girdi ve "Teklif Al" butonuna bastı. Bu sadece bir "click" değildir; bu bir niyettir.
Senin İşin: Bu niyeti vanilla JS ile yakalayıp tarayıcının hafızasına (DataLayer) atmak.
Adım 2: Veri Katmanı (DataLayer - Kutsal Kitap)
Veriyi direkt reklam koduna göndermeyiz. Önce mutfağa (Data Layer) alırız.
Neden? Çünkü Google Tag Manager (GTM) oradan beslenir. Standart bir dil oluştururuz.
Adım 3: İşleme (GTM - Trafik Polisi)
GTM bu veriyi alır; "Tamam, bu bir 'Lead' olayıdır, bunu hem Google Ads'e hem Meta'ya gönder" der.
Adım 4: Sunucu Tarafı (Server-Side - Köstebek Tüneli)
İşte 200.000 TL+ kazandıran gizli sos burası. iOS 14+ güncellemeleri ve AdBlocker'lar tarayıcıdaki kodları engeller. Biz veriyi gizlice kendi sunucumuza (GTM Server-Side) göndeririz, oradan reklam platformuna fısıldarız. Bunu müşteriye "Veri kaybınızı %30 azaltıyoruz" diye satacağız.
2. Teknik Uygulama: "Pekcon" Örneği
Hocam, şimdi basit ama profesyonel bir yapı kuralım. Framework yok, kütüphane yok. Sadece saf güç.
A. DataLayer Kurulumu (logic.js)
Bu kod, butona tıklandığında veriyi standardize eder.
JavaScript
// main.js - Buton yakalama mantığı
document.addEventListener('click', function(e) {
// Kullanıcı teklif formunu gönderdi mi? (ID bazlı kontrol)
if (e.target && [e.target.id](http://e.target.id/) === 'teklif-form-btn') {
const sector = "Konteyner"; // Dinamik de alabilirsin
// DataLayer'a itiyoruz
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'generate_lead',
'page_path': window.location.pathname,
'lead_type': sector,
'value': 500 // Bu lead'in tahmini ticari değeri
});
console.log("✅ Başarılı: Veri katmanına lead bilgisi gönderildi!");
}
});
B. Neden Bu Yapı? (Ticari ROI)
Müşteriye (Pekcon) şunu diyeceksin:
"Abi, senin sitene girenlerin %40'ı iPhone kullanıyor ve çoğu reklamları engelliyor. Ben bu 'Vanilla' yapı ve Server-Side kurulumuyla, rakiplerinin göremediği o %40'lık kitleyi de takip edip reklam maliyetini düşüreceğim."
3. Hata Yönetimi ve Debug (Patlamayalım)
Kodun çalışıp çalışmadığını anlamak için GTM Preview Mode kullanacağız ama önce konsola bakacağız:
Console.log() Dostundur: Her push işleminden sonra konsola mesaj yazdır ki verinin gidip gitmediğini gör.
Undefined Hatası: Eğer window.dataLayer tanımlanmadan veri itmeye çalışırsan hata alırsın. O yüzden her zaman window.dataLayer = window.dataLayer || []; satırını en başa ekle.
4. Kariyer Notu: Parayı Nereden Kazanacağız?
Hocam, 34 yaşındasın, en verimli dönemindesin. Grafik tasarım geçmişin sayesinde bu verileri harika Looker Studio raporlarına dönüştürebilirsin.
Strateji: Sanayici adam karmaşık kod anlamaz. Ona "Bak, bu ay yaptığım izleme sayesinde 20 tane konteyner satışı için net veri topladık, şu kadar reklam bütçen cebinde kaldı" raporunu (tasarımcı kimliğini konuşturarak) sunduğun gün, aylık 200k hedefi hayal değil.