Eğitim: Google Analytics

Bu eğitimde, uzantınızın kullanımını izlemek için Google Analytics'in nasıl kullanılacağı gösterilmektedir. Şu durumda: bir platform uygulaması geliştiriyorsanız, uygulamalar için farklı kısıtlamalar bulunduğundan Uygulamalar için Analytics'e uzantılar.

Şartlar

Bu eğitim, Google Chrome için yazma uzantıları konusunda bilgi sahibi olmanızı gerektirir. Şu durumda: Nasıl uzantı yazılacağı hakkında bilgi edinmek isterseniz lütfen Başlangıç eğitimini okuyun.

Ayrıca, uzantınızı izlemek için bir Google Analytics hesabınızın oluşturulması gerekir. siz de hesap oluşturduktan sonra, web sitesinin URL'si alanındaki herhangi bir değeri kullanabilirsiniz. olması gerekir.

Chrome uzantısı bilgilerinin doldurulduğu analiz kurulumu

İzleme kodunu yükleme

Standart Google Analytics izleme kodu snippet'i, ga.js adlı dosyayı bir SSL'den getirir sayfa https:// protokolü kullanılarak yüklendiyse korunan URL'dir. Chrome uzantıları ve uygulamalar yalnızca ga.js ürününün SSL korumalı sürümünü kullanabilir. ga.js, güvenli değil üzerinden yükleniyor Chrome'un varsayılan İçerik Güvenliği Politikası, HTTP'ye izin vermez. Bunun yanı sıra Chrome'un Uzantılar chrome-extension:// şeması altında barındırılır; ga.js kodunu doğrudan https://ssl.google-analytics.com/ga.js kaynağından almak için kullanılan normal izleme snippet'i konumuna yönlendirilirsiniz.

Aşağıda, eşzamansız izleme API'si için değiştirilmiş bir snippet bulunmaktadır (değiştirilen satır kalın harflerle yazılmıştır):

(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 uzantınızın varsayılan içerik güvenliği politikası. manifest.json hesabınızdaki 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 ağ üzerinden yükleyen bir pop-up sayfayı (popup.html) görebilirsiniz JavaScript dosyası (popup.js) içerir ve tek bir sayfa görüntülemeyi izler:

<!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'inizle değiştirilmesi gerektiğini unutmayın. hesap numarası.

Sayfa görüntülemelerini izleme

_gaq.push(['_trackPageview']); kodu, tek bir sayfa görüntülemeyi izler. Bu kod şuralarda kullanılabilir: Uzantınızdaki herhangi bir sayfa. Bir arka plan sayfasına yerleştirildiğinde, her defasında bir kez bir görüntüleme kaydeder oturum açın. Bir pop-up'a yerleştirildiğinde, pop-up her görüntülendiğinde bir görünüm kaydeder. açıldı.

Uzantınızdaki her bir sayfanın sayfa görüntüleme verilerine bakarak kaç tane sayfa görüntülemesi Kullanıcılarınızın tarayıcı oturumu başına uzantınızla etkileşim kurma sayısı:

Bir sitenin en çok görüntülenen içeriğinin Analytics görünümü

Analiz isteklerini izleme

Uzantınızdan gelen izleme verilerinin Google Analytics'e gönderildiğinden emin olmak için Geliştirici Araçları penceresindeki uzantınızın sayfaları (daha fazla bilgi için hata ayıklama eğiticisine bakın) ) ekleyin. Aşağıdaki şekilde gösterildiği gibi, __utm.gif'i tıklayın.

__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 hangi bölümleriyle etkileşime girdiğini belirleyebilirsiniz en önemlisi. Örneğin, üç düğmeniz varsa kullanıcıların tıklayabilir:

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

Google Analytics'e tıklama etkinlikleri gönderen bir işlev yazın:

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

Ve her düğme tıklaması için bir etkinlik işleyici olarak kullanabilirsiniz:

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ında, etkinliğin kaç kez gerçekleştiğiyle ilgili her düğme tıklanır:

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

Bu yaklaşımı kullanarak uzantınızın hangi kısımlarının az veya fazla kullanıldığını görebilirsiniz. Bu , kullanıcı arayüzünün yeniden tasarımları veya uygulanacak ek işlevlerle ilgili kararlarınızda yol gösterici olabilir.

Etkinlik izlemeyi kullanma hakkında daha fazla bilgi için Google Analytics geliştiricisine dokümanlarına göz atın.

Örnek kod

Bu teknikleri kullanan bir örnek uzantı örnek deposunda bulunmaktadır.