Öfke Tıklamalarını Anında Tespit Edin

Hotjar’da bir web sitesinin oturumlarını izlerken, bir butonun bozuk olduğunu farkettim, kullanıcılar bu butona defalarca tıkladıktan sonra hiçbir yanıt alamadıkları için web sitesinden hemen ayrılıyorlardı. Bu durum, özellikle gelen kullanıcıların ücretli reklam ağlarından geldiği düşünüldüğünde oldukça can sıkıcı hale geliyor.

Bu gibi Öfke Tıklamaları, kullanıcıların bir butona hızla ve ardışık şekilde tıklamasıyla ortaya çıkıyor. Genellikle bir alanın çalışmadığını düşünen kullanıcılar, butona tekrar tekrar tıklamaya devam ediyorlar ancak hiçbir tepki alamadıklarında, genellikle sinirlenip web sitesini terk ediyorlar. Bu durum, web sitesinin dönüşüm oranını ve reklam bütçesini ciddi anlamda olumsuz yönde etkileyebilir.

Bunun yanı sıra, JavaScript hataları da web sitesindeki sorunlara neden olabilir. Örneğin, bir butonun işlevini yerine getirememesi veya bir formun doğru şekilde gönderilememesi gibi hatalar, kullanıcıların beklentilerini karşılamamasına ve web sitesinden ayrılmalarına sebep olabilir.

Bu tür Öfke Tıklamaları ve JavaScript hatalarını mümkün olduğunca erken tespit etmek ve düzeltmek için Tag Manager ve GA4 ile bir kurulum gerçekleştireceğiz. Kullanıcının öfke aksiyonlarını Tag Manager ile tespit ederek GA4 hesabımızda raporlayacağız.

Öfke Tıklama Tespiti

Bir ziyaretçi web sitenizdeki bir öğeyi birden çok kez hızlı bir şekilde tıkladığında tetiklenirler. Çoğu durumda öfke tıklamaları, kullanıcıların web sitenizde bir hata ile karşılaştığı sinyalini verir, bu nedenle web sitenize debug kontrolü yapmanız gerekebilir.

Öfke tıklamalarını yakalamak için şu adımları izleyin:

• Tag Manager hesabınızdan yeni bir HTML Etiketi oluşturun ve aşağıdaki kodu tüm sayfalarda çalışacak şekilde yapılandırın.
  • Örneğin, kodda belirtilen sınırlarla, bir kullanıcı aynı öğeyi 1000 milisaniye (yaklaşık 1 saniye) içinde üç kez tıklarsa, ‘rageClick’ olayı dataLayer’a eklenir.

<script>
  (function() {
    "use strict";
    var getSelectorFromTarget = function(target) {
      var className = target.className !== "" ? "." + target.className : "";
      var targetId = target.id !== "" ? "#" + target.id : "";
      return [target.nodeName, className, targetId].join(" ")
    };
    
    var getTextFromTarget = function(target) {
      return target.innerText || target.textContent || "";
    };

    var detectRageClicks = function(subscribe, _a) {
      var interval = _a.interval, limit = _a.limit;
      var count = 1;
      var countClear = setInterval((function() {count = 1}), interval);
      var listener = function(event) {
        if (count === limit) {
          subscribe({
            'clickClass': getSelectorFromTarget(event.target),
            'clickText': getTextFromTarget(event.target),
            'clickURL': event.target.href || "",
            'pageURL': window.location.href,
            'pageTitle': document.title,
            'jsPath': event.path || ""
          }, (function() {clearInterval(countClear);document.removeEventListener("click", listener)}))
        }
        count++
      };
      document.addEventListener("click", listener);
    };

    detectRageClicks(function (data, unsubscribe) {
      dataLayer.push({
        'event': 'rageClick',
        'data': data
      });
      // unsubscribe(); // İlk tetiklenmeden sonra çalışmayı durdurmak isterseniz yorum satırını kaldırın.
    }, {
      interval: 1000, // Sayacı sıfırlamak için milisaniye sayısı
      limit: 3, // Yukarıdaki işlevi tetiklemek için tıklama sayısı
    });
  })();
</script>

Etiketi yayınlayalım ve Önizleme modunda herhangi bir alana ard arda tıklayarak bir test işlemi yapalım.

Evet, öfke tıklamaları gerçekleştirdiğimizde yukarıdaki gibi bir dataLayer çalıştı. Artık bu değerleri GA4 hesabımıza iletebiliriz.

• DataLayer içerisindeki değerleri bir değişkene tanımlayalım.
  • Değişkenler > Yeni > Veri Katmanı Değişkeni adımına ilerleyin.
  • dataLayer içerisinden almak istediğiniz her değer için ayrı bir değişken oluşturun. Örneğin clickText alanı için “data.clickText” adında veri katmanı değişkeni oluşturabilirsiniz.

• Son olarak Öfke Tıkmaları gerçekleştiğinde GA4 hesabımıza verileri aktarabileceğimiz bir etiket oluşturalım.
  • Yeni Etiket > GA4 Etkinliği adımına ilerleyin
  • Parametre kısmına oluşturduğunuz değişken isimleri gelecek şekilde etiketinizi aşağıdaki gibi yapılandırın.
  • Tetikleyi için > Event > “rageClick” şeklinde yapılandırabilirsiniz.

Artık sitenizde kullanıcıların hata ile karşılaştığı alanları hızlıca tespit edebilir, web sitenizin performansını sürekli olarak izleyebilir ve geliştirebilirsiniz. Kullanıcı deneyimini optimize etmek, dönüşüm oranınızı artırmak ve reklam bütçesini faydalı bir şekilde kullanmaj için Tag Manager ve GA4’ü etkili bir şekilde kullanabilirsiniz.