Custom HTML/JS İleri

📚 Seviye 3 — Uzmanlaşma ⏱ ~12 dakika

1. Custom HTML Tag

GTM'nin yerleşik tag şablonları dışında kalan üçüncü taraf scriptlerini veya özel kodları çalıştırmanızı sağlar.

a) Kullanım Alanları

Üçüncü taraf takip pikselleri (Criteo, TikTok, vb.)
Chatbot, anket veya pop-up scriptleri
Özel event ateşleme scriptleri
dataLayer'a veri enjekte eden scriptler

b) Doğru Kullanım

<script>
  // Üçüncü taraf pixel örneği
  (function() {
    var s = document.createElement('script');
    s.src = 'https://tracking.example.com/pixel.js';
    s.async = true;
    document.head.appendChild(s);
  })();
</script>

⚠️ Uyarı: Custom HTML tag'leri document.write() kullanmamalıdır — bu modern tarayıcılarda sayfayı bozabilir. Ayrıca senkron (async olmayan) script yüklemelerinden kaçının; sayfa performansını olumsuz etkiler.

2. Custom JavaScript Variable

GTM değişkeni olarak JavaScript fonksiyonu yazmak ve dönüş değerini kullanmaktır. Veri dönüştürme ve hesaplama için güçlü bir araçtır.

a) Temel Yapı

function() {
  // Bu fonksiyon bir değer döndürmelidir
  return document.title;
}

b) Veri Dönüştürme Örnekleri

// URL'den domain çıkarma
function() {
  return document.location.hostname;
}

// Fiyatı sayıya çevirme
function() {
  var price = {{DL - product_price}};
  return parseFloat(price) || 0;
}

// E-posta hash'leme (SHA-256)
function() {
  var email = {{DL - user_email}};
  if (!email) return '';
  return email.toLowerCase().trim();
}

graph TD INPUT["📥 Giriş Verisi"] --> CJSV["⚙️ Custom JS Variable\n(Dönüştürme fonksiyonu)"] CJSV --> OUTPUT["📤 Çıkış Değeri"] INPUT --> I1["dataLayer değişkeni"] INPUT --> I2["URL parametresi"] INPUT --> I3["DOM elementi"] INPUT --> I4["Cookie değeri"] OUTPUT --> O1["GA4 event parametresi"] OUTPUT --> O2["Meta Pixel parametresi"] OUTPUT --> O3["Koşullu trigger"] style CJSV fill:#E8F6FC,stroke:#29ABE2

3. Tag Sequencing (Sıralama)

Bir tag ateşlenmeden önce veya sonra başka bir tag'in çalışmasını garanti eder.

a) Setup Tag (Ön Hazırlık)

Ana tag'den önce çalışır. Örnek: dataLayer'a veri yazan bir Custom HTML tag, GA4 event tag'inden önce çalışmalıdır.

b) Cleanup Tag (Temizlik)

Ana tag'den sonra çalışır. Örnek: Dönüşüm tag'i ateşlendikten sonra bir "teşekkür" pop-up'ı göstermek.

sequenceDiagram participant S as Setup Tag participant M as Ana Tag participant C as Cleanup Tag Note over S: Ön hazırlık S->>S: dataLayer'a veri yaz S->>M: Tamamlandı Note over M: Ana işlem M->>M: GA4 event gönder M->>C: Tamamlandı Note over C: Temizlik C->>C: Geçici veriyi sil

💡 İpucu: Tag Sequencing, tag'in Advanced Settings bölümünde bulunur. "Fire a tag before [tag name] fires" ve "Fire a tag after [tag name] fires" seçeneklerini kullanın.

4. Lookup Table ve RegEx Table

a) Lookup Table

Bir değişkenin değerine göre farklı çıktılar üretir. If-else mantığının görsel karşılığıdır.

Giriş (Page URL)	Çıkış (Page Category)
/urunler/	product_listing
/sepet	cart
/odeme	checkout
/tesekkurler	thank_you

b) RegEx Table

Lookup Table gibi çalışır ama giriş değerini RegEx ile eşleştirir. Daha esnek ama daha karmaşıktır.

RegEx Pattern	Çıkış
`/urun/.*`	product_detail
`/kategori/.*`	category
`/blog/.*`	blog_post

5. DOM Element ve Auto-Event Variable

a) DOM Element Variable

Sayfadaki bir HTML elementinin içeriğini veya attribute'unu okur. Geliştirici desteği olmadan veri çekmek için kullanılır.

Selection Method: ID veya CSS Selector
Attribute Name: Boş bırakılırsa inner text, doldurulursa o attribute'un değeri okunur

b) Auto-Event Variable

Click, Form Submit gibi otomatik event'lerde tıklanan/gönderilen element'in bilgilerini okur:

Click Element: Tıklanan HTML element'i
Click Text: Element'in metin içeriği
Click URL: Link'in href değeri
Click ID / Click Classes: Element'in ID ve CSS class'ları

🎯 Benzetme: DOM Element Variable bir dedektif gibidir — sayfadaki belirli bir elementi bulur ve içeriğini okur. Auto-Event Variable ise bir güvenlik kamerası gibidir — kullanıcının tıkladığı veya gönderdiği her şeyin detaylarını kaydeder.

📝 Quiz — Bilgini Test Et

← Önceki Ders Sonraki Ders →