Реализация технологии PV-UV-IP и скрытой точки

предисловие

Технология скрытых точек — это популярная технология, которая часто используется во многих приложениях с высоким трафиком. Она направлена на запись этих операций, когда пользователи выполняют операции или запросы, а затем редизайн продукта в соответствии с количеством записанных операций и частотой операций для улучшения Пользовательский опыт и реализация технологии скрытых точек во внешнем интерфейсе более распространены, чем в бэкэнде, потому что операция пользователя не обязательно приводит к http-запросам, а бэкенду сложно отслеживать пользователей после преобладает внешний интерфейс SPA.В случае просмотра страниц бремя, конечно, ложится на внешний интерфейс.

Небольшой эпизод: На самом деле, в большинстве функциональных приложений, через мониторинг скрытых точек каждого функционального модуля, скорость доступа пользователей к карусели Баннера очень низкая, то есть существование Баннера - это просто красивое украшение в большинстве случаев, что также вызвало много споров среди продакт-менеджеров.

PV, UV и IP — это три очень распространенных показателя в работе веб-сайта и управлении им. Это также три сокровища, о которых менеджеры по продуктам думают каждый день. Для разработчиков приложений они неизбежно получат соответствующие потребности в разработке. три маленьких ребенка позже.

Что такое PV, UV, IP

PV (просмотр страницы) трафик, то есть просмотры страниц или клики, которые измеряют количество страниц, посещенных пользователями веб-сайта; в течение определенного статистического периода каждый раз, когда пользователь открывает или обновляет страницу, это регистрируется один раз, а просмотры страниц накапливаются, когда одно и то же страница открывается или обновляется несколько раз. Проще говоря, это подсчет количества посещений определенных страниц в течение определенного периода времени, например, в день, даже если один и тот же пользователь посещает много раз, это не имеет значения, может быть, этот пользователь особенно любит это страница? Таким образом, повторные посещения засчитываются как действительные.

UV (уникальный посетитель) независимый посетитель, для подсчета количества пользователей, посетивших сайт в течение 1 дня (на основе файлов cookie); компьютер-клиент, посещающий сайт, является посетителем. Его можно понимать как количество компьютеров, обращающихся к веб-сайту. Веб-сайт определяет личность посещающего компьютера с помощью файлов cookie посещающего компьютера. Если вы посещаете тот же веб-сайт после смены IP без очистки файлов cookie, количество UV в статистике веб-сайта останется неизменным. Если пользователь не сохраняет куки-файлы, не очищает куки-файлы или посещает, меняя устройства, счетчик будет увеличен на 1. Многократные посещения от одного и того же клиента в период с 00:00 до 24:00 учитываются только как 1 посетитель. Проще говоря, это идентификация пользователя в соответствии с файлом cookie (источником может быть сеанс или токен), записанным пользователем после входа в систему, чтобы подсчитать, сколько пользователей обращается к приложению.

IP (интернет-протокол) количество независимых IP-адресов, относится к количеству независимых IP-адресов, которые просматривали страницу за один день, то есть подсчитывается количество пользователей, просматривающих разные IP-адреса. Независимо от того, сколько страниц посетил один и тот же IP-адрес, количество независимых IP-адресов равно 1; если разные IP-адреса просматривают страницы, количество увеличивается на 1. IP различает разных посетителей на основе IP-адреса пользователя в глобальной сети, поэтому несколько пользователей (несколько IP-адресов в локальной сети), просматривающих Интернет через один и тот же маршрутизатор (один и тот же IP-адрес в глобальной сети), могут быть зарегистрированы как независимые IP-посетители. Если пользователь продолжает менять IP-адрес, он может быть засчитан несколько раз. Проще говоря, это идентификация пользователя по его IP-адресу, чтобы подсчитать, сколько пользователей получают доступ к приложению.

Откуда ошибка

Однако все статистические методы PV, UV и IP будут иметь ошибки.

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

При подсчете UV, если пользователь продолжает очищать файлы cookie или менять множество устройств для доступа, пользователь будет учитываться несколько раз.УФ > реальные данные. Если несколько пользователей совместно используют учетную запись и одно и то же устройство, тоУФ .

При расчете IP, если пользователь переключает сетевой режим мобильного телефона (4g -> wifi), то IP > реальные данные, когда несколько пользователей используют одно и то же устройство, тоIP ** То есть ошибки есть всегда, при большом количестве данных, длительном статистическом периоде и очевидных правилах на эти ошибки тоже можно не обращать внимания.

Техническая реализация

Время запуска

На самом деле, будь то статистика PV и UV (статистика IP вообще может быть сделана самостоятельно back-end без участия front-end), или зарытая технология, грубо говоря, необходимо отправить соответствующий запрос на задний план в нужное время.

Когда самое подходящее время? Это также необходимо анализировать в каждом конкретном случае.Например, статистика PV обычно выполняется в мониторинге переходов маршрутизации, и мы можем реализовать ее в глобальном обработчике маршрутизации. Статистика UV в большей степени зависит от бэкэнда, бэкенду нужно только нести информацию о корректных куках в тело любого запроса, а бэкэнд выполняет фильтрацию.

Техническая сцена со скрытыми точками более сложна, например, при нажатии некоторых кнопок, в обработчике событий прослушивателя полосы прокрутки и т. д.

Как отправить запрос

Время запросов в PV, UV и зарытых точках разное, и фактически есть возможность выбора способа отправки запросов.

Общие методы запросов, такие как использование ajax или fetch для отправки запросов GET/POST, конечно, могут решить проблему, но такие методы часто потребляют много денег, и соответствующая скорость будет ниже.Преимущество заключается в том, что данные, передаваемые на сервер, могут нести немного больше. , данные, возвращаемые из запроса, как правило, в формате JSON, что также очень удобно для обработки.

Однако использование Ajax или выборки может привести к междоменным проблемам, поскольку иногда сервер, который записывает данные о скрытых точках, а также данные PV и UV, отделен от сервера приложений.

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

Поэтому реальный метод реализации с большим количеством сценариев — выполнять img-запросы.

Технология маяков изображения

В большинстве случаев использование img-запроса является наиболее реальным способом, так почему? Как этого добиться?

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

При этом объем тела запроса меньше, скорость запроса выше, а потребление сетевых ресурсов меньше.

В таком случае, почему бы не выбрать другие типы запросов файлов, такие как файлы JS, файлы CSS или файлы, похожие на шрифты TTF?

Это связано с тем, что файлы JS и другие типы файлов должны быть вставлены в дерево документов до того, как браузер отправит запрос, что, вероятно, повлечет за собой затраты на рендеринг и может заблокировать рендеринг дерева документов, но это не относится к запросам изображений. DOM, пока новый объект изображения создается в js, запрос может быть инициирован, и нет проблемы блокировки.В среде браузера без js тег img может использоваться нормально, что невозможно для других типов ресурсов. Запросы.

Сказав это, остается сделать последний выбор: какой формат Img мне следует использовать?

Во-первых, 1x1 пиксель — это самое маленькое разрешенное изображение. Кроме того, поскольку изображение расчерчено точками, изображение предпочтительно является прозрачным.Прозрачное изображение должно использовать только двоичный бит, чтобы пометить изображение как прозрачный цвет, без сохранения данных цветового пространства, что может сэкономить объем.

Итак, все форматы BMP, PNG и GIF поддерживают прозрачные форматы, какой из них выбрать? Ответ — формат GIF.Согласно статистике, для самого маленького файла BMP требуется 74 байта, для файла PNG — 67 байт, а для легального GIF — всего 43 байта, и стоимость запроса в настоящее время будет ниже.

Наконец, почему лучшим решением для такого рода запросов является использование прозрачного изображения размером 1 * 1 в формате GIF?

Возможность завершить весь HTTP-запрос + ответ (хотя содержание ответа не требуется)
После срабатывания GET-запроса нет необходимости получать и обрабатывать данные, а серверу не нужно отправлять данные
междоменный дружественный
Процесс выполнения не блокируется
Лучшая производительность, чем объект XMLHttpRequest для отправки запроса GET.
GIF имеет наименьший минимальный допустимый размер (самый маленький файл BMP требует 74 байта, PNG — 67 байт, а разрешенный GIF — всего 43 байта).

Самое удивительное, что на самом деле бэкенду не нужно возвращать образ 1*1 фронтенда, потому что фронтенду вообще не нужно его рендерить в тело, так что неважно, вернет ли бэкенд 204 -- Not Content, потому что наша цель - только отправить запрос.После отправки запроса все остальное можно игнорировать.

Конкретные приложения в проекте

Далее давайте посмотрим, как реализовать статистику PV и UV и зарытые точки в проекте.В качестве примера я возьму проект Vue.

Инкапсулируйте метод действия маяка

/**
 * @module beacon实现模块
*/
import Qs from 'querystring'

/**
 * @function 具体的beacon动作
 * @param {String} apiUrl 发送的接口请求
 * @param {Object} params 具体发送的数据
 * @example beaconAction('/api/recored', { url: '...' }).then((res) => {}).catch((error) => {})
 */
export const beaconAction = (apiUrl, params) => {
  /** 如果参数不是字符串则转换为query-string  */
  let _params = typeof params === 'string' ? params : Qs.stringify(params)
  /** 创建Image对象来发送请求  */
  let img = new Image(1, 1)
  let src = `${apiUrl}?${_params}`
  img.src = src
  /** 其实并不需要将此图片append到body中，请求此时已经发送，目的已经达成了  */
  /** 利用load和error事件来监听动作的完成，返回Promise便于操作  */
  return new Promise((resolve, reject) => {
    img.onload = function () {
      resolve({ code: 200, data: 'success!' })
    }
    img.onerror = function (e) {
      reject(new Error(e.error))
    }
  })
}

Запись PV, UV при мониторинге маршрута

/**
 * PV/UV记录
 */
router.afterEach((to, from) => {
  const path = to.path
  /** 如果开启了登陆权限验证 */
  if (process.env.AUTH_ENABLED) {
    /** 除了登陆界面，其他路由界面都请求记录 */
    if (to.path !== '/login') {
      pathBeaconAction(path)
    }
  }
})

Реализация скрытых точек в Vue

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

Для выполнения требований рекомендуется использовать стороннюю команду **v-track**, вы можетеПерейти на официальный сайтдля просмотра подробной инструкции по применению.

Как использовать:

<!-- 页面行为埋点（track-view为v-track全局注册的组件） -->
<track-view v-track:18015></track-view>
<track-view v-track:18015.watch="{ rest }"></track-view>
<track-view v-track:18015.watch.delay="{ rest }"></track-view>
<track-view v-if="rest" v-track:18015></track-view>
 
<!-- 事件行为埋点（DOM） -->
<div v-track:18015.click="handleClick"></div>
<div v-track:18015.click="{ handleClick, item, index }"></div>
<div v-track:18015.click.async="{ handleSearch, rest }"></div>
<div v-track:18015.click.delay="handleClick"></div>
 
<!-- 事件行为埋点（组件） -->
<cmp v-track:18015.click="handleClick"></cmp>
<cmp v-track:18015.[自定义事件名]="handleSearch"></cmp>
<cmp v-track:18015.[自定义事件名].delay="handleSearch"></cmp>
<cmp v-track:18015.[自定义事件名].async="{ handleSearch, rest }"></cmp>
 
<!-- 区域展现埋点（block 可以是 DOM 或者组件） -->
<block v-track:18015.show></block>
<block v-track:18015.show.once></block>
<block v-track:18015.show.custom="{ ref: 'scroll' }"></block>
<block v-track:18015.show.custom.once="{ ref: 'scroll' }"></block>

Описание модификатора:

.clickТочка внедрения, представляющая поведение события
.[custom-event]Точка встраивания, представляющая пользовательское поведение события
.nativeУказывает точку захоронения для мониторинга собственного поведения события щелчка компонента.
.watchУказывает на точку асинхронного поведения страницы
.asyncСотрудничать.clickДирективы, которые представляют скрытую точку поведения асинхронного события.
.delayУказывает, задерживается ли выполнение скрытой точки.По умолчанию сначала выполняется скрытая точка, а затем выполняется обратный вызов.
.showУказывает заглубленную точку воздействия области
.onceСотрудничать.showкоманда, выполнить скрытую точку только один раз
.customСотрудничать.showДиректива для использования пользовательского события прокрутки

послесловие

Схем реализации закапывания точек и ПВУВ слишком много, и каждая схема вызовет много дискуссий.Надеюсь, что и у вас могут быть свои идеи.Добро пожаловать к обсуждению.