gtag.js ile Google Analytics'e veri gönderme

Bu sayfada, sitenizden Google Analytics'e veri göndermek için gtag.js komutlarını nasıl kullanacağınız açıklanmaktadır.

event komutuyla veri gönderme

Global snippet'i bir web sayfasına ekledikten sonra Google Analytics'e veri göndermek için event komutunu kullanın. Örneğin, bir kullanıcının Google hesabını kullanarak oturum açtığını belirtmek için aşağıdaki event komutunu kullanın:

gtag('event', 'login', {'method': 'Google'});

API referansında event komutu hakkında daha fazla bilgi edinin.

Verileri gruplara ve mülklere yönlendirme

Bir ölçüm bilgisi grubunu bir veya daha fazla Google Analytics mülk kimliğine, başka bir bilgi grubunu da diğer mülk kimliklerine gönderebilirsiniz. Mülkleri gruplar halinde düzenleyebilir ve verileri bunlara yönlendirebilirsiniz.

Örneğin aşağıdaki kod örneğinde, bir sign_in etkinliğinin iki Google Analytics mülkü içeren bir "ajans" grubuna nasıl yönlendirileceği gösterilmektedir.

// Configure a target
gtag('config', 'GA_MEASUREMENT_ID_1');
gtag('config', 'GA_MEASUREMENT_ID_2', { 'groups': 'agency' });
gtag('config', 'GA_MEASUREMENT_ID_3', { 'groups': 'agency' });

// Route this sign_in event to Analytics IDs in the 'agency' group:
gtag('event', 'sign_in', { 'send_to': 'agency' });

Verileri gruplama ve yönlendirme hakkında daha fazla bilgi edinin.

Bir etkinliğin ne zaman gönderildiğini öğrenme

Bazı durumlarda, bir etkinliğin Google Analytics'e başarıyla ne zaman gönderildiğini bilmeniz gerekir. Böylece hemen gerekli işlemleri yapabilirsiniz. Bu durum, kullanıcıyı geçerli sayfadan başka bir yere götürecek belirli bir etkileşimi kaydetmeniz gerektiğinde sık karşılaşılan bir durumdur. Birçok tarayıcı, bir sonraki sayfa yüklenmeye başlar başlamaz JavaScript'i yürütmeyi durdurur. Bu durumda gtag.js event komutlarınız hiçbir zaman çalışmayabilir.

Örneğin, kullanıcının bir formun gönder düğmesini tıkladığını kaydetmek için Google Analytics'e bir etkinlik göndermek isteyebilirsiniz. Çoğu durumda, gönder düğmesi tıklandığında, herhangi bir event komutu yürütülmeden önce sonraki sayfa yüklenmeye başlar.

Çözüm, bir sonraki sayfanın yüklenmesini durdurmak için etkinliğe müdahale etmektir. Böylece etkinliği Google Analytics'e gönderebilirsiniz. Etkinlik gönderildikten sonra formu programatik olarak gönderin.

Etkinlik geri çağırma işlevlerini uygulama

Bir etkinlik başarıyla gönderilir gönderilmez çağrılan bir etkinlik geri çağırma işlevini uygulayabilirsiniz.

Aşağıdaki örnekte, bir formun varsayılan gönderme işleminin nasıl iptal edileceği, Google Analytics'e nasıl etkinlik gönderileceği ve ardından etkinlik geri çağırma işlevini kullanarak formun nasıl yeniden gönderileceği gösterilmektedir:

// Get a reference to the form element, assuming
// it contains the ID attribute "signup-form".
var form = document.getElementById('signup-form');

// Add a listener for the "submit" event.
form.addEventListener('submit', function(event) {

  // Prevent the browser from submitting the form
  // and thus unloading the current page.
  event.preventDefault();

  // Send the event to Google Analytics and
  // resubmit the form once the hit is done.
  gtag('event', 'signup_form_complete', {
    'event_callback': function() {
      form.submit();
    }
  });
});

Zaman aşımlarını yönetme

Yukarıdaki örneğin bir dezavantajı vardır: gtag.js kitaplığı yüklenemezse etkinlik geri çağırma işlevi hiçbir zaman çalışmaz ve kullanıcılar formu gönderemez.

