GTM’nin kendi otomatik event listener yapması gereken görevi yerine getirmediği bir Google Tag Manager kurulumuyla sık sık karşılaşıyoruz. Listener’ın çalışmamasının birçok nedeni olabilir, ancak çok yaygın bir eğilim, sayfanızda çakışan JavaScript kitaplıkları veya komut dosyaları çalıştırmanızdır.
Sorunu ele almadan önce Listener’ın nasıl çalıştığını inceleyelim. Belge Nesne Model’inizdeki (sayfanızdaki tüm öğelerin koleksiyonu) bir öğeye bir “event listener” eklediğinizde, listener öğenin dinlediği eylemi üretmesini bekler.
- Link Click Listener (bağlantı tıklama dinleyicisi) ile, işleyici bir bağlantı (<a/>) öğesinin tıklama Event’inin tetiklemesini bekler.
- Click Listener ile (tıklama dinleyicisiyle), işleyici herhangi bir öğenin tıklama olayını tetiklemesini bekler.
- Bir Form submit Listener (form gönderme dinleyicisi) ile, işleyici bir form (<form/>) öğesinin bir gönderme olayını tetiklemesini bekler.
Şimdi bunu takip etmek hala kolay olmalı. Bir Link Click Listener(bağlantı tıklama dinleyicisi) kurarsınız ve birisi bir bağlantıya tıkladığında, dinleyici “gtm.linkClick” event “dataLayer” nesnesine gönderir.
Competing Listener (Rakip Dinleyiciler)
İşin özü şu. Aynı eventi bekleyen başka bir listener varsa, etkinliğin GTM dinleyicisine ulaşmasını engelleme şansı vardır, bu da bağlantı tıklama Link Click Listener’ın asla ateşlenmeyeceği anlamına gelir.
Bu nasıl mümkün olabilir?
Örneğin, bir GTM Link Click Listener aslında sayfanızdaki her bir bağlantı öğesinde hazır değildir. Bunun yerine, mümkün olan en yüksek DOM öğesi düğümüne eklenir: belgenin kendisi. Event Delegation adı verilen bir JavaScript özelliğini kullanır. Bu, bir bağlantıda tıklama olayı gerçekleştiğinde, olayın en üstteki düğüme ulaşana kadar DOM ağacında Buble (kabarcık) oluşturmaya (evet, bu resmi bir terimdir) başladığı anlamına gelir. Bu kabarcıklı yol boyunca kendilerine bağlı Listener’ları olan tüm öğeler, Event onlara ulaştığında ateşlenecektir. Buna Event Propagation (olay yayılımı) da denir.
Aşağıdaki resim, bağlantı düğümündeki bir dinleyici ile belge düğümündeki bir Listener arasındaki farkı açıklamaktadır. Örnekte, klasik bir onClick=”” niteliğine sahip tek bir bağlantı öğem var. Gerçekte, bu nitelik aynı zamanda bir Event Listener’dır. Bu belirli etiket üzerinde bir tıklama olayı (click event) bekler. Ayrıca, GTM’in kendi tıklama dinleyicisini de hazır hale getirdik. Gördüğünüz gibi, onClick dinleyicisi bağlantı düğümünün (Link Node) kendisine eklenmişken, Click Listener belge düğümüne eklenmiştir.
Diyelim ki kaynak kodu şuna benzeyen çok basit bir sayfanız var:
<html>
<head>
<title>My Page</title>
</head>
<body>
<!– Google Tag Manager Container here –>
<div id=“main”>
<a href=“http://www.google.com”>Google</a>
</div>
</body>
</html>
Şimdi GTM Container’a bir Link Click Listener (bağlantı tıklama dinleyicisi) eklersem, yukarıdaki kodda gördüğünüz tüm öğeler için üst düzey bir ebeveyn olan belge düğümüne eklenecektir.
Şimdi, birisi bağlantıya tıkladığında aşağıdakiler gerçekleşir:
- <a/> öğesinin kendisine bağlı herhangi bir listener (örn. onClick), event oluşumuna en yakın olduğu için önce ateşlenecektir.
- <div/> öğesine bağlı herhangi bir listener, event meydana geldiği öğenin bir üst öğesi olduğu için bir sonraki öğeyi ateşleyecektir.
- Ve event DOM ağacının tepesine kadar Bubles (kabarcıklar) oluşturup GTM’nin Link Click Listener’ın (bağlantı tıklama dinleyicisinin) beklediği belge düğümüne ulaşana kadar bu şekilde devam eder.
Mesele şu: Event’in dağın tepesine yaptığı kabarcıklı yolculuk sırasında herhangi bir noktada, örneğin çakışan bir komut dosyası tarafından süreci durdurulursa, event GTM’in dinleyicisine asla ulaşmayacaktır!
En yaygın suçlu, aşağıdaki uğursuz kod satırını içeren rakip bir jQuery dinleyicisidir:
return false;
Bu, Event Listener’ın ilerlemesini etkili bir şekilde durdurur ve eylemi “ilk başta yapmanız gereken şeyi yapmayın” türünde bir ifadeyle bağlantı öğesine döndürür.
Çok sık karşılaşılan bir durum da jQuery’yi bağlantılara sayfa içi kaydırma animasyonu (yani yumuşak kaydırma) yapmak için kullanmanızdır. Link Click Event’i ele geçiren, sayfanın doğru bölümüne geçişi canlandıran ve false döndüren bir dizi komut dosyası gördük; çünkü doğal olarak, bağlantının sizi sayfanın doğru bölümüne anında taşımak gibi varsayılan eylemini gerçekleştirmesini istemiyorlar.
Event Propagation Çözümü Nedir?
Bu konuda geliştiricilerinizle konuşmanız gerekecek. Onlara Event Propagation belge düğümüne kadar çalışmasını istediğinizi söyleyin. Bu genellikle şu şekilde yapılabilir.
return false;
ile
event.preventDefault();
Elbette, bunun çalışması için Click Event işleyici işlevine parametre olarak geçirmeniz gerekir (event içinde event.preventDefault();). Tarayıcılar arası endişeler de olabilir, bu nedenle herhangi bir değişiklik yapmadan önce biraz araştırma yapın.
.preventDefault() ayrıca Link Click Event varsayılan eylemini de engeller, ancak Event Propagation DOM ağacında devam etmesini durdurmaz. Kodu değiştirmek kodunuzun işlevselliğini bozabileceğinden, elbette bunu test etmeniz gerekecektir.
NOT! event.preventDefault(); veya return false; kullanırsanız Link Click Listener, Check Validation (doğrulamayı kontrol et) seçeneğinin işaretini kaldırmanız gerekir. Bu işaretli bırakılırsa, event belge düğümüne kadar baloncuk oluştursa bile listener ateşlenmez.
İlk yorum yapan siz olun