Ana sayfa / Rehberler

Sonraki dağıtımda bozulmayacak bir GTM tıklama tetikleyicisi

Kopyalanan CSS seçici neden eşleşmeyi bırakır, hangi niteliklere tutunmaya değer ve hangi Tailwind sınıfı seçiciyi sessizce geçersiz kılar.

Yayınlandı 10 Ağustos 2026

GTM işinin çoğu tekrar eden aynı küçük görevdir: sayfadaki bir şeyin event'e dönmesi gerekir. DevTools'u açar, düğmeye sağ tıklar, Copy selector der, Click tetikleyicisine yapıştırır, yayınlarsınız. Üç hafta sonra tetikleyici ateşlenmeyi bırakır ve aylık rapor zayıf görünene kadar kimse fark etmez.

Kopyalanan seçiciler neden çürür

• Konuma dayalıdırlar. "Copy selector" size div:nth-child(3) > div:nth-child(2) > button gibi bir yol verir. Düğmenin üstünde herhangi bir yere tek bir sarmalayıcı eklensin, hiçbir şeyle eşleşmez.
• Sınıf adları üretilmiştir. CSS modules, styled-components ve benzerleri Button_root__x7f2q gibi adlar üretir; dosya değişince hash de değişir.
• Kimlikler de öyle. Framework'ler ember1234, sekiz karakterlik bir onaltılık dizi ya da düpedüz bir sayı üretir; hepsi bir sonraki render'da yenilenir.

Neye tutunmalı, hangi sırayla

1. Gerçek bir kimlik varsa ona. Kimlik mümkün olan en kısa seçicidir ve belirsiz olamaz. Rakamla başlıyorsa, içinde sekiz karakterlik onaltılık bir dizi varsa ya da framework öneki taşıyorsa reddedin — bunlar yazılmış değil üretilmiştir.
2. Hedeflenmek için var olan bir niteliğe. data-gtm, data-testid, name, aria-label. Bunları biri bilerek koymuştur; bir yeniden tasarım görünümü değiştirir, onlara dokunmaz. Tek uyarı: değerin içinde { ya da tırnak varsa karşınızdaki işlenmemiş bir şablondur ve yarın aynı olmayacaktır.
3. Sınıflara, idareli. İki üç anlamlı sınıf, ama asla durum sınıfları — hover, active, focus, valid, invalid kullanıcı sayfayla etkileşirken gelir gider; bunlara dayanan seçici yalnızca bazen eşleşir.

Tailwind tuzağı

Tailwind sınıf adları CSS'te anlamı olan karakterler içerir. hover:bg-blue-500 iki nokta taşır; md:w-1/2 iki nokta ve eğik çizgi. Kaçışsız biçimde seçiciye yazıldığında sonuç "eşleşmeyen bir seçici" değildir — geçersiz CSS'tir ve GTM'in Click tetikleyicisi hiç ateşlenmez. Hiçbir yerde hata da görmezsiniz.

Kaçışlı hâli .hover\:bg-blue-500 ve çalışır. Modern bir sitede elle yazılmış bir seçicinin hiçbir şey yapmamasının en yaygın sebebi budur.

Benzersiz olur olmaz durun

En iyi seçici, sayfada tam olarak bir öğeyle eşleşen en kısa seçicidir. O noktadan sonra eklediğiniz her üst öğe, yeniden yapılandırılabilecek bir öğe daha demektir. Kurarken eşleşme sayısını kontrol etmek ve bire düştüğü anda durmak, body'den başlayan tam bir yola göre çok daha dayanıklı bir sonuç verir.

Tıkladığınız öğe, GTM'in gördüğü öğe değil

Bir düğmeye tıklarsınız; tarayıcı imlecin altındaki en derin öğeyi bildirir ve bu genellikle etiketi tutan <span>'dir. GTM'in Click Element'i o span'dır. Düğmeye göre yazılmış bir tetikleyici de yalnızca biri metnin çevresindeki boşluğa denk geldiğinde ateşlenir.

Çözüm, en yakın gerçekten tıklanabilir üst öğeye çıkmaktır — bir <a>, bir <button> ya da role="button" taşıyan bir şey — ve oraya tutunmak. GTM'in Click Element değişkeni matches CSS selector'ı destekler; tıklanan öğeyi seçiciye karşı sınar ve alt öğeleri kapsayan bir seçici çocukları kendiliğinden içine alır.

Değeri dışarı çıkarmak

Bir tıklama tetikleyicisi genelde bir de sayı ister: tıklanan karttaki fiyat. Bu, tıklanan öğeye göreli olarak fiyat öğesini bulan ve metni ayrıştıran bir Custom JavaScript değişkeni demektir — yerelleştirmenin ısırdığı yer de burasıdır. 1.648,25 TL ile $1,648.25 ikisi de 1648.25'e dönmek zorunda ve saf bir parseFloat ilkini 1 yapar. Rakam ve ayraç dışındaki her şeyi atın, sonra hangi ayracın ondalık olduğuna kendisinden sonra gelene bakarak karar verin.

Yayınlamadan önce doğrulayın

1. Öğeye tıklayın ve sayfada tam olarak bir eşleşme olduğunu doğrulayın.
2. Bir kardeşine tıklayın — başka bir ürün kartı, sıradaki ikinci düğme — ve bilerek istemediyseniz eşleşmediğini doğrulayın.
3. Öğenin kenarına değil, içindeki metne tıklayın. En derin öğe sorununu yakalayan test budur.
4. Sayfayı yenileyip tekrarlayın. Yalnızca yenilemeden önce eşleşen her şey, üretilmiş markup'la eşleşiyordu.

İlgili rehberler

• Google Tag Gateway: gerçekten çalıştığını doğrulamak
• GA4 trafiğin başka yerden geldiğini söylediğinde
• Gömülü bir widget'ın içindeki izleme