Czas działań użytkownika – śledzenie witryny (ga.js)

Ten dokument zawiera kompleksowy przewodnik po korzystaniu z metody _trackTiming.

Wstęp

Badania wykazały, że skrócenie czasu wczytywania strony poprawia ogólne wrażenia użytkownika. Google Analytics udostępnia wiele zaawansowanych raportów, które automatycznie śledzą czas wczytywania strony. Co jednak, jeśli chcesz śledzić czas wczytywania określonego zasobu?

Na przykład czy wczytywanie popularnej biblioteki JavaScript trwa zbyt długo, co pogarsza wrażenia niektórych użytkowników?

Czas użytkownika pozwala uzyskać odpowiedź na to pytanie, ponieważ zapewnia natywny sposób śledzenia czasu w Google Analytics.

Przykładowy kod znajdziesz w przykładowym kodzie Czas działań użytkownika.

Konfigurowanie przebiegów działań dotyczących użytkownika

Aby zbierać dane o czasie działania użytkowników, musisz użyć metody _trackTiming, która wysyła do Google Analytics dane o czasie.

_gaq.push([‘_trackTiming’, category, variable, time, opt_label, opt_sample]);

Gdzie reprezentują parametry:

Parametr Wartość Wymagane Podsumowanie
category string tak Ciąg znaków do kategoryzowania wszystkich zmiennych czasu działań użytkowników w grupy logiczne w celu łatwiejszego raportowania. Możesz na przykład użyć wartości jQuery, jeśli śledzisz czas potrzebny na wczytanie danej biblioteki JavaScript.
variable string tak Ciąg tekstowy wskazujący nazwę działania śledzonego zasobu. Możesz na przykład użyć wartości JavaScript Load, jeśli chcesz śledzić czas potrzebny na wczytanie biblioteki jQuery w języku JavaScript. Pamiętaj, że tych samych zmiennych można używać w wielu kategoriach do śledzenia czasu zdarzenia wspólnego dla tych kategorii, np. Javascript Load i Page Ready Time.
time number tak Liczba milisekund, które upływają w czasie raportowania do Google Analytics. Jeśli ładowanie biblioteki jQuery trwało 20 milisekund, w takiej sytuacji zostałaby wysłana wartość 20.
opt_label string nie Ciąg znaków, którego można używać, aby zwiększyć elastyczność wizualizacji czasu działań użytkownika w raportach. Za pomocą etykiet można też koncentrować się na różnych podeksperymentach dotyczących tej samej kombinacji kategorii i zmiennych. Na przykład w przypadku wczytania pliku jQuery z sieci dostarczania treści Google użyjemy wartości Google CDN.
opt_sampleRate number nie Liczba do ręcznego zastąpienia odsetka użytkowników, których działania czasowe są wysyłane do Google Analytics. Wartość domyślna to ta sama liczba co ogólne zbieranie danych o szybkości witryny i jest obliczana jako odsetek użytkowników. Jeśli więc chcesz śledzić działania _trackTiming dla 100% użytkowników, użyj wartości 100. Pamiętaj, że każde działanie jest wliczane do ogólnego limitu 500 działań na sesję.

Powrót do góry

Śledzenie czasu spędzanego

Jeśli używasz metody _trackTiming, w parametrze time określasz liczbę milisekund. Dlatego to Ty, deweloper, musisz napisać kod, który pozwoli uchwycić ten okres. Najprostszym sposobem jest utworzenie sygnatury czasowej na początku przedziału czasu i kolejnej na końcu okresu. Następnie możesz porównać różnicę między tymi sygnaturami czasowymi, aby poznać czas.

Oto prosty przykład:

var startTime = new Date().getTime();

setTimeout(myCallback, 200);

function myCallback(event) {

  var endTime = new Date().getTime();
  var timeSpent = endTime - startTime;

  _gaq.push(['_trackTiming', 'Test', 'callback_timeout', timeSpent, 'animation']);
}

Początkowa sygnatura czasowa jest pobierana przez utworzenie nowego obiektu Date i uzyskanie czasu w milisekundach. Następnie funkcja setTimeout służy do wywoływania funkcji myCallback w ciągu 200 milisekund. Po wykonaniu funkcji wywołania zwrotnego sygnatura czasowa endTime jest pobierana przez utworzenie nowego obiektu Date. Następnie obliczana jest różnica czasu zakończenia i rozpoczęcia, aby obliczyć wykorzystany czas. Ostateczny czas jest wysyłany do Google Analytics.

Ten przykład jest trywialny, ale obrazuje sposób śledzenia czasu. Spójrzmy na bardziej realistyczny przykład.

Powrót do góry

Czas śledzenia czasu wczytywania zasobu JavaScript

Obecnie wiele witryn zawiera zewnętrzne biblioteki JavaScript lub wysyła żądania danych za pomocą obiektów JSON. Twoja witryna może szybko wczytywać te zasoby w domu, ale te same zasoby mogą ładować się bardzo wolno u użytkowników w innych krajach. Te wolno ładujące się zasoby mogą pogarszać wygodę użytkowników z różnych krajów.

Funkcja czasu wczytywania witryny pomoże Ci zbierać i raportować czas wczytywania tych zasobów.

Oto prosty przykład pokazujący, jak śledzić czas działania funkcji, która asynchronicznie wczytuje zasoby JavaScript:

var startTime;

function loadJs(url, callback) {
  var js = document.createElement('script');
  js.async = true;
  js.src = url;
  var s = document.getElementsByTagName('script')[0];

  js.onload = callback;
  startTime = new Date().getTime();

  s.parentNode.insertBefore(js, s);
}

function myCallback(event) {
  var endTime = new Date().getTime();
  var timeSpent = endTime - startTime;
  _gaq.push(['_trackTiming', 'jQuery', 'Load Library', timeSpent, 'Google CDN']);

  // Library has loaded. Now you can use it.
};

Ten przykład jest bardzo podobny do poprzedniego.

W tym przykładzie loadJs jest funkcją narzędziową, która wczytuje zasoby JavaScript, dynamicznie tworząc element skryptu i dołączając go do elementu DOM przeglądarki. Ta funkcja akceptuje 2 parametry: adres URL jako ciąg znaków oraz wywołanie zwrotne, które zostanie wykonane po wczytaniu skryptu.

W elemencie loadJs sygnatura czasowa rozpoczęcia jest przechowywana w polu startTime. Po wczytaniu zasobu wykonywana jest funkcja wywołania zwrotnego. W funkcji wywołania zwrotnego sygnatura czasowa końcowa jest pobierana i używana do obliczenia czasu potrzebnego na wczytanie zasobu JavaScript. Ten czas jest wysyłany do Google Analytics za pomocą metody _trackTiming.

Wywołanie metody to:

loadJs(‘//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js’, callback);

Biblioteka jQuery zostanie asynchronicznie wczytywana z sieci dostawy treści Google, a po jej zakończeniu wykona funkcję wywołania zwrotnego, która z kolei wysyła czas wczytywania zasobu do Google Analytics.

Powrót do góry

Praca z wieloma działaniami użytkownika

Załóżmy, że chcesz wczytać wiele zasobów JavaScript za pomocą powyższego kodu. Zmienna startTime jest globalna, więc za każdym razem, gdy śledzisz początek danego okresu, zmienna startTime jest zastępowana, co powoduje wygenerowanie niewłaściwego czasu.

Dlatego zgodnie ze sprawdzoną metodą musisz utrzymać unikalną instancję czasu rozpoczęcia i zakończenia dla każdego zasobu, który chcesz śledzić.

Zwróć też uwagę na to, że parametry kategorii i zmiennej dla _trackTiming są na stałe zakodowane. Jeśli używasz metody loadJs do wczytywania wielu zasobów, nie będziesz w stanie rozróżnić poszczególnych zasobów w raportach Google Analytics.

Oba problemy można rozwiązać, przechowując parametry czasu i _trackTiming w obiekcie JavaScript.

Tworzenie obiektu JavaScript do przechowywania kodów czasowych użytkownika.

Oto prosty obiekt JavaScript, w którym możesz przechowywać dane o czasie użytkownika dla każdego śledzonego zasobu:

function TrackTiming(category, variable, opt_label) {
  this.category = category;
  this.variable = variable;
  this.label = opt_label ? opt_label : undefined;
  this.startTime;
  this.endTime;
  return this;
}

TrackTiming.prototype.startTime = function() {
  this.startTime = new Date().getTime();
  return this;
}

TrackTiming.prototype.endTime = function() {
  this.endTime = new Date().getTime();
  return this;
}

TrackTiming.prototype.send = function() {
  var timeSpent = this.endTime - this.startTime;
  window._gaq.push(['_trackTiming', this.category, this.variable, timeSpent, this.label]);
  return this;
}

Dzięki temu obiektowi loadJs możemy teraz obsługiwać wiele żądań.

Wysyłanie zapisanych danych o czasie użytkownika

Wiemy już, jak przechowywać dane o czasie w przypadku każdego zasobu, który chcesz śledzić. Aby móc z niego korzystać, zaktualizuj funkcję loadJs:

var tt = new TrackTiming('jQuery', 'Load Library', 'Google CDN');

loadJs(‘//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js’, myCallback, tt);

function loadJs(url, callback, tt) {
  var js = document.createElement('script');
  js.async = true;
  js.src = url;
  js.onload = callback;
  var s = document.getElementsByTagName('script')[0];

  tt.startTime();
  js.tt = tt;

  s.parentNode.insertBefore(js, s);
}

function myCallback(event) {
  var e = event || window.event;
  var target = e.target ? e.target : e.srcElement;

  target.tt.endTime().send();

  // Library has loaded. Now you can use it.
}

Powyższy kod zaczyna się od utworzenia nowego obiektu TrackTiming, w którym kategoria, zmienna i etykieta opcjonalna są przekazywane do konstruktora. Obiekt TrackTiming jest następnie przekazywany jako parametr do funkcji loadJs.

W obiekcie loadJs metoda startTime jest wywoływana, aby uzyskać i zapisać sygnaturę czasową rozpoczęcia.

W poprzednim przykładzie funkcja wywołania zwrotnego mogła łatwo uzyskać dostęp do zmiennej startTime, ponieważ była ona globalna. startTime jest teraz częścią obiektu TrackTiming, więc potrzebujemy sposobu na przekazanie tego obiektu z funkcji loadJs do funkcji wywołania zwrotnego.

Aby rozwiązać ten problem, jedną ze strategii jest dodanie obiektu TrackTiming jako właściwości do elementu skryptu. Funkcja wywołania zwrotnego jest wykonywana za pomocą metody skryptu onload, dlatego wywołanie zwrotne jest przekazywane jako parametr zdarzenia. Obiekt zdarzenia może zostać użyty do pobrania oryginalnego obiektu skryptu, który wywołał zdarzenie, a obiekt ten może z kolei uzyskać dostęp do obiektu TrackTiming.

Gdy uzyskamy dostęp do pierwotnego obiektu TrackTiming, skrypt może zakończyć czas i wysłać dane.

Zobacz prezentację na żywo tego przykładu na naszej stronie z przykładami.

Ten wzorzec dodawania obiektu TrackTiming jako właściwości do śledzonego obiektu sprawdza się zwykle do śledzenia innych mechanizmów asynchronicznego wczytywania, np. z użyciem obiektu XMLHttpRequest.

Powrót do góry

Śledzenie żądań XMLHttpRequest

Innym typowym sposobem asynchronicznego wczytywania zasobów strony jest użycie obiektu XMLHttpRequest. Czas wczytywania tych zasobów możesz też śledzić przy użyciu metody _trackTiming i obiektu TimeTracker.

Oto przykład, który pozwala załadować plik cytatów z serwera.

var url = ‘//myhost.com/quotes.txt’;
var tt = new TrackTime('xhr demo', 'load quotes');

makeXhrRequest(url, myCallback, tt);

function makeXhrRequest(url, callback, tt) {
  if (window.XMLHttpRequest) {
    var xhr = new window.XMLHttpRequest;
    xhr.open('GET', url, true);
    xhr.onreadystatechange = callback;

    tt.startTime();
    xhr.tt = tt;

    xhr.send();
  }
}

function myCallback(event) {
  var e = event || window.event;
  var target = e.target ? e.target : e.srcElement;

  if (target.readyState == 4) {
    if (target.status == 200) {

      target.tt.endTime().send();

      // Do something with the resource.
    }
  }
}

Ten przykład jest bardzo podobny do przykładu loadJs. Zobacz prezentację na żywo tutaj.

Powrót do góry

Unikanie wysyłania niewłaściwych danych

W powyższych przykładach, aby obliczyć czas, odejmuje się czas zakończenia od czasu rozpoczęcia. Ogólnie się to sprawdza, o ile godzina rozpoczęcia jest krótsza niż godzina zakończenia. Problem może jednak wystąpić, gdy zmieni się czas w przeglądarce. Jeśli użytkownik zmieni czas maszyny po ustawieniu czasu rozpoczęcia, do Google Analytics mogą zostać wysłane nieprawidłowe dane. Dużym problemem przy wysyłaniu 1 dużej nieprawidłowej wartości jest to, że zaburza to Twoje średnie i łączne wskaźniki.

Dlatego przed wysłaniem danych do Google Analytics warto sprawdzić, czy czas spędzony w witrynie nie przekracza 0 i krótszy niż wybrany okres. Możemy zmodyfikować metodę wysyłania TimeTracker powyżej, aby przeprowadzić taką kontrolę:

TrackTiming.prototype.send = function() {
  var timeSpent = this.endTime - this.startTime;

  var hourInMillis = 1000 * 60 * 60;

  if (0 < timeSpent && timeSpent < hourInMillis) {
    window._gaq.push(['_trackTiming', this.category, this.variable, timeSpent, this.label]);
  }

   return this;
}

Zastępowanie częstotliwości próbkowania i debugowanie

Metoda _trackTiming wysyła do Google Analytics dane o szybkości witryny gromadzone przez Google Analytics tylko z tą samą szybkością. Domyślnie to 1% wszystkich użytkowników.

W przypadku witryn o dużym ruchu wartość domyślna powinna być odpowiednia. W przypadku witryn o mniejszym ruchu możesz jednak zwiększyć częstotliwość próbkowania, ustawiając opcjonalny parametr częstotliwości próbkowania. Przykład: 

_gaq.push(['_trackTiming', 'jQuery', 'Load Library', timeSpent, 'Google CDN', 50]);

Będzie zbierać dane _trackTiming od 50% użytkowników.

Możesz też ustawić metodę _setSiteSpeedSampleRate, aby ustawić częstotliwość próbkowania dla wszystkich czasów wczytywania witryny, w tym metodę _trackTiming. Na przykład:

_gaq.push([‘_setSiteSpeedSampleRate’, 50]);

Zbiera też dane _trackTiming od 50% użytkowników.

Zazwyczaj przy testowaniu i weryfikacji implementacji Google Analytics ruch w testowanej witrynie jest bardzo niewielki. Dlatego podczas testowania warto zwykle zwiększyć częstotliwość próbkowania do 100%.

Powrót do góry

Śledzenie innych zdarzeń czasowych

Chociaż wszystkie powyższe przykłady koncentrują się na używaniu metody _trackTiming do śledzenia czasu potrzebnego do wczytywania zasobów, można jej też używać do śledzenia ogólnego czasu trwania. Możesz na przykład śledzić:

  • Czas, jaki użytkownik spędził na oglądaniu filmu.
  • Czas potrzebny na ukończenie poziomu w grze.
  • Czas, jaki użytkownik spędza na czytaniu sekcji witryny.

W każdym z tych przypadków możesz ponownie wykorzystać przedstawiony powyżej obiekt JavaScript TimeTracker, aby uprościć zbieranie i wysyłanie danych o spędzonym czasie do Google Analytics.