Google Tag Manager : Click & Form Tetikleyiciler

Sena Zincircioğlu
Huawei Developers - Türkiye
6 min readJun 21, 2022
Google Tag Manager

Herkese Merhabalar,

Google Tag Manager bizlere websitemizdeki bütün kullanıcı etkileşimlerini yani eventleri takip edebilme imkanı sunar. Bu eventlerden bazıları, belirli bir koşulun yerine getirilmesine veya diğer eventlerin tamamlanmasına bağlı olarak tetikleniyor olabilir. GTM’nin Click & Form Tetikleyicilerini kullanırken bu koşulları ve diğer etiketler için bekleme sürelerini belirleyebiliyoruz.

Giriş

Bu yazımızda Click & Form Tetikleyicilerinden bahsedeceğiz; Önce Click ve Form Tetitkleyicilerini ayrı ayrı inceleyeceğiz, daha sonra aralarındaki benzerlik ve farklılıklardan bahsedeceğiz ve son olarak Just Links Trigger veya Form Trigger yöntemleri için kullanılan “Check Validation” ve “Wait For Tag” seçeneklerine bakacağız.

Click Triggers

Google Etiket Yöneticisi (GTM), bir web sayfasının herhangi bir öğesine yapılan tıklamaları izlemenize olanak tanır. Click Triggers, bu tıklamaları izlemenizi sağlayan bir tetikleme yöntemidir. Google Analytics ile GTM, değeri bilinmeyen bir analitik ikili oluşturmak için birleşir ve çok fazla teknik bilgi olmadan, bir kullanıcının bir web sitesinde yaptığı neredeyse tüm tıklamaları izlemek için ikisini de kullanmak mümkündür.

Click Triggers şunları sağlar:

  • Neyin tıklandığını, nereye tıklandığını ve tıklamanın ne zaman gerçekleştiğini izleme.
  • Belirli linkler, butonlar, resimler üzerindeki herhangi bir tıklamayı izleme.
  • GTM ile web sitenizdeki herhangi bir linke yapılan tıklamayı, hatta broken linklere yapılan tıklamaları bile takip etme.
  • Belirli bir linke yapılan tıklamaları veya harici bağlantılara yapılan tıklamaları izleme.

Just Links

Web sayfanızdaki her tıklamayı izlemek istiyorsanız, Click /All Element’i seçebilirsiniz. Ancak yalnızca bağlantı tıklamalarını izlemeyi tercih ederseniz, GTM’den Just Links’i seçmeniz gerekir.

Click Trigger Seçenekleri

Ancak Just Links tetikleyicisi yalnızca bir bağlantı (<a/>) düğümüne yayılan tıklamaları dinler. Bu, bir DIV’deki bir BUTTON’da bir SPAN’a tıklayabileceğiniz anlamına gelir, ancak Ancestral ağaç yapısının yukarısında bir yerde bir link wrapper yapısı olduğu ve event yayıldığı sürece, GTM eventi bir link tıklaması olarak kaydedecektir.

Form Triggers

Web sitenizde kullanıcı tarafından doldurulması gereken bir form varsa ve bu formun kullanıcı tarafından gönderilip gönderilmediğini takip etmek istiyorsanız Form Triggers kullanabilirsiniz. GTM’de, Form Triggersı kullanmak için tetikleme yöntemi olarak “Form Submission” ı seçin.

Form Submission Tetikleyici Yapılandırma Penceresi

Form Triggers, bir submit() eventinin gönderilmesini bekler. Bu, sitenizdeki bazı komut dosyaları form eventini ele geçirir ve bazı özel Ajax fonksiyonlarıyla devam ederse, GTM dinleyicisinin onu algılayamayacağı anlamına gelir.

Bir Form Submission tetikleyicisi tetiklendiğinde, aşağıdaki yerleşik değişkenler oluşturulur:

  • Form Element: Tıklanan form öğesi.
  • Form Classes: Formun class özelliğinde bulunan değerlerin bir dizisi.
  • Form ID: Form öğesinin kimlik özelliği.
  • Form Target : Form öğesinin hedef özelliği.
  • Form URL: Varsa, form öğesinin href öznitelik değeri.
  • Form Text: Formun içinde görünen metin.

Just Links ve Form Triggers Arasındaki Benzerlikler ve Farklılıklar

Click ve Form tetikleyicileri hakkında konuştuk, şimdi aralarındaki farkların ve benzerliklerin neler olduğunu göreceğiz:

  • Just Links tetikleyicileri, bir bağlantının tıklanmasını gerektirir ve Form tetikleyicileri, geçerli bir tarayıcı Formu gönderme eventi gerektirir.
  • Her ikisinin de çalışması için GTM dinleyicilerine eventin yayılımı gerçekleşir(propagation).
  • Just Links veya Form tetikleyicisi oluşturmaya çalıştığınızda, iki işaretlenebilir seçenek görebilirsiniz: Check Validation ve Wait For Tags.
Wait For Tags and Check Validation Seçenekleri

Check Validation

Check Validation işaretlendiğinde, GTM dinleyicilerine geçerli bir eventin yayılmasını gerekli kılar. Hem Just Links hem de Form için bu durum, GTM’nin processorlere ulaşmadan önce “event” nesnesindeki diğer komut dosyaları tarafından çağrılan event.preventDefault() olmadığı anlamına gelir.

