Google Analytics'e Veri Gönderme

JavaScript ölçüm snippet'inin son satırı, Google Analytics'e bir sayfa görüntüleme göndermek için ga() komut sırasına bir send komutu ekler:

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');

Gönderme işlemini yapan nesne, önceki kod satırında oluşturulmak üzere planlanmış izleyicidir. Gönderilen veriler ise bu izleyicide depolanan verilerdir.

Bu kılavuzda, Google Analytics'e veri göndermenin çeşitli yolları ve hangi verilerin gönderileceğini nasıl kontrol edeceğiniz açıklanmaktadır.

İsabetler, isabet türleri ve Measurement Protocol

Bir izleyici Google Analytics'e veri gönderdiğinde, buna isabet gönderme adı verilir ve her isabetin bir isabet türü olmalıdır. Google Analytics etiketi pageview türünde bir isabet gönderir. Diğer isabet türleri arasında screenview, event, transaction, item, social, exception ve timing yer alır. Bu kılavuzda, tüm isabet türlerinde ortak olan kavram ve yöntemler özetlenmektedir. Her isabet türü için ayrı ayrı kılavuzlar, sol taraftaki gezinme menüsündeki Yaygın kullanıcı etkileşimlerini ölçme bölümünde bulunabilir.

İsabet, sorgu dizesi olarak kodlanan ve Measurement Protocol'a gönderilen alan ve değer çiftlerinden oluşan bir HTTP isteğidir.

analytics.js kullanan bir sayfayı yüklerken tarayıcınızın geliştirici araçları açıksa, gönderilen isabetleri ağ sekmesinde görebilirsiniz. google-analytics.com/collect hedefine gönderilen istekleri arayın.

Hangi veriler gönderilir?

Measurement Protocol'e isabet gönderirken izleyiciler, şu anda depolanan ve geçerli Measurement Protocol parametreleri olan tüm alanları gönderir. Örneğin, title ve location gibi alanlar gönderilir ancak cookieDomain ve hitCallback gönderilmez.

Bazı durumlarda, geçerli isabet için Google Analytics'e alanlar göndermek ancak daha sonraki isabetler için göndermemek istersiniz. eventAction ve eventLabel alanlarının yalnızca mevcut isabetle alakalı olduğu bir etkinlik isabeti buna örnek olarak gösterilebilir.

Yalnızca geçerli isabet içeren alanları göndermek için bunları send yöntemine bağımsız değişken olarak aktarabilirsiniz. Sonraki tüm isabetlerle birlikte alan verilerinin gönderilmesini sağlamak için set yöntemini kullanarak izleyiciyi güncellemeniz gerekir.

Gönderme yöntemi

Bir izleyicinin send yöntemi, doğrudan izleyici nesnesinin kendisinde veya ga() komut sırasına bir send komutu eklenerek çağrılabilir. Çoğu zaman izleyici nesnesine referansınız olmadığından, izleyici verilerini Google Analytics'e göndermek için ga() komut sırasının kullanılması önerilir.

ga() komut sırasını kullanma

ga() komut sırasına bir send komutu eklemek için kullanılan imza aşağıdaki gibidir:

ga('[trackerName.]send', [hitType], [...fields], [fieldsObject]);

Yukarıda belirtildiği gibi, hitType, ...fields ve fieldsObject parametrelerinde aracılığıyla belirtilen değerler yalnızca geçerli isabet için gönderilir. Bunlar, izleyici nesnesinde depolanmaz veya sonraki isabetlerle birlikte gönderilmez.

send komutuyla iletilen alanlardan herhangi biri izleyici nesnesinde zaten ayarlanmışsa izleyici nesnesinde depolanan değerler yerine komutta iletilen değerler kullanılır.

send komutuna yapılan çağrılar bir hitType belirtmelidir ve belirtilen türe bağlı olarak başka parametreler de gerekli olabilir. Daha fazla bilgi edinmek için sol taraftaki gezinme menüsünde yer alan yaygın kullanıcı etkileşimlerini ölçme konulu bağımsız rehberlere bakın.

Tüm isabet türlerinde işe yarayan send komutunu kullanmanın en basit yolu, tüm alanları fieldsObject parametresini kullanarak geçirmektir. Örneğin:

ga('send', {
  hitType: 'event',
  eventCategory: 'Video',
  eventAction: 'play',
  eventLabel: 'cats.mp4'
});

Kolaylık sağlaması açısından, belirli isabet türleri, yaygın olarak kullanılan alanların doğrudan send komutuna bağımsız değişken olarak iletilmesine izin verir. Örneğin, "etkinlik" isabet türü için yukarıdaki send komutu şu şekilde yeniden yazılabilir:

ga('send', 'event', 'Video', 'play', 'cats.mp4');

Çeşitli isabet türlerinin bağımsız değişkeni olarak iletilebilecek alanların tam listesi için gönderme yöntemi referansının "parametreler" bölümüne bakın.

Adlandırılmış bir izleyiciyi kullanma

Varsayılan izleyici yerine adlandırılmış bir izleyici kullanıyorsanız izleyicinin adını komut dizesinde geçirebilirsiniz.

"myTracker" adlı izleyicide aşağıdaki send komutu çağrılacaktır:

ga('myTracker.send', 'event', 'Video', 'play', 'cats.mp4');

Takip cihazı üzerinde

