Статистика по продолжительности пребывания страницы со всеми (отсутствием) встроенных точек во фронтенде

Статистика по продолжительности пребывания страницы со всеми (отсутствием) встроенных точек во фронтенде

Цзо Пэнфэй 2017.11.24

Связанное чтение:

Визуализация рабочего пути страницы со всеми (отсутствием) встроенных точек во внешнем интерфейсе

1 Обзор

Чтобы лучше понять, как пользователь использует продукт, в бизнесе мы часто получаем запрос на статистику скрытых точек, например:

• Собирайте движение курсора пользователя на странице за определенный период времени, включая движение курсора, щелчки и другие действия.
• Статистика поведения пользователей при прокрутке
• Подсчитайте, как долго пользователи остаются на сайте
• Соберите количество кликов по ссылкам страниц и т. д.

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

2. Идея статистики пребывания на странице

Вообще говоря, есть две идеи для статистики времени пребывания на странице:

• Статистика при закрытии текущей страницы

• Статистическое время: выгрузка, события до выгрузки
• Существующие проблемы:
  • Когда пользователь закрывает или выпрыгивает со страницы, запрос не выдается
  • Когда пользователь переключается с браузера на другой интерфейс приложения или на главный экран, некоторые браузеры по умолчанию останавливают выполнение сценария страницы.Если вы используете событие выгрузки в это время, вы можете быть разочарованы, потому что событие выгрузки не будет срабатывать, что приводит к чрезмерно длительному пребыванию.

• Статистика после перехода на новую страницу

• Статистическое время: передать данные на следующую страницу, отправить данные на следующей странице
• Существующие проблемы:
  • Тот же скрипт статистики должен быть развернут на следующей странице
  • Последняя страница не прыгает вниз, и для закрытия браузера требуется специальная обработка

3 Текущая страница закрывает статистическую схему

Идея текущего решения статистики закрытия страниц состоит в том, чтобы заблокировать закрытие страницы, сначала отправить запрос статистики данных, а затем закрыть страницу

3.1 Решение 1. Блокировка запроса Ajax

Третий параметр метода XMLHttpRequest::open, если установлено значение false, он загружается синхронно.

window.addEventListener('unload', function(event) {
	var xhr = new XMLHttpRequest(),
	xhr.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
	xhr.open('post', '/log', false); // 同步请求
	xhr.send(data);
});
скопировать код

Это может заблокировать закрытие страницы.Конечно, вы можете прервать запрос, когда readState равно 2, потому что нас не волнует содержание ответа, пока запрос отправляется.

3.2 Решение 2: Жестокий бесконечный цикл

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

window.addEventListener('unload', function(event) {
  send(data);
  var now = +new Date;
  while(new Date - now >= 10) {} // 阻塞 10ms
});
скопировать код

3.3 Отправить запрос изображения для блокировки

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

window.addEventListener('unload', function(event) {
  send(data);
  (new Image).src = 'http://example.com/s.gif';
});
скопировать код

3.4 Сводка

Вышеупомянутые решения основаны на принципе, который позволяет браузеру продолжать блокировать и ждать отправки данных перед переходом.Проблемы здесь:

• Может не работать в некоторых браузерах
• Подождите некоторое время, а затем прыгайте, пользовательский интерфейс был обесценен, особенно на мобильном терминале.

4. Статистические идеи после перехода на новую страницу

4.1 передача параметров URL

Информация о местоположении ссылки идентифицируется массивом, например [идентификатор сайта, идентификатор страницы, идентификатор модуля, индекс ссылки], а атрибут местоположения ссылки может быть однозначно идентифицирован с помощью четырех параметров, и данные массива передаются следующему страницу с параметром параметра URL, ожидая перехода вниз по странице для отправки данных.

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

4.2 Передача данных через window.name

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

Вот библиотека с открытым исходным кодомaralejsможно обратиться к.

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

4.3 повторная передача хранилища localstorage

Localstorage — это один из двух новых методов хранения данных на стороне клиента, предоставляемых HTML 5. Для сценариев с высоким уровнем потерь мы можем сначала сохранить журнал запросов в локальном хранилище и повторно отправить его на следующей странице после сбоя, а затем добавить механизм повторных попыток, чтобы значительно улучшить общую производительность журнала. С точки зрения производительности его также можно отправлять единообразно и сокращать количество подключений. Однако для сценариев с высоким показателем отказов измеренный эффект этого метода не очевиден.

5. Схема API маяка новой функции H5

Почему мы не можем предоставить пользователям такой API, чтобы даже при переходе страницы можно было отправить запрос на предыдущую страницу? К счастью, рабочая группа W3C тоже подумала об этой проблеме и выдвинула проект Beacon API.

Beacon API позволяет разработчикам отправлять небольшой объем информации об анализе ошибок и отчетах.Его возможности очевидны:

• Отправьте статистику асинхронно, когда простоя, не влияя на выполнение таких страниц, как JS, анимация CSS и т. Д.
• Даже если страница находится в состоянии выгрузки, статистика будет отправляться асинхронно, не влияя на переход страницы/переход на следующую страницу
• Он может быть оптимизирован для отправки клиентом, особенно в мобильной среде, запрос Beacon может быть объединен с другими запросами и обработан вместе.

На навигаторе висит функция sendBeacon.Перед выгрузкой эту функцию надо инициализировать. Он используется как:

window.addEventListener('unload', function(event) {
  navigator.sendBeacon('/collector', data);
});

скопировать код

navigator.sendBeacon(url, data); первый параметр — адрес отправки данных, второй параметр — данные для отправки.Поддерживаемые форматы данных: ArrayBufferView, Blob, DOMString и FormData.

Beacon также имеет очень практичный сценарий мобильного использования.Когда пользователь переключается с браузера на другой интерфейс приложения или на главный экран, некоторые браузеры по умолчанию останавливают выполнение скрипта страницы.Если в это время используется время выгрузки, оно может быть Вы будете разочарованы, потому что событие выгрузки не сработает, в этот момент маяк пригодится, он не пострадает.

6. Резюме

В этой статье объясняется традиционныйbeforunloadилиunloadПроблема потери баллов при длительном зависании страницы отправки события; перечислено несколько идей по решению проблемы.

7. Ссылки

• Анализ причин и решение потери RBI перед выгрузкой
• Обсуждение проблемы потери статистических данных при переадресации страницы