Etkinlik geri çağırma işlevinin içine kritik site işlevselliği koyduğunuzda, gtag.js kitaplığının yüklenemediği durumları ele almak için her zaman bir zaman aşımı işlevi kullanmanız gerekir.

Aşağıdaki örnek, yukarıdaki kodu bir zaman aşımı kullanacak şekilde geliştirmiştir. Kullanıcının gönder düğmesini tıklamasının üzerinden bir saniye geçerse ve etkinlik geri çağırma işlevi çalışmazsa form yine de yeniden gönderilir.

// Gets a reference to the form element, assuming
// it contains the ID attribute "signup-form".
var form = document.getElementById('signup-form');

// Adds a listener for the "submit" event.
form.addEventListener('submit', function(event) {

  // Prevents the browser from submitting the form
  // and thus unloading the current page.
  event.preventDefault();

  // Creates a timeout to call submitForm after one second.
  setTimeout(submitForm, 1000);

  // Monitors whether or not the form has been submitted.
  // This prevents the form from being submitted twice in cases
  // where the event callback function fires normally.
  var formSubmitted = false;

  function submitForm() {
    if (!formSubmitted) {
      formSubmitted = true;
      form.submit();
    }
  }

  // Sends the event to Google Analytics and
  // resubmits the form once the hit is done.
  gtag('event', 'signup_form_complete', {
    'event_callback': submitForm
  });
});

Sitenizin genelinde yukarıdaki kalıbı kullanıyorsanız, zaman aşımlarını işlemek için bir yardımcı program işlevi oluşturun.

Aşağıdaki yardımcı program işlevi, bir işlevi girdi olarak kabul eder ve yeni bir işlev döndürür. Döndürülen işlev zaman aşımı süresinden önce çağrılırsa (varsayılan zaman aşımı bir saniyedir) zaman aşımını temizler ve giriş işlevini çağırır. Döndürülen işlev zaman aşımı süresinden önce çağrılmazsa giriş işlevi yine de çağrılır.

function createFunctionWithTimeout(callback, opt_timeout) {
  var called = false;
  function fn() {
    if (!called) {
      called = true;
      callback();
    }
  }
  setTimeout(fn, opt_timeout || 1000);
  return fn;
}

Artık etkinliklerinizin gönderilemediği veya gtag.js kitaplığının hiç yüklenmediği durumlarda bile sitenizin beklendiği gibi çalışmasını sağlamak için tüm etkinlik geri çağırma işlevlerini bir zaman aşımı ile sarmalayabilirsiniz.

// Gets a reference to the form element, assuming
// it contains the ID attribute "signup-form".
var form = document.getElementById('signup-form');

// Adds a listener for the "submit" event.
form.addEventListener('submit', function(event) {

  // Prevents the browser from submitting the form
  // and thus unloading the current page.
  event.preventDefault();

  // Sends the event to Google Analytics and
  // resubmits the form once the hit is done.
  gtag('event', 'signup_form', { 'event_callback': {
    createFunctionWithTimeout(function() {
      form.submit();
    })
  }});
});

Farklı taşıma mekanizmaları belirtme

Varsayılan olarak gtag.js, isabetlerin en uygun şekilde gönderilmesi için HTTPS yöntemini ve aktarım mekanizmasını seçer. Üç seçenek mevcuttur:

  • "image" (Image nesnesi kullanılarak)
  • "xhr" (XMLHttpRequest nesnesi kullanılarak)
  • "işaretçi" (navigator.sendBeacon yöntemi kullanılarak)

İlk iki yöntem, önceki bölümde açıklanan sorunu paylaşır. Bu bölümde, sayfa yüklemesi kaldırılırsa isabetler gönderilmez. navigator.sendBeacon yöntemi, isabetleri bir isabet geri çağırması ayarlamak zorunda kalmadan web sunucusuna eşzamansız bir şekilde aktararak bu sorunu çözer.

Aşağıdaki kod, destekleyen tarayıcılar için taşıma mekanizmasını 'beacon' olarak ayarlar:

gtag('config', 'GA_MEASUREMENT_ID', { 'transport_type': 'beacon'});