Tıklama, Form ve Scroll Takibi
1. Tıklama Takibi: All Clicks vs Just Links
GTM'de tıklama takibi için iki tür tetikleyici vardır. Doğru türü seçmek, istediğiniz veriyi doğru yakalamanın anahtarıdır.
a) All Elements (Tüm Elementler)
Sayfadaki herhangi bir HTML elementine yapılan tıklamayı yakalayan tetikleyicidir. Buna butonlar, resimler, div'ler, span'ler — kısacası tıklanabilir her şey dahildir.
- Ne zaman kullanılır? Bir buton, resim veya link olmayan bir elemente tıklamayı takip etmek istediğinizde.
- Örnek: "Teklif Al" butonu (genellikle
<button>veya<div>elementlidir), bir akordeon menüsünün açılması, sekme (tab) değiştirme.
b) Just Links (Yalnızca Linkler)
Yalnızca <a> (anchor) elementlerine yapılan tıklamayı yakalar. Linke özel ek özellikler sunar.
- Ne zaman kullanılır? Bir bağlantıya (link) tıklamayı takip etmek istediğinizde.
- Ekstra özellik: "Wait for Tags" seçeneği ile link tıklandığında GTM'nin tag'leri göndermesini bekledikten sonra kullanıcıyı yönlendirir. Bu, dış bağlantılara tıklamada veri kaybını önler.
flowchart TD
A["Tıklama Takibi"] --> B{"Ne tıklanıyor?"}
B -->|"<a> link"| C["Just Links\nTetikleyicisi"]
B -->|"Buton, resim,\ndiv, vb."| D["All Elements\nTetikleyicisi"]
C --> E["Click URL\nClick Text\nClick Element"]
D --> F["Click Element\nClick Classes\nClick ID\nClick Text"]
style C fill:#E8F6FC,stroke:#29ABE2
style D fill:#DCFCE7,stroke:#22C55E
💡 İpucu: Emin değilseniz All Elements ile başlayın — her tür tıklamayı yakalar. Ancak link tıklamalarında veri kaybı riskini önlemek için "Wait for Tags" özelliğine sahip Just Links tercih edilmelidir.
2. Tıklama Değişkenleri (Click Variables)
GTM'de tıklama olaylarında kullanılabilecek çeşitli built-in değişkenler vardır. Bu değişkenler, tıklanan element hakkında detaylı bilgi sağlar.
a) Temel Click Değişkenleri
- Click Element: Tıklanan HTML elementinin tamamı (ör.
<a href="/iletisim" class="btn">İletişim</a>) - Click Classes: Elementin CSS class'ları (ör. "btn btn-primary cta-button")
- Click ID: Elementin HTML ID'si (ör. "contact-btn")
- Click URL: Link elementlerinin href değeri (ör. "https://site.com/iletisim")
- Click Text: Elementin içindeki metin (ör. "İletişim")
⚠️ Dikkat: Bu değişkenleri kullanmak için önce GTM'de Variables → Built-In Variables → Configure yolundan ilgili click değişkenlerini etkinleştirmeniz gerekir. Varsayılan olarak kapalıdırlar!
b) CSS Selector Matching ile Hedefleme
Bazen tıklanan elementin belirli bir CSS selector ile eşleşmesini koşul olarak kullanmak istersiniz. GTM'de bunu yapmak için tetikleyici koşullarında "Click Element matches CSS selector" seçeneğini kullanabilirsiniz:
a.cta-button— "cta-button" class'ına sahip tüm linkler#hero-section button— hero bölümündeki tüm butonlar[data-action="download"]— data-action özelliği "download" olan tüm elementler.product-card a— ürün kartları içindeki tüm linkler
🎯 Benzetme: CSS selector eşleştirmeyi bir yüz tanıma sistemi gibi düşünün. Güvenlik kamerası (GTM) tüm tıklamaları görür, ama siz yalnızca belirli özelliklere sahip elementleri (ör. "mavi üniformalı kişiler" = "btn-primary class'lı butonlar") takip etmek istiyorsunuz. CSS selector, tam da bu filtreleme işini yapar.
3. Form Gönderim Takibi
İletişim formları, kayıt formları veya arama kutuları — form gönderimlerini takip etmek, özellikle lead generation (potansiyel müşteri kazanımı) için kritik öneme sahiptir.
a) Form Submission Tetikleyicisi
GTM'de form takibi için Form Submission tetikleyicisi kullanılır:
- Tetikleyiciler → Yeni → Form Submission seçin.
- "Wait for Tags": Etkinleştirin — form gönderilmeden önce GTM tag'lerinin tamamlanmasını bekler.
- "Check Validation": Etkinleştirin — yalnızca formun başarılı şekilde doğrulandığında (validation geçtiğinde) tetiklenir. Bu, hatalı form denemelerini filtrelemek için önemlidir.
- Koşul ekleyin: Form ID, Form Classes veya Page URL ile belirli bir formu hedefleyin.
flowchart LR
A["👤 Kullanıcı\nFormu doldurur"] --> B["📋 Form\nvalidation"]
B -->|"Başarısız ❌"| C["Hata mesajı\n(Tag tetiklenmez)"]
B -->|"Başarılı ✅"| D["📦 GTM\nForm Submission\ntetiklenir"]
D --> E["⏳ Wait for Tags\nTag'ler tamamlanır"]
E --> F["📤 Veri gönderilir\n(GA4, Google Ads vb.)"]
F --> G["🔄 Form yönlendirir\n(Teşekkür sayfası)"]
style C fill:#FEE2E2,stroke:#EF4444
style D fill:#E8F6FC,stroke:#29ABE2
style F fill:#DCFCE7,stroke:#22C55E
b) Form Değişkenleri
- Form Element: Form HTML elementinin kendisi
- Form Classes: Formun CSS class'ları
- Form ID: Formun HTML ID'si
- Form URL: Formun action URL'si
- Form Text: Formdaki metin içeriği
⚠️ Dikkat: AJAX ile gönderilen formlar (sayfa yenilenmeden gönderilen) standart Form Submission tetikleyicisi ile yakalanmayabilir. Bu durumda geliştiriciden
dataLayer.push({event: 'form_submitted'}) kodu eklemesini isteyerek Custom Event tetikleyicisi kullanmanız gerekebilir.
4. Scroll Derinliği Takibi
Kullanıcıların sayfanızı ne kadar aşağı kaydırdığını takip etmek, içerik etkileşimini ölçmek için değerli bir metriktir.
a) Scroll Depth Tetikleyicisi
- Tetikleyiciler → Yeni → Scroll Depth seçin.
- Vertical Scroll Depths: Yüzde (%) veya piksel cinsinden eşik değerleri girin. Örneğin: 25, 50, 75, 100.
- Bu, kullanıcı sayfanın %25, %50, %75 ve %100'üne ulaştığında tetikleyicinin çalışacağı anlamına gelir.
b) Scroll Değişkenleri
- Scroll Depth Threshold: Kullanıcının ulaştığı kaydırma yüzdesi (ör. 25, 50, 75)
- Scroll Depth Units: Ölçü birimi (pixels veya percent)
- Scroll Direction: Kaydırma yönü (vertical veya horizontal)
💡 İpucu: GA4'ün Enhanced Measurement özelliği zaten %90 scroll'u otomatik takip eder. Ancak daha detaylı analiz istiyorsanız (her %25'lik dilimde), GTM ile özel scroll takibi kurmanız gerekir.
5. Element Visibility (Element Görünürlük) Tetikleyicisi
Bazen bir elementin ekranda görünür hale gelmesini takip etmek istersiniz. Scroll Depth'ten farklı olarak, burada belirli bir HTML elementini hedeflersiniz.
a) Kullanım Senaryoları
- Kullanıcı sayfayı kaydırarak fiyat tablosunu gördüğünde
- Bir CTA (Call to Action) butonu ekranda göründüğünde
- Ürün yorumları bölümüne ulaşıldığında
- Sayfanın alt kısmındaki (footer) iletişim bilgileri görüntülendiğinde
b) Tetikleyici Ayarları
- Selection Method: Element ID veya CSS Selector ile hedef elementi seçin.
- When to fire: "Once per page" (sayfa başına bir kez) genellikle en iyi seçenektir.
- Minimum Percent Visible: Elementin yüzde kaçının görünmesi gerektiğini belirleyin (ör. %50).
- Minimum On-Screen Duration: Elementin ekranda en az ne kadar süre görünmesi gerektiğini belirleyin (ör. 1000ms = 1 saniye).
🎯 Benzetme: Element Visibility tetikleyicisini bir mağaza vitrini sensörü gibi düşünün. Sensör, bir kişi vitrinin önünde belirli bir süre durduğunda çalışır. Hızla geçen yayaları saymazsınız, ama durup bakan kişileri sayarsınız. Aynı şekilde, bu tetikleyici sadece kullanıcı gerçekten o bölümü gördüğünde ve yeterince baktığında tetiklenir.
flowchart TD
A["Kullanıcı Etkileşim\nTakip Yöntemleri"] --> B["🖱️ Tıklama\n• All Elements\n• Just Links"]
A --> C["📋 Form\n• Form Submission\n• AJAX: Custom Event"]
A --> D["📜 Scroll\n• Scroll Depth\n• Yüzde veya piksel"]
A --> E["👁️ Görünürlük\n• Element Visibility\n• CSS Selector"]
style B fill:#E8F6FC,stroke:#29ABE2
style C fill:#DCFCE7,stroke:#22C55E
style D fill:#FEF3C7,stroke:#F59E0B
style E fill:#E8E0F0,stroke:#8B5CF6