Eğitim: Google Analytics

Bu eğitim, uzantınızın kullanımını izlemek için Google Analytics'in nasıl kullanılacağını gösterir. Platform uygulaması geliştiriyorsanız uygulamaların uzantılara göre farklı kısıtlamaları olduğundan Uygulamalar için Analytics bölümünü inceleyin.

Koşullar

Bu eğitim, Google Chrome için uzantı yazma konusunda biraz bilgi sahibi olmanızı gerektirir. Uzantı yazma konusunda bilgiye ihtiyacınız varsa lütfen Başlangıç eğitimini okuyun.

Uzantınızı izlemek için ayarlanmış bir Google Analytics hesabınızın da olması gerekir. Hesabınızı oluştururken, uzantınızın kendi URL'si olmayacağından Web sitesinin URL alanındaki herhangi bir değeri kullanabilirsiniz.

Chrome uzantısıyla ilgili bilgiler içeren Analytics kurulumu

İzleme kodunu yükleme

Geçerli sayfa https:// protokolü kullanılarak yüklendiyse standart Google Analytics izleme kodu snippet'i, SSL korumalı bir URL'den ga.js adlı bir dosya getirir. Chrome uzantıları ve uygulamaları yalnızca SSL korumalı ga.js sürümünü kullanabilir. Chrome'un varsayılan İçerik Güvenliği Politikası'na göre, güvenli olmayan HTTP üzerinden ga.js yüklenmesine izin verilmez. Bu durum ve Chrome uzantılarının chrome-extension:// şeması altında barındırılması, ga.js alanını varsayılan konum yerine doğrudan https://ssl.google-analytics.com/ga.js öğesinden çekmek için her zamanki izleme snippet'inde küçük bir değişiklik yapılmasını gerektirir.

Aşağıda, eşzamansız izleme API'si için değiştirilmiş bir snippet verilmiştir (değiştirilen satır kalın harflerle gösterilmiştir):

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = 'https://ssl.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

Ayrıca, varsayılan içerik güvenliği politikasını gevşeterek uzantınızın kaynağı yüklemek için erişim izni bulunduğundan da emin olmanız gerekir. manifest.json etiketinizdeki politika tanımı aşağıdaki gibi görünebilir:

{
  ...,
  "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'",
  ...
}

Aşağıda, eşzamansız izleme kodunu harici bir JavaScript dosyası (popup.js) aracılığıyla yükleyen ve tek bir sayfa görüntülemesini izleyen bir pop-up sayfası (popup.html) bulunmaktadır:

<!DOCTYPE html>
<html>
 <head>
   ...
  <script src="popup.js"></script>
 </head>
 <body>
   ...
 </body>
</html>

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
_gaq.push(['_trackPageview']);

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = 'https://ssl.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

UA-XXXXXXXX-X dizesinin kendi Google Analytics hesap numaranızla değiştirilmesi gerektiğini unutmayın.

Sayfa görüntülemelerini izleme

_gaq.push(['_trackPageview']); kodu, tek bir sayfa görüntülemeyi izler. Bu kod, uzantınızın herhangi bir sayfasında kullanılabilir. Bir arka plan sayfasına yerleştirildiğinde, tarayıcı oturumu başına bir görüntüleme kaydettirir. Bir pop-up'a yerleştirildiğinde, pop-up her açıldığında bir görüntüleme kaydedilir.

Uzantınızdaki her sayfa için sayfa görüntüleme verilerine bakarak, kullanıcılarınızın tarayıcı oturumu başına uzantınızla kaç kez etkileşimde bulunduğuna dair bir fikir edinebilirsiniz:

Bir sitenin en popüler içeriğinin Analytics görünümü

Analiz isteklerini izleme

Uzantınızdan izleme verilerinin Google Analytics'e gönderildiğinden emin olmak için, Geliştirici Araçları penceresinde uzantınızın sayfalarını inceleyebilirsiniz (daha fazla bilgi için hata ayıklama eğiticisine bakın). Aşağıdaki şekilde gösterildiği gibi, her şey doğru şekilde ayarlanmışsa __utm.gif adlı bir dosya için istekleri görürsünüz.

__utm.gif isteğini gösteren Geliştirici Araçları penceresi

İzleme etkinlikleri

Etkinlik izlemeyi yapılandırarak, kullanıcılarınızın uzantınızın en çok hangi bölümleriyle etkileşimde bulunduğunu belirleyebilirsiniz. Örneğin, kullanıcıların tıklayabileceği üç düğmeniz varsa:

<button id='button1'>Button 1</button>
<button id='button2'>Button 2</button>
<button id='button3'>Button 3</button>

Tıklama etkinliklerini Google Analytics'e gönderen bir fonksiyon yazın:

function trackButton(e) {
  _gaq.push(['_trackEvent', e.target.id, 'clicked']);
};

Ve her düğmenin tıklanması için bunu bir etkinlik işleyici olarak kullanın:

var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', trackButtonClick);
}

Google Analytics etkinlik izlemeye genel bakış sayfası, her bir düğmenin kaç kez tıklandığıyla ilgili metrikler sağlar:

Bir sitenin etkinlik izleme verilerinin Analytics görünümü

Bu yaklaşımı kullanarak uzantınızın hangi bölümlerinin gereğinden az veya fazla kullanıldığını görebilirsiniz. Bu bilgiler, kullanıcı arayüzünün yeniden tasarımları veya uygulanacak ek işlevlerle ilgili kararların yönlendirilmesine yardımcı olabilir.

Etkinlik izlemeyi kullanma hakkında daha fazla bilgi için Google Analytics geliştirici belgelerini inceleyin.

Örnek kod

Bu teknikleri kullanan örnek bir uzantıya samples repository ekleyebilirsiniz.