Takip nesnesine referansınız varsa doğrudan bu izleyicinin send yöntemini çağırabilirsiniz:

ga(function(tracker) {
  tracker.send('event', 'Video', 'play', 'cats.mp4');
});

İsabetin ne zaman gönderildiğini öğrenme

Bazı durumlarda, Google Analytics'e bir isabetin ne zaman gönderildiğini bilmeniz gerekir. Böylece, hemen işlem 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ı, sayfa yüklenmeye başlar başlamaz JavaScript'i yürütmeyi durdurur. Bu nedenle, isabet göndermek için analytics.js komutlarınız hiçbir zaman çalışmayabilir.

Bu duruma örnek olarak, kullanıcının bir formun gönder düğmesini tıkladığını kaydetmek için Google Analytics'e etkinlik göndermek istediğinizde verilebilir. Çoğu durumda, gönder düğmesi tıklandığında sonraki sayfa hemen yüklenmeye başlar ve ga('send', ...) komutları çalışmaz.

Bu sorunun çözümü, sayfanın yüklenmesini durdurmak için etkinliğe müdahale etmektir. Daha sonra, isabetinizi her zamanki gibi Google Analytics'e gönderebilir ve isabetin gönderilmesi tamamlandıktan sonra formu programlı bir şekilde yeniden gönderebilirsiniz.

hitCallback

İsabet gönderimi tamamlandığında bildirim almak için hitCallback alanını ayarlarsınız. hitCallback, isabet başarıyla gönderilir gönderilmez çağrılan bir işlevdir.

Aşağıdaki örnekte, bir formun varsayılan gönderme işlemini nasıl iptal edeceğiniz, Google Analytics'e nasıl isabet göndereceğiniz ve ardından hitCallback işlevini kullanarak formu nasıl yeniden göndereceğiniz gösterilmektedir:

// 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.
  ga('send', 'event', 'Signup Form', 'submit', {
    hitCallback: function() {
      form.submit();
    }
  });
});

Zaman aşımlarını işleme

Yukarıdaki örnek gayet mantıklı, ancak ciddi bir sorunu var. Herhangi bir nedenle analytics.js kitaplığı yüklenemezse hitCallback işlevi hiçbir zaman çalışmaz. Ayrıca hitCallback işlevi hiç çalışmazsa kullanıcılar hiçbir zaman formu gönderemez.

hitCallback işlevine kritik site işlevselliği koyduğunuzda analytics.js kitaplığının yüklenemediği durumları ele almak için her zaman bir zaman aşımı işlevi kullanmanız gerekir.

Sıradaki örnekte, yukarıdaki kod zaman aşımı kullanılacak şekilde güncellenir. Kullanıcı gönder düğmesini tıklamasından sonra bir saniye geçerse ve hitCallback ç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);

  // Keeps track of whether or not the form has been submitted.
  // This prevents the form from being submitted twice in cases
  // where `hitCallback` 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.
  ga('send', 'event', 'Signup Form', 'submit', {
    hitCallback: submitForm
  });
});

Yukarıdaki kalıbı sitenizdeki birçok yerde kullanıyorsanız, zaman aşımlarını ele alacak bir yardımcı program işlevi oluşturmak muhtemelen daha kolay olur.

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;
}

İsabetlerinizin gönderilemediği veya analytics.js kitaplığının hiç yüklenmediği durumlarda sitenizin beklendiği gibi çalışmasını sağlamak için artık tüm hitCallback işlevlerini bir zaman aşımı ile kolayca 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.
  ga('send', 'event', 'Signup Form', 'submit', {
    hitCallback: createFunctionWithTimeout(function() {
      form.submit();
    })
  });
});

Farklı taşıma mekanizmaları belirtme

Varsayılan olarak analytics.js, isabetlerin en iyi şekilde gönderileceği HTTP yöntemini ve taşıma mekanizmasını seçer. Üç seçenek, 'image' (Image nesnesi kullanarak), 'xhr' (XMLHttpRequest nesnesi kullanarak) veya yeni navigator.sendBeacon yöntemini kullanan 'beacon' şeklindedir.

İlk iki yöntem, önceki bölümde açıklanan sorunu paylaşır (bu bölümde sayfa kaldırılırsa isabetler genellikle gönderilmez). Buna karşın navigator.sendBeacon yöntemi, bu sorunu çözmek için oluşturulan yeni bir HTML özelliğidir.

Kullanıcınızın tarayıcısı navigator.sendBeacon özelliğini destekliyorsa, transport mekanizması olarak 'beacon' öğesini belirtebilirsiniz. Böylece, isabet geri çağırma işlevi ayarlama konusunda endişelenmenize gerek kalmaz.

Aşağıdaki kod, taşıma mekanizmasını, destekleyen tarayıcılarda 'beacon' değerine ayarlar.

ga('create', 'UA-XXXXX-Y', 'auto');

// Updates the tracker to use `navigator.sendBeacon` if available.
ga('set', 'transport', 'beacon');

Sonraki adımlar

Belirli kullanıcı etkileşimi türlerini ölçmek bazen karmaşık uygulamalar gerektirebilir. Ancak, birçok durumda bu uygulamalar hâlihazırda geliştirilmiş ve analytics.js eklentileri olarak kullanıma sunulmuştur. Bir sonraki kılavuzda, ga() komut sırası ile analytics.js eklentilerinin nasıl kullanılacağı açıklanmaktadır.