Check Validation

Başka bir deyişle, “Check Validation” seçeneği, triggerı yalnızca Form başarıyla gönderilirse tetiklenecek şekilde ayarlar. Bu seçenek seçilmezse, bir kullanıcı formu göndermeye çalıştığında ne olursa olsun tetikleyici etkinleşir. Bu, kullanıcının boş bir form da gönderebileceği anlamına gelir. Bu nedenle, formun doğrulunu “Check Validation” seçeneğini etkinleştirerek kontrol etmemiz gerekiyor.

Normalde GTM dinleyicileri eventleri ancak event.preventDefault() metodu ile filtrelendiğinde dinler. Ancak çoğu durumda bu metod eventlerin geçersiz varsayılan eylemlerini engelleyemeyebilir, yani GTM dinleyicileri, Check Validation KAPALI ise eventi her türlü dinlemeye devam edecektir. Bu durum genellikle dinleyicileri meşgul duruma düşüreceğinden, diğer eventlerin dinleyiciler üzerinde yayılımının da durdurulduğunu görebilirsiniz, böyle bir durumda bir süre sonra GTM dinleyicilerinin herhangi bir şeyi algılaması zorlaşır. Ama eğer Check Validation açıksa, geçerliliği olmayan bir event, uygun bir preventDefault() filtresinden geçse bile, GTM’nin işleyicilerini tetikleyemeyecektir. Dinleyici yalnızca, Check Validation şartını sağlayan bir event nesnesi document node’a yayılırsa tetiklenir. Yani bu durum göze alındığında Check Validation seçeneğini etkinleştirerek, GTM dinleyicilerinin yükünü azalttığımızı söyleyebiliriz.

Wait For Tags

Wait For Tags seçeneği, Form Submission/Just Links Triggerlarının tetiklenmesini, belirnen tüm diğer etiketler tetiklenene kadar veya belirtilen gecikme süresi geçene kadar geciktirmenize olanak tanır. Belirlenen etiketlerin tetiklenmesi veya belirlenen sürenin geçmesi olaylarından birisi sağlandığı anda Triggerlar tetiklenecektir. Seçilmezse, yavaş etiketler, form gönderimi sonraki sayfanın yüklenmesine neden olmadan tetiklenmeyebilir.

Wait For Tags

Not:

“Wait For Tags”, link işlemenin tamamen özelleştirilmiş olduğu tek sayfalık uygulamalarda çok istilacı olabilir. Tek sayfalı uygulamalarda “internal” bir link asla başka bir sayfaya yönlendirmeye yol açmamalıdır. Ancak GTM bunu bilmiyor. Eventi duraklatıp ardından varsayılan eyleme geçerek, “Wait For Tags”in, linkleri kullanarak olmaması gerektiği halde yeniden mevcut sayfanın yönlendirilmesine neden olması mümkündür. Bu nedenle, Wait For Tags’i kullanırken her zaman çok dikkatli olmalısınız . Sadece baştan sona test ettiğiniz sayfalarda etkinleştirin, böylece sitenin varsayılan işlevselliğini etkilemiş olmazsınız.

Wait For Tags ve Check Validation Seçenekleri İçin Koşul Belirleme

Wait For Tags ve Check Validation seçeneklerinden birini işaretlediğinizde, Tetikleyici ayarlarında üstünde “Enable When” yazan ek bir adım göreceksiniz:

Enable When Seçeneği

Enable When : Bu adımın amacı, tetikleyicinin belirtilen eventi aktif olarak dinlediği zaman için bir koşul belirleyebilmenizdir.

Burada kullanacağınız en yaygın koşul türleri sayfa koşullarıdır, çünkü Form Gönderme tetikleyicisinin yalnızca Form içeren sayfalardaki gönderme eventlerini dinlediğini belirtmek isteyebilirsiniz.

Wait For Tags etkinleştirildiğinde, bu bir Just Links tetikleyicisiyse, yönlendirme (veya eylem ne olursa olsun), tüm bağımlı etiketlerin yürütmeyi tamamlaması için yeterince uzun süre programlı olarak durdurulur ve ardından eylem devam ettirilir. İşte bu nedenle ikincil filtreyi (Enable When) belirtmeniz gerekir. Eventin varsayılan eylemini durduran GTM olduğundan, dinleyicilere yayılma yolunda bir şeyi mahvetmesi olasıdır. Bu durumu yine Enable When kullanarak engelleyebiliriz.

Özet

  • Click trigger, web sitenizdeki bütün tıklanabilir öğelerin tıklama eylemini takip edebileceğiniz bir tetikleyici metodur.
  • Just Links, web sitenizdeki sadece linklerin tıklanma eylemini takip etmenizi sağlayan bir çeşit Click Trigger metodur.
  • Form Triggers, web sitenizdeki formları kullanıcının doldurduktan sonra gönderip göndermediğini takip etmek için kullanabilirsiniz.
  • Form ve Click Tetikleyicileri arasında bazı benzerlikler ve farklılıklar vardır. En yaygın ortak özellikleri ikisinin de “Wait For Tags” ve “Check Validation” özelliklerini kullanabilmesidir.
  • “Enable When” seçeneği , Wait For Tags ve Check Validation özellikleri için koşul belirlemeye yarar.

--

--