Пользовательское время – веб-отслеживание (ga.js)

Этот документ содержит подробное руководство по использованию метода _trackTiming .

Введение

Исследования показали, что сокращение времени загрузки страницы улучшает общее впечатление пользователей от сайта. В Google Analytics есть ряд мощных отчетов, которые автоматически отслеживают время загрузки страницы. Но что, если вы хотите отслеживать время, необходимое для загрузки определенного ресурса?

Например, не занимает ли загрузка популярной библиотеки JavaScript слишком много времени, что снижает удобство работы с сайтом для определенных пользователей?

Пользовательские тайминги позволяют ответить на этот вопрос, предоставляя собственный способ отслеживания периода времени в Google Analytics.

Чтобы увидеть рабочий пример , ознакомьтесь с примером кода User Timings.

Настройка времени пользователя

Для сбора данных о времени пользователя вам потребуется использовать метод _trackTiming , который отправляет данные о времени в Google Analytics.

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

Где параметры представляют:

Параметр Ценность Необходимый Резюме
category string да Строка для категоризации всех пользовательских временных переменных в логические группы для упрощения отчетности. Например, вы можете использовать значение jQuery , если отслеживаете время, необходимое для загрузки конкретной библиотеки JavaScript.
variable string да Строка для указания имени действия отслеживаемого ресурса. Например, вы можете использовать значение JavaScript Load , если хотите отслеживать время, необходимое для загрузки библиотеки jQuery JavaScript. Обратите внимание, что одни и те же переменные можно использовать в нескольких категориях для отслеживания времени события, общего для этих категорий, например Javascript Load , Page Ready Time и т. д.
time number да Количество миллисекунд за прошедшее время для отчета в Google Analytics. Если бы библиотека jQuery загружалась 20 миллисекунд, вы бы отправили значение 20 .
opt_label string нет Строка, которую можно использовать для повышения гибкости визуализации времени пользователя в отчетах. Ярлыки также можно использовать для фокусировки на разных подэкспериментах для одной и той же категории и комбинации переменных. Например, если мы загрузим jQuery из сети доставки контента Google, мы будем использовать значение Google CDN .
opt_sampleRate number нет Число для ручного переопределения процента посетителей, чьи совпадения по времени отправляются в Google Analytics. По умолчанию установлено то же число, что и при общем сборе данных о скорости сайта, и оно основано на процентах посетителей. Поэтому, если вы хотите отслеживать обращения _trackTiming для 100% посетителей, вы должны использовать значение 100 . Обратите внимание, что каждое обращение учитывается при общем ограничении в 500 обращений за сеанс.

Наверх

Отслеживание затраченного времени

Когда вы используете метод _trackTiming , вы указываете количество затраченных миллисекунд в параметре time . Так что вы, разработчик, должны написать код, чтобы зафиксировать этот период времени. Самый простой способ сделать это — создать метку времени в начале периода времени и создать другую метку времени в конце периода. Затем вы можете взять разницу между обеими временными метками, чтобы получить потраченное время.

Вот тривиальный пример:

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']);
}

Начальная метка времени извлекается путем создания нового объекта Date и получения времени в миллисекундах. Затем функция setTimeout используется для вызова функции myCallback через 200 миллисекунд. После выполнения функции обратного вызова отметка времени endTime извлекается путем создания нового объекта Date . Затем рассчитывается разница времени окончания и начала, чтобы получить затраченное время. Наконец, потраченное время отправляется в Google Analytics.

Этот пример тривиален, но иллюстрирует концепцию отслеживания времени. Давайте рассмотрим более реалистичный пример.

Наверх

Отслеживание времени, затраченного на загрузку ресурса JavaScript

Сегодня многие сайты включают сторонние библиотеки JavaScript или запрашивают данные через объекты JSON. В то время как ваш сайт может быстро загружать эти ресурсы дома, те же ресурсы могут загружаться очень медленно для пользователей в других странах. Эти ресурсы с медленной загрузкой могут ухудшить работу сайта для международных пользователей.

Функция определения времени загрузки сайта может помочь вам собрать данные о том, сколько времени требуется для загрузки этих ресурсов.

Вот простой пример, демонстрирующий, как отслеживать время, затрачиваемое функцией, которая асинхронно загружает ресурсы 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.
};

Обратите внимание, что этот пример очень похож на предыдущий.

В этом примере loadJs — это служебная функция, которая загружает ресурсы JavaScript, динамически создавая элемент скрипта и прикрепляя его к DOM браузера. Функция принимает два параметра: URL-адрес в виде строки и функцию обратного вызова, которая будет выполнена после загрузки скрипта.

Внутри loadJs временная метка начала хранится в startTime . После загрузки ресурса выполняется функция обратного вызова. В функции обратного вызова метка времени окончания извлекается и используется для расчета времени, необходимого для загрузки ресурса JavaScript. Это затраченное время отправляется в Google Analytics с помощью метода _trackTiming .

Итак, позвонив:

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

Будет асинхронно загружать библиотеку jQuery из сети Google Content Delivery и после завершения выполнять функцию обратного вызова, которая, в свою очередь, отправляет время загрузки ресурса в Google Analytics.

Наверх

Работа с несколькими пользователями

Допустим, вы хотите загрузить несколько ресурсов JavaScript, используя приведенный выше код. Поскольку переменная startTime является глобальной, каждый раз, когда вы отслеживаете начало периода времени, переменная startTime будет перезаписываться, что приведет к неверному затраченному времени.

Поэтому рекомендуется поддерживать уникальный экземпляр времени начала и окончания для каждого ресурса, который вы хотите отслеживать.

Также обратите внимание, что категория и переменные параметры для _trackTiming жестко запрограммированы. Поэтому, если вы используете loadJs для загрузки нескольких ресурсов, вы не сможете различать каждый ресурс в отчетах Google Analytics.

Обе проблемы можно решить, сохранив параметры времени и _trackTiming в объекте JavaScript.

Создание объекта JavaScript для хранения времени пользователя.

Вот простой объект JavaScript, который можно использовать для хранения данных о времени пользователя для каждого отслеживаемого ресурса:

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

Теперь мы можем использовать этот объект, чтобы заставить loadJs работать с несколькими запросами.

Отправка сохраненных пользовательских таймингов

Теперь, когда у нас есть способ хранить временные данные для каждого ресурса, который мы хотим отслеживать, вот как обновить 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.
}

Приведенный выше код начинается с создания нового объекта TrackTiming , в конструктор которого передаются категория, переменная и необязательная метка. Затем объект TrackTiming передается в качестве параметра функции loadJs .

Внутри loadJs вызывается метод startTime для получения и сохранения метки времени начала.

В предыдущем примере функция обратного вызова могла легко получить доступ к переменной startTime , поскольку она была глобальной. Теперь, когда startTime является частью объекта TrackTiming , нам нужен способ передать этот объект из функции loadJs в функцию обратного вызова.

Одна из стратегий решения этой проблемы заключается в добавлении объекта TrackTiming в качестве свойства к элементу скрипта. Поскольку функция обратного вызова выполняется из метода onload скрипта, в качестве параметра этому обратному вызову передается объект события. Затем этот объект события можно использовать для извлечения исходного объекта сценария, вызвавшего событие, а этот объект сценария, в свою очередь, можно использовать для доступа к нашему объекту TrackTiming .

Как только мы сможем получить доступ к нашему исходному объекту TrackTiming , скрипт может завершить отсчет времени и отправить данные.

См. живую демонстрацию этого примера на нашем сайте примеров.

Этот шаблон добавления объекта TrackTiming в качестве свойства к отслеживаемому объекту, как правило, хорошо работает для отслеживания других механизмов асинхронной загрузки, таких как использование объекта XMLHttpRequest .

Наверх

Отслеживание XMLHttpRequests

Другой распространенный способ асинхронной загрузки ресурсов веб-страницы — использование объекта XMLHttpRequest . Время, необходимое для загрузки этих ресурсов, также можно отслеживать с помощью как метода _trackTiming , так и объекта TimeTracker .

Вот пример загрузки файла котировок с сервера.

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

Этот пример очень похож на пример loadJs. Смотрите живую демонстрацию здесь .

Наверх

Избегайте отправки неверных данных

В приведенных выше примерах, чтобы получить затраченное время, код вычитает время окончания из времени начала. Обычно это работает хорошо, если время начала меньше времени окончания. Но это может стать проблемой, если время в браузере изменится. Если пользователь изменит свое машинное время после того, как установлено время начала, неверные данные могут быть отправлены в Google Analytics. Большая проблема с отправкой одного большого неправильного значения заключается в том, что оно исказит ваши средние и общие показатели.

Поэтому, как правило, перед отправкой данных в Google Analytics рекомендуется убедиться, что затраченное время больше 0 и меньше некоторого периода времени. Мы можем изменить метод отправки TimeTracker выше, чтобы выполнить эту проверку:

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

Переопределение частоты дискретизации и отладка

Метод _trackTiming только отправляет данные в Google Analytics с одинаковой скоростью для всех показателей скорости сайта, собранных Google Analytics. По умолчанию установлено значение 1% от всех посетителей.

Для сайтов с большим объемом трафика значение по умолчанию должно подойти. Но для сайтов с меньшим трафиком вы можете увеличить частоту дискретизации, задав необязательный параметр частоты дискретизации. Например:

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

Будет собирать данные _trackTiming от 50% посетителей.

Кроме того, вы можете установить метод _setSiteSpeedSampleRate , чтобы установить частоту дискретизации для всех таймингов скорости сайта, включая метод _trackTiming . Так, например:

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

Также будет собирать данные _trackTiming от 50% посетителей.

Обычно, когда вы тестируете и проверяете реализацию Google Analytics, у вас очень мало трафика на тестируемый сайт. Поэтому обычно полезно увеличить частоту дискретизации до 100% во время тестирования.

Наверх

Отслеживание других временных событий

Хотя весь приведенный выше пример посвящен использованию метода _trackTiming для отслеживания того, сколько времени требуется для загрузки ресурсов, этот метод также можно использовать для отслеживания общей продолжительности времени. Например, вы можете отслеживать:

  • Время, которое посетитель тратит на просмотр видео.
  • Время, необходимое для прохождения уровня в игре.
  • Время, которое посетитель тратит на чтение раздела веб-сайта.

В каждом из этих случаев вы можете повторно использовать один и тот же объект JavaScript TimeTracker представленный выше, чтобы упростить сбор и отправку данных о затраченном времени в Google Analytics.