Custom HTML/JS İleri

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>

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();
}

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.

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.

b) RegEx Table

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

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ı