Пользовательское время – веб-отслеживание (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 , если хотите отслеживать время, необходимое для загрузки библиотеки JavaScript jQuery. Обратите внимание, что одни и те же переменные могут использоваться в нескольких категориях для отслеживания времени событий, общих для этих категорий, таких как 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 и после завершения выполнит функцию обратного вызова, которая, в свою очередь, отправит время загрузки ресурса в 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.