你只有竭尽全力之后，才有资格说运气不好。
содержание
- Зачем нужна платформа мониторинга
- Сторонняя платформа
- Платформа анализа трафика
- Сделай сам
- Платформа для сбора логов
- SPM
- Процесс погребенной точки
- Сделай сам
- Hiper
предисловие
我认为，流量分析平台 + 日志采集平台 + 异常信息采集 + ajax信息采集 + 性能指标 = 监控平台。
Я написал две статьи раньше«Внешняя биржа оптимизации производительности»а также«Коммуникация по оптимизации качества внешнего кода». Также видно, что статью я писал, сравнивая процесс разработки проекта. Платформа мониторинга не так важна для большинства компаний, но необходима для полноценного проекта поставки, а также соответствующая платформа анализа трафика и платформа сбора логов. Визуализированные данные предоставят клиентам наиболее интуитивно понятное отображение.
Первоначальное намерение:
Я хочу получить некоторые знания о статистических данных проекта извне, изучить принцип, сотрудничать с некоторыми вещами, которые я делал раньше, соединить их последовательно, ускорить некоторые вещи и сделать что-то самому.
Зачем нужна платформа мониторинга
PV, UV, IP и другие индикаторы также являются обычным явлением.
PV(访问量)：Page View，即页面浏览量或点击量，用户每次刷新即被计算一次。
UV(独立访客)：Unique Visitor，一般使用cookie标记，访问您网站的一台电脑客户端(比如一台电脑开多个浏览器访问则为多个UV)为一个访客，00:00-24:00内相同的客户端只会被计算一次。
IP(独立IP)：指独立IP数。00:00-24:00内相同IP地址之被计算一次(多台电脑可能共用一个ip)。
В конце концов, они отражают общую ситуацию с продуктом.Помимо того, что данные отражают статус-кво, ценность данных является самой важной обратной связью для управления ростом бизнеса.
Говоря простыми словами, например: чтение проектов, должна быть платформа для мониторинга. Рейтинги и количество чтений являются результатами, полученными с помощью платформы мониторинга.
高速发展的时代对于数据分析需求的精细化程度越来越高
Для текущей формы, как и в приведенном выше предложении, степень уточнения становится все выше и выше.
我不仅要知道买产品的客户有多少，我还想知道，客户鼠标明明放在了购买按钮上，然后鼠标移走了的客户有多少。就差问问他为什么没买了。
Сторонняя платформа
Я думаю, это не чуждо всем, часто в это время босс просит вас построить платформу мониторинга за один день.
老板：“前端美男子，我需要我们项目的访问量，最受欢迎的文章等所有数据，定期生成报表(省略6000字)...”
непосредственно принято,Статистика Байду,Умэн+и другие сторонние платформы статистики трафика.
О преимуществах говорить больше не приходится, на этом люди специализируются. Здесь следует отметить: Зарегистрируйте аккаунт у босса, иначе уйти будет непросто.
Недостатком является то, что некоторые функции стоят денег, есть много данных, которые нам не нужны, а настройка слишком плоха для обслуживания. Главное, не свои. Конечно, моя цель — поиграть в небольшую демо-версию и просто изучить принцип работы платформы мониторинга.
Что умеет платформа анализа трафика
Здесь я беру Baidu Statistics в качестве примера, чтобы увидеть представление о себе на их официальном сайте.
Вы можете подсчитать общую производительность, исходящие и исходящие страницы, атрибуты посетителей, регионы посетителей, pv, uv, показатель отказов и т. д. Есть также некоторые уникальные особенности Baidu, например, по каким ключевым словам можно найти ваш сайт в Baidu. и т.п.
DIY
Мы обращаемся к приведенному выше списку функций, извлекаем некоторую информацию, которую мы можем сделать, и собираем эти данные.
Сначала давайте посмотрим, какие данные мы можем получить.
Собранный контент включает в себя:
- URL-адрес текущей страницы, URL-адрес исходной страницы заголовка (если есть).
- Идентификационная информация пользователя: cookieID и т. д.
- Время пребывания пользователя
- Информация о клиенте/браузере и разрешении экрана.
- Идентификационный код текущей услуги, код операции пользователя
- Сделай сам немного информации.
Обратите внимание:
Мы отправляем вышеуказанную информацию в фоновом режиме, и студенты в фоновом режиме могут записывать IP-адрес пользователя, получать адрес в соответствии с IP-адресом, а также посещать и оставлять время. Каждая часть данных представляет собой pv, а затем групповой запрос ip, чтобы узнать количество ip в день, а регион пользователя и другую информацию также можно найти через ip-адрес.
Давайте посмотрим, как Nuggets отправляют статистику
Как мы видим выше, платформа статистики Baidu, используемая Nuggets, отправляет журналы независимо от того, что используют Nuggets. То, как отправляется журнал, представляет собой пустой gif. По следующим параметрам также можно смутно угадывать некоторые поверхностные смыслы. Остальное зависит от того, как вы договорились.
разрешение
ds: 1920x1080
Текущий запущенный элемент DOM, за которым следует URL-адрес для перехода? ? не уверен
ep:-257.5*28*51*41*0*#juejin>div[2]>div>header>div>nav>ul>li[1]>ul>li[2]>a*31*21*a*https%3A%2F%2Fjuejin.im%2Factivities
язык, используемый браузером
ln: zh-cn
Версия
v: 1.2.43
Итак, приступим, сначала инкапсулируем вставленный файл monitor.js.
Здесь объявлен массив _map для хранения захваченных данных в двумерном массиве.
Затем динамически вставляется analytics.js, и данные фиксируются в этом js.Также в файл монитора могут быть добавлены некоторые другие операции, о которых мы поговорим позже.
analytics.js
Здесь мы взяли несколько простых данных, сохранили их в массиве _maq и сделали запрос через gif 1x1 после экранирования с помощью кодирования. В соответствии с потребностями проекта в него можно добавить множество параметров, и каждый может играть сам по себе.
Конечно, мы также можем отправлять запросы данных без режима gif.Мы также можем отправлять запросы данных через обычные запросы ajax, потому что это нужно инкапсулировать в компоненты и поддерживать отдельно.Здесь мы рекомендуем модуль Zepto $.Ajax.
Взгляните на эффект.
Мы отправили лог в интерфейс статистики Baidu, потому что там нет уникального id, люди его точно не примут. Предполагается, что Baidu молча запишет мой IP-адрес, чтобы посмотреть, что я собираюсь делать.
Нам также нужно добавить некоторые параметры в фоновом режиме, такие как ip и другие параметры, о которых я упоминал выше. Затем мы можем сделать некоторый визуальный интерфейс (диаграммы, диаграммы, биографии и т. д.) через эти данные. Как этот классный график. Создайте свою собственную аналитическую платформу и постепенно расширяйте ее. Эта диаграмма была сделана мной через bizcharts.
Платформа для сбора логов
Вышеупомянутая платформа анализа трафика собирает некоторые общие данные, однако нам нужны конкретные бизнес-данные, например, что искали пользователи, какие кнопки были нажаты, какие заказы были размещены и т. д.
Когда мы считаем эти данные, нам нужно закопать точки, что является трудоемкой и трудоемкой задачей, но, опять же, идеальный проект доставки, это все must-have.
Здесь я кратко представлю вам скрытое решение Али. И логи объединяются с вышеперечисленными методами анализа трафика.
SPM(Super Position Model)
SPM (модель суперпозиции) означает модель суперпозиции. Код, используемый для отслеживания положения модуля страницы.Стандартный код spm принимает формат abcde (каждый код положения может состоять только из цифр, строчных букв, дефисов/знаков минус), из которых требуются биты a и b. , Значение каждого бита и спецификации развертывания следующее:
a определяет идентификатор сайта, а идентификатор сайта относится к набору страниц определенного типа, содержащих определенные бизнес-значения, например рынок женской одежды, которые можно рассматривать как сайт. Во время развертывания объявление SPM-a должно быть помещено в<head></head>внутри закрытого тега, через отдельный<meta>Объявление ярлыка.
<head> ... <meta name="data-spm" content="申请的A位编码"> ... </head>
b Идентифицирует идентификатор страницы, который относится к определенной странице определенного бизнеса, например домашней странице женской одежды на рынке женской одежды. Первые два бита a.b кода SPM идентифицируют уникально указанную страницу и соответствуют один к одному статической части URL-адреса страницы (то есть части, предшествующей ? в URL-адресе). Во время развертывания SPM-b необходимо объявить как расширенный атрибут (data-spm) тега следующим образом:
<body data-spm="注册的B位编码">
Специальное примечание. Если место развертывания aplus.js находится в разделе head или атрибут body не может быть изменен по какой-либо причине, объявление бита spm-AB может быть сделано только с использованием метатега spm-id в раздел head (расположенный в сценарии aplus.js перед справочным кодом) для достижения следующего:
<head> ... <meta name="spm-id" content="申请的A位编码.注册的B位编码"> ... </head>
c идентифицирует определенную область или модуль на странице.Как правило, когда страница публикуется, часть, содержащаяся в табличной области или области div в исходном коде, может рассматриваться как модуль. Например, левую панель навигации главной страницы женской одежды можно рассматривать как блок. Бит C не требуется объявлять, и его можно указать в соответствии с требованиями (но если необходимо подсчитать конкретные данные о щелчках пит-кликов на странице, необходимо объявить бит C), и обычно он используется для мониторинга области на странице. страница с относительно самостоятельными функциями. Во время развертывания SPM-c обычно объявляется с расширенным атрибутом (data-spm) соответствующего контейнера div следующим образом:
<div data-spm="自定义或注册的C位编码">
d идентифицирует идентификатор местоположения, который относится к соответствующей ссылке или изображению в определенном модуле страницы, что является наиболее детальной статистикой данных. SPM-d вообще не требует регистрации или приложения, и вообще не требует специального объявления.Система будет автоматически рассчитывать и кодировать (при условии, что бит C должен быть правильно объявлен).При необходимости вы также можете самостоятельно декларировать, как показано ниже :
<a href="" data-spm="d开头的自定义编码串">
e идентифицирует логид текущего журнала, который используется для различения последовательности журнала доступа и полного пути доступа возвращающегося пользователя. Этот идентификатор автоматически назначается сценарием сбора логов, а ручное построение и присвоение (модификация) не требуются и запрещены.
Процесс погребенной точки
- Применение закопанной точки: подайте заявку на закопанный код на платформе и запишите информацию о закопанной точке
- Конфигурация скрытой точки: скрытый код делится на визуальное автоматическое встраивание кода и невизуальное встраивание кода вручную.
- Проверка точки встраивания: SDK автоматически запускает события щелчка и проверяет информацию о скрытой точке, представленную на платформе.
- Мониторинг данных: отслеживайте качество скрытых кодов
- Управление коллекцией: Управление данными коллекции
DIY
Мы ссылаемся на процесс отслеживания SPM и правила отслеживания. Вот так мы закопали этот момент, но как получить эти коды а.b.c.d и отправить лог-запросы?
Мы по-прежнему делаем свою собственную платформу для сбора логов и чему-то учимся на ней.
Прежде всего, когда вы видите параметры, спрятанные в методе атрибута, первой реакцией будет думать о прокси-сервере события.
Давайте сначала похороним это в проекте, например:
Выше приведена простая точка захоронения, просто пример, вы можете по желанию добавить некоторые точки в свои бизнес-компоненты, обратить внимание на порядок и обратить внимание на написание соответствующего документа функции точки захоронения.
Написать spm.js
Я написал вышеприведенные замечания очень подробно. Думаю, вы сможете понять это, если внимательно посмотрите. Есть одна строчка, которую мне нужно объяснить.
_maq.push(['_trackEvent', spmArray]);
Эта строка помещает данные журнала в параметр _maq в файле monitor.js в статистике трафика.
Затем мы определяем метод парсинга с именем, _trackEvent (отслеживание события), вы можете оглянуться назад, это написано на скриншоте выше.
Затем мы добавляем метод для отслеживания изменения параметра _maq в monitor.js, инициируем изменение и затем отправляем журнал. Как отслеживать изменения параметров:
Взгляните на эффект:
Таким образом мы можем закопать точку через spm.Этот метод нужно срабатывать по клику.Некоторые люди спросят, а что если произойдет событие наведения, и есть еще какие-то события.
Во-первых, вы можете открыть метод для изменения массива _maq. Активно срабатывает, когда происходит событие, не связанное с кликом.
Во-вторых, сотрудничайте с здесь, в файле аналитики
Вы можете настроить некоторые правила парсинга в случае.
Hiper
Вот прямое введение в плагин. Моя идея состоит в том, чтобы интегрировать этот плагин в нашу платформу мониторинга. Во-первых, давайте посмотрим, что это за плагин.
Портал:Hiper
Он может рассчитывать некоторые, "скорость" веб-сайта. Это очень полезно для оптимизации проектов и оптимизации сжатия, и эти данные также могут быть интегрированы в нашу платформу мониторинга.
END
В следующей статье платформы мониторинга текущая идея состоит в том, чтобы написать следующие пункты
- Сбор аномальной информации
- получение запроса ajax
- Получение информации о производительности
Либо в виде DIY инкапсулировать собственный метод захвата, интегрировать информацию об исключениях и запросить информацию в нашу платформу мониторинга, либо внедрить проекты извне.Преимущество этого метода в том, что он не повлияет на бизнес-логику.Будет смешиваться между собой для легкого обслуживания.
У меня еще есть немного времени в последнее время.Я размышляю над собой.Когда я пишу статью, я всегда думаю об этом долго.Не то, как я хотел написать раньше, эй. Я пришлю тебе точку кипения завтра, отмечает моя идея.
Спасибо вам всем. Увидимся.
Напишу 4 статьи до конца марта соответственно
«Внешняя биржа оптимизации производительности»
«Коммуникация по оптимизации качества внешнего кода»
«Сделай сам платформу для внешнего мониторинга (на)» (эта статья)
«Сделай сам платформу для внешнего мониторинга (ниже)» (может быть отложено до следующего месяца, чтобы написать)
«Обмен вопросами внешней безопасности»
Осадить некоторые знания о процессе разработки в прошлом году. Спасибо.