Конференция раннего чата по интерфейсу, новая отправная точка для развития интерфейса, была проведена совместно с Nuggets. Добавьте WeChat codingdreamer в эксклюзивную внутреннюю группу поддержки конференции и выиграйте на новой стартовой линии.
14-е | Сессия по развитию и продвижению интерфейса, 8-29 будет в прямом эфире, 9 лекторов (Ant Financial Services / Tax Friends и т. д.),Нажмите на меня, чтобы сесть в машину 👉 (Адрес регистрации):
Текст выглядит следующим образом
Эта статья является пятой сессией - специальный лектор по построению системы внешнего мониторинга - безгласный обмен:
Вступительное слово
Всем привет, я Цинъинь из фронтенд-команды Zhengcaiyun. С прошлого года он отвечает за построение системы сбора и анализа поведения пользователей. Я очень рад возможности поделиться с вами нашим опытом построения системы привлечения и анализа пользователей от 0 до 1.
стоимость строительства
Во-первых, зачем нам такая система анализа поведения пользователей?
Коммерческая ценность внедрения данных
Студенты в переполненном отделении хотят более точного позиционирования, частых проблем пользователей, сокращения количества консультаций и повышения удовлетворенности пользователей. Функциональные модули, помогающие пользователям ответить на их вопросы, запускались один за другим, но их эффект невозможно измерить.
Операция хочет знать, какое рекламное место и какоеРесурсные биты более ценны? Кто своиЦелевые клиенты?
Студенты, изучающие продукты и дизайн, хотятУлучшить пользовательский опыт. Разработчики постоянно дорабатывают функциональную версию. Итак, каковы эффекты этих точек оптимизации, о которых мы подумали? Как измерить? все нужноПоддержка индикатора данныхСледующая работа.
Мы будем собирать и анализировать поведение пользователей системы, называемой армиллярной сферой, сервис сбора данных работает полтора года, текущее количество журналов платформы армиллярной сферы достигло 1,6 миллиарда, количество собираемых каждый рабочий день около 10 миллионов, группы интересов переднего плана, созданные в пределах пунктирной линии, от сбора требований, разработки плана этажа, общие затраты на оплату труда составляют 90 дней.
Позже я представлю систему армиллярной сферы, состоящую из четырех частей.Во-первых, это общее введение в ключевую архитектуру, а затем она разделена на три модуля: сбор данных, анализ и применение.
ключевая структура
Общий процесс армиллярной системы можно разделить на три этапа. Сначала данные собираются, затем данные обрабатываются и, наконец, данные раскрываются.
Для поддержки этих трех отделов были реализованы четыре функциональных модуля:
- SDK для сбора данных
- Услуги по обработке и хранению данных
- Плагин Chrome для отображения данных на уровне карьера
- Сайт отображения данных системного уровня
Общая архитектура армиллярной сферы
Общий обзор архитектуры
Прежде всего, давайте посмотрим на общую архитектуру армиллярной сферы.Мы собрали данные с трех терминалов, ПК, H5 и APP.
Два набора SDK используются на стороне ПК и H5 для мониторинга различных событий. Затем отслеживаемые события передаются в службу обработки данных через оставшийся интерфейс и сохраняются в службе журналов Alibaba Cloud. Мы провели тестовую среду и реальную среду, изоляцию данных двух сред. SDK тестовой среды будет обновляться путем согласования кеша, а в реальной строке будет использоваться сильный кеш и контроль версий; из-за огромного объема данных в реальной строке мы будем регулярно хранить исторические данные библиотеки логов для более полутора лет до OSS. Каждый день будут запланированы задачи по фильтрации части данных и сохранению их в базе данных. Кроме того, он будет взаимодействовать со многими внешними системами.
- Система полномочий: в основном контролирует полномочия доступа к сайту армиллярной сферы;
- Система производительности: вывод некоторых часто посещаемых страниц для тестирования производительности;
- Платформа эксплуатации и обслуживания используется для развертывания системы; она будет выполнять некоторое взаимодействие данных с платформой больших данных, мы будем передавать данные о поведении на платформу больших данных, а также получать некоторые бизнес-данные с платформы.
Архитектура системного ключа
Это видно из подробной схемы архитектуры ключевых модулей на рисунке выше. Модуль слева предназначен для ориентированного на пользователя сбора данных о поведении, а модуль справа — для внутренних пользователей; он предоставляет пользователям очень богатую визуализацию данных. В дополнение к визуальному сайту он также предоставляет подключаемые модули Chrome для отображения все большего количества данных. Он также действует как платформа для передачи внешних запросов SQL, экспорта отчетов в Excel и предоставления API для извлечения данных отчета. на основе существующих данных для вторичной разработки.
сбор информации
Сначала поговорим о реализации модуля сбора данных. Мы фиксируем вход и выход страницы, пользовательские клики и события прокрутки, а также некоторые стандартные пользовательские события. Мы можем автоматически собирать события входа на страницу, выхода и прокрутки, щелчка и необходимости пользовательских событий, взаимодействия студентов с интерфейсом и имплантации кода.
Так как же добиться автоматического сбора с нулевым кодом?
- Во-первых, в процессе компиляции проекта в страницу мы вживили ID проекта для проекта и смонтировали головную часть страницы;
- Затем при входе на страницу по пути страницы автоматически генерируется ID страницы и монтируется на узле body.
- Наконец, когда пользователь входит на страницу и покидает страницу, SDK для сбора данных может автоматически получить идентификатор проекта и идентификатор страницы, чтобы найти уникальную страницу, чтобы автоматически сообщать о событиях входа и выхода.
Взяв в качестве примера событие щелчка, точка DOM, которая в данный момент запускает событие щелчка, называется ямой. Узел DOM, завернутый во внешний слой ямы, называется блоком. Эти два должны быть смонтированы с интрузивным кодом.Чтобы снизить стоимость монтажа, мы также предоставляем некоторые инструменты, которые помогут им работать.
На едином сайте мы предоставляем функцию покупки точечной заявки.После того, как заявка будет завершена, нажмите, чтобы сгенерировать код, но место и идентификатор для установки будут указаны сразу же в деталях.Разработчику нужно только вставить сгенерированный код на место, где точку нужно закопать.
Кроме того, мы говорили о построении в прошлом сеансе. Страницы, сгенерированные системой построения, также будут автоматически имплантировать эти идентификаторы местоположения. После того, как мы получим эти данные, мы можем начать полный отчет.
Анализ данных приобретения
На картинке выше показаны некоторые данные, которые мы сообщим. Координаты по оси xy здесь можно использовать для создания тепловой карты области щелчка пользователя, отражающей основное внимание пользователя на странице. Как показано ниже:
- ОС, разрешение, браузерЭта информация позволяет нам анализировать некоторые основные браузеры основных пользователей текущей платформы, чтобы определить совместимость платформы;
- Если это на стороне приложения, будут некоторые другие данные, такие как версия клиента, модель мобильного телефона и текущие условия сети;
- logTypeклассифицировать события;
- evtЧтобы указать конкретный тип события;
- createTime– время возникновения события, которое можно использовать для последовательной записи последовательности событий;
- utmCntэто позиция триггера, используемая для локализации текущего события на определенном узле dom;
- uuidЭто уникальный идентификатор посетителя. Каждый раз, когда пользователь заходит на страницу, SDK будет искать его в файле cookie. Если нет, мы сгенерируем его и установим постоянный срок действия. Запись IP-адреса пользователя можно проследить до провинции или города пользователя.
- userIdЕго можно связать с **uuid**, чтобы связать бессмысленных посетителей с пользователями платформы для формирования подробных портретов пользователей.
- utmfromМестоположение источника отмечено, а переход по ссылке будет подробно описан позже Это поле используется для объединения ссылок до и после.
- Сообщаемая информация в зеленом поле может быть отнесена к некоторой информации, относящейся к страницам браузера, некоторая информация, связанная с событиями в красном поле, а заглавная буква в синем поле может быть отнесена к информации, связанной с пользователем.
перехват конкретного события
мы будемВсе четыре целевых события делегированы для документированияВсе эти события будут перехвачены до тех пор, пока они срабатывают, но через определенный экран, толькоБудет сообщено о событии, инициированном на цели, которая получила идентификатор ямы и идентификатор блока.. Это делает данные, которые мы собираем, более точными.Если мы не фильтруем здесь, сообщаемые данные станут большими и полными, а объем данных будет особенно большим, поэтому мы переключаем текущую скрытую точку кода на полную скрытую точку, что также затрудняет анализ данных.
Как видно из рисунка выше, при первом входе на страницу по умолчанию будет отправлен push-запрос. Также будет отправляться push-запрос при каждом нажатии, но его классификация другая.
Это связано с тем, что в процессе ухода отправка HTTP-запроса обычно отменяется, и мы используем sendBeacon как метод для обеспечения отправки данных.Он может инициировать HTTP-запрос в обработчике события unload или beforeunload для отправки данных, что обеспечивает что наша просьба покинуть страницу зарегистрирована.
В отчетах по данным мы также используемЭтикеткаглавным образом дляОбеспечьте совместимость браузера.因为目前，IE 是不支持 sendBeacon 方法的，而我们平台还有一部分用户还在使用 IE，我们也在持续的关注 IE 的使用比例，所以这部分的数据也会很重要。为了能收集到更多 IE 的使用数据，我们会先判断 sendBeacon 方法是否可用，不可使用的时候，会使用**
**进行，请求的发送。而 cors 是我们最常见的一种跨域请求发送的方式，它能够使用 post 的请求，让我们批量上报的一些数据能够不超出长度的限制，能够成功发送。
В дополнение к возможности отправлять некоторые отчетные данные в одном измерении, нам также необходимо, чтобы отчетные данные могли последовательно соединить весь процесс просмотра пользователем. Одним из самых распространенных способов является переход по ссылкам.
Некоторые люди могут спросить, почему бы не использовать ссылку для подключения всего процесса? Если возможно, но его измерение все еще слишком толстое. Он может зайти только на исходную страницу и не может записать, с какой позиции на странице исходит.
- Когда мы заходим на страницу, мы генерируемУникальный идентификатор текущей страницы входа
- Когда пользователь нажимает на ссылку, мы подпишем текущий идентификатор блока светодиодной страницы проекта и позицию в яме текущей ссылки.
- Наконец, 5 идентификаторов тегов, сгенерированных при создании страницы, объединяются в значение uTM.После перехода страницы SDK получит его из URL-адреса страницы, и значение uTM будет сообщено.
Таким образом, мы можем подтвердить, что источником текущей страницы является переход по ссылке из какой позиции на предыдущей странице, а также сделать поведение щелчка ссылки автоматически собираемым событием. ID блока, под нимВсе клики по ссылкам записываются и используются для цепочки всего процесса..
анализ данных
В части обработки данных мы используем сервис LOG от Alibaba Cloud.Одним из его больших преимуществ является то, что он может предоставить интерфейс потребления журналов в реальном времени, а методы запросов также очень богаты; он может добавлять индексы в реальном времени; в настоящее время может удовлетворить большинство наших запросов.
В процессе анализа данных очень важным моментом является то, как преобразовать данные, которые мы собираем, в понятные показатели.
Один из наших основных процессов на приведенном выше рисунке — анализ данных, сначала построение индикаторов, а затем получение данных точек, которые необходимо проанализировать, затем выполнение анализа данных и, наконец, применение данных к фактической сцене.
По собранным ранее данным мы можем легко рассчитать некоторые базовые показатели PV, UV, количества кликов и экспозиций страницы, но как преобразовать их в воронкообразную модель?
То есть сшить эти исходные данные. В качестве примера возьмем процесс кредитования на нашей платформе:
- После входа на страницу сведений о приложении мы можем использовать UV, входящий на страницу, в качестве первых данных.
- Нажмите «Применить сейчас», чтобы открыть всплывающее окно соглашения, щелкните количество людей в качестве вторых данных и т. д., оно будет собрано в одно.модель воронки
- Мы можем рассчитать процент количества каждого шага по отношению к предыдущему шагу, который представляет собой неупорядоченную воронку;
- Предполагая, что некоторые пользователи могут войти непосредственно с третьего шага, могут быть случаи, когда процент превышает 100%;
- Если это упорядоченный воронка, он будет отфильтрован на основе пользовательского измерения. Мы будем фильтровать пользователями каждого шага с фронта к спине, указываем, что мы будем держать только тех пользователей, которые вошли только на последний шаг в порядке с первого Часть, и не будут некоторыми пользователями, которые входили в середину, считаются. Таким образом, процент преобразования должен быть меньше или равен 100%, и данные более ценны для справки;
Вот сценарий установки доверительного интервала
- Продолжительность пребывания на странице на самом деле представляет собой разницу во времени между входом на страницу и уходом со страницы.В самом быстром случае пользователь покидает страницу за 1 с.
- Однако также возможно, что пользователь прервал операцию в середине, но не закрыл окно, что привело к очень длительному времени пребывания;
- В случае относительно небольшого количества выборок такие специальные данные могут увеличить среднее время доступа к странице, сделав среднее время доступа более 4 ч. В это время среднее время доступа может потерять свое эталонное значение.
- Медиана здесь относится к сортировке продолжительности доступа пользователя от малой к большой и взятию среднего значения, чтобы получить минуты 22 и секунды 8. В это время медиана может лучше отражать фактическое использование страницы;
Итак, как сделать средний промежуток времени, у него есть ценность?
Мы можем установить доверительный интервал, чтобы исключить пользователей, которые используют страницу более 5 часов или 8 часов в зависимости от конкретной ситуации на странице, а затем посмотреть среднее время посещения всей страницы или использовать гистограмму для просмотра общее распределение и тенденция продолжительности времени.
Приложение данных
Текущая модель анализа в основном делится наАнализ событий, анализ страниц, анализ конверсий и анализ пользователей., который также разделен на 10 видов небольших индикаторов, а также предоставляет инструменты, помогающие создавать индикаторы в пользовательских настройках;
- анализ событийЭто основа анализа поведения пользователя также является наиболее распространенной функцией.частота, распределение, интервал, с помощью анализа событий можно создавать различные аналитические отчеты. Основываясь на данных о поведении каждой страницы, страница оптимизирует макет целевой страницы и повышает ее привлекательность. Анализ тепловой карты, который помогает нам глубже визуализировать поведение пользователя.Анализируйте внимание пользователей к контенту и функциям.
- Анализ конверсииЭто самая важная модель анализа поведения пользователей.Благодаря анализу конверсии можно найти путь конверсии и воронку поведения пользователя, а также повысить общий коэффициент конверсии платформы. Показатели конверсии существуют на протяжении всего пути от обращения к пользователю до завершения конверсии.
- Анализ пользователейможет нам очень хорошо помочьОпределить целевую группу пользователей продукта, поведенческие привычки пользователя и освоить характеристики активности и удержания пользователя., а усовершенствованные пользовательские операции могут быть достигнуты за счет группировки пользователей.
С точки зрения одной страницы мы можем получить множество измерений данных, которые можно отобразить на странице с помощью подключаемых модулей;
Это информационная панель для просмотра настраиваемых основных показателей и отчетов в режиме реального времени.Овладение ключевыми индикаторами в режиме реального времени, который помогает пользователям обнаруживать проблемы в режиме реального времени.
Операционная система, доля браузера, вы можете нажать Crutinize;
- количество посещений, количество посетителей
- Тепловая карта: преобразуйте координаты и разрешение, чтобы получить тепловую карту.
- Анализ пути: вы можете увидеть источник и пункт назначения;
- Вот функции для пользовательских настроек: для создания событий и воронок;
разное
Армиллярная сфера — относительно простой продукт для сбора и анализа данных, и за ним стоит множество точек расширения.
Если компания не нуждается на этом этапе развития такой самостроительной системы, но имеет возможность обслуживать такие потребности, вы также можете рассмотреть ряд сторонних продуктов, если для соображений безопасности платформы, они также часть поддержки локализованного развертывания;
конец
Q&A