предисловие
Сегодняшней утренней статьей поделился Tencent @UncleChen.
Текст начинается здесь~
1. Предпосылки
Я считаю, что многие люди соприкоснулись с концепцией «скрытой точки».Будь то разработка переднего или заднего плана, мы можем использовать эту технологию для получения некоторых оперативных необработанных данных (затраты времени на интерфейс, установку программы / запуск, поведение пользователя и т. д.), а затем анализировать их, чтобы получить некоторые абстрактные показатели (такие как коэффициент удержания, коэффициент конверсии), а затем определить направление работы продукта или оптимизацию кода. В настоящее время в отрасли существует множество известных платформ данных, таких как Google Analytics, Facebook Pixel, Mixpanel, GrowingIO, Zhuge IO, TalkingData, Shence Data и т. д. Эти платформы предназначены исключительно для анализа данных, а некоторые из них служат для конкретных областей, таких как реклама Для мониторинга конверсии предоставляются многосторонние (Android, iOS, Web, апплеты, ReactNative) встроенные SDK и более комплексные услуги BI. За последние два года многие платформы начали продвигать технологию под названием «нет точки захоронения».Давайте возьмем в качестве примера веб-сайт, чтобы раскрыть его тайну.
Во-вторых, что такое не место захоронения?
«Без точек отслеживания» на некоторых зарубежных платформах называется Codeless Tracking.Как следует из названия, можно написать «меньше» кода отслеживания. «Скрытие кода» обычно требует, чтобы разработчики писали код, отслеживали события, генерируемые элементом html, а затем вызывали интерфейс для передачи данных для отправки данных. Невстроенные точки могут быть настроены нетехническим персоналом (таким как операции, продукты) в визуальных инструментах, а затем поведение, сгенерированное в элементах html, может быть передано в фоновый режим. Ниже приведен скриншот визуализатора платформы Mixpanel.
В этом инструменте вам нужно сначала ввести URL-адрес страницы.После загрузки страницы появится панель инструментов для визуальной настройки. Нажмите, чтобы создать событие, вы можете войти в режим выбора элемента, щелкните элемент на странице (например, кнопку, эти элементы) с помощью мыши, вы можете установить имя события (например, ТЕСТ) во всплывающем окне. вверх диалоговое окно. После сохранения этой конфигурации, если страница просматривается в браузере, при нажатии только что настроенной кнопки в фоновом режиме будет сообщено о событии TEST. Мы также можем настроить некоторые свойства при сообщении о событии TEST, эти свойства также выбираются с помощью мыши на странице, а затем сохраняются.
Увидев это, в первую очередь, с уровня продукта, мы имеем более конкретное понимание того, что делает «без скрытой точки». установите этот элемент, чтобы генерировать данные о поведении, о которых необходимо сообщать. Но есть еще очень важный момент, о котором необходимо упомянуть: для того, чтобы «без скрытых точек» работало, в страницу должен быть встроен кусок базового кода JS SDK, но при этом нет необходимости вызывать конкретный интерфейс представления данных SDK.
Таким образом, ключом к технологии «без скрытых точек» является:
-
Запустите инструмент визуальной настройки и сохраните конфигурацию.
-
Как базовый код SDK сообщает о поведении в соответствии с конфигурацией?
Ниже описано, как получить эти два ключа.
3. Ключевые технологии
1. Базовый код
Как и при встраивании кода, чтобы «отсутствие встраивания» работало, на веб-странице также должен быть «базовый код».
<!-- start Mixpanel --><script type="text/javascript">(function(e,a){if(!a.__SV){var b=window;try{var c,l,i,j=b.location,g=j.hash;c=function(a,b){return(l=a.match(RegExp(b+"=([^&]*)")))?l[1]:null};g&&c(g,"state")&&(i=JSON.parse(decodeURIComponent(c(g,"state"))),"mpeditor"===i.action&&(b.sessionStorage.setItem("_mpcehash",g),history.replaceState(i.desiredHash||"",e.title,j.pathname+j.search)))}catch(m){}var k,h;window.mixpanel=a;a._i=[];a.init=function(b,c,f){function e(b,a){var c=a.split(".");2==c.length&&(b=b[c[0]],a=c[1]);b[a]=function(){b.push([a].concat(Array.prototype.slice.call(arguments,0)))}}var d=a;"undefined"!==typeof f?d=a[f]=[]:f="mixpanel";d.people=d.people||[];d.toString=function(b){var a="mixpanel";"mixpanel"!==f&&(a+="."+f);b||(a+=" (stub)");return a};d.people.toString=function(){return d.toString(1)+".people (stub)"};k="disable time_event track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user".split(" ");for(h=0;h<k.length;h++)e(d,k[h]);a._i.push([b,c,f])};a.__SV=1.2;b=e.createElement("script");b.type="text/javascript";b.async=!0;b.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?MIXPANEL_CUSTOM_LIB_URL:"file:"===e.location.protocol&&"//cdn4.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn4.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn4.mxpnl.com/libs/mixpanel-2-latest.min.js";c=e.getElementsByTagName("script")[0];c.parentNode.insertBefore(b,c)}})(document,window.mixpanel||[]);mixpanel.init("46042714e64a7536dde6f02af1aec923");</script><!-- end Mixpanel -->скопировать кодВыше приведен базовый код платформы Mixpanel.Базовый код разных платформ похож.Это сжатый js-код в виде IIFE.После завершения выполнения в голову вставляется новый тег скрипта для асинхронной загрузки , Настоящий основной код SDK готов к работе. Следовательно, базовый код не может сообщать о поведении в соответствии с конфигурацией, а базовый код загружает «более крупный» основной код SDK, который является реальной реализацией функций SDK.
Преимущество этого заключается в том, что базовый код очень короткий, он не повлияет на производительность веб-страницы при загрузке, а обновление основного кода SDK не требует от пользователей обновления этого базового кода.
2. Уникальный идентификатор страницы
При настройке поведения элемента необходимо однозначно идентифицировать страницу, чтобы гарантировать, что конфигурация страницы A не будет распространена на страницу B и не приведет к тому, что страница B будет выполнять поведение, настроенное на странице A. В Интернете страница идентифицируется по URL-адресу. URL-адрес состоит из протокола, домена, порта, пути и параметров. При сохранении конфигурации параметры URL-адреса должны быть извлечены и сохранены. Позиция параметра URL может быть изменена, например, urlA (http://abcom/c.html?pa=1&pb=2) и urlB (http://abcom/c.html?pb=2&pa=1). Хотя urlA !== urlB, но на самом деле это одна страница.
3. Уникальный идентификатор элемента
После уникальной идентификации страницы следующим шагом является уникальная идентификация элементов на странице, чтобы убедиться, что элемент A1, настроенный на странице A, может быть найден пакетом SDK, чтобы отслеживать генерируемые им события.
В html элементы организованы деревом DOM.Если вы начнете с элемента A1, запишите его родителя и его индекс в parent вплоть до тела корневого узла, то вы можете получить единственный элемент A1 в дереве DOM.
Элементы HTML также имеют множество атрибутов, таких как класс CSS и идентификатор, которые можно использовать для поиска элементов. С помощью инструментов разработчика Chrome вы можете видеть, что инструмент визуализации Mixpanel использует библиотеку https://github.com/Autarc/optimal-select для создания уникального идентификатора элемента при настройке элемента. А еще есть такие библиотеки, как https://github.com/rowthan/whats-element на Github, которые тоже могут генерировать уникальные идентификаторы для элементов в DOMTree.
Кроме того, есть платформы, которые используют xpath при идентификации элементов, что тоже является идеей.
4. Как найти элементы
Как упоминалось выше, элемент может иметь уникальный идентификатор, поэтому с уникальным идентификатором вы можете использовать его принцип для поиска этого элемента. Полезным API является document.querySelector(), который находит соответствующий элемент на основе селекторов CSS. Кроме того, в соответствии с методом идентификации элемента вы также можете использовать document.getElementById() и document.getElementByName() для поиска элемента.
Здесь необходимо подчеркнуть, что если страница будет изменена после завершения настройки, что приведет к изменению дерева DOM, уникальный идентификатор элемента, который необходимо отслеживать, также может измениться. Весьма вероятно, что элемент не может быть найден в соответствии с предыдущей конфигурацией, или элемент, который мы хотим отслеживать, не найден, что приводит к значительному изменению количества генерируемых событий. Для стабильности и точности данных должны быть соответствующие контрольные сигналы тревоги для обработки этого случая и запроса пользователя на перенастройку страницы. Лично я считаю, что это самый большой недостаток отсутствия захоронения.
5. Подсветка и визуальное взаимодействие при маркировке элементов
Это относительно подробный момент.На самом деле, те, кто знаком с js, знают, что существует бесчисленное множество способов добиться эффекта наведения, когда мышь перемещается по элементу.После нажатия на элемент появится диалоговое окно, позволяя пользователю вводить информацию о конфигурации. так просто. Но я хочу сказать, что как только мы реализуем интерактивный интерфейс инструмента визуализации, динамически добавляя элементы на страницу, это может разрушить исходную структуру дерева DOM страницы. В результате возникают ошибки при генерации уникального идентификатора элемента, поэтому здесь необходимо хорошо обработать его, чтобы гарантировать, что сгенерированный идентификатор элемента не будет затронут.
Я видел, что Mixpanel использует CustomElement и ShadowDOM и реализует все функции инструмента визуализации с помощью пользовательского веб-компонента.Хотя в настоящее время только Chrome поддерживает веб-компонент, это действительно немного сложно. . Такие пользовательские элементы и взаимодействия не будут влиять на DOM веб-страницы пользователя. Конечно, если ваш инструмент визуализации реализован очень легко, например, вы просто помещаете веб-страницу пользователя в iframe, а большая часть взаимодействия обрабатывается родительской страницей iframe, его также можно настроить с минимальным ущербом. .
6. Как управлять переходом на страницу в инструменте конфигурации
При входе в состояние визуальной конфигурации мы можем позволить пользователю щелкнуть элемент, а затем открыть всплывающее диалоговое окно, чтобы пользователь мог настроить элемент. На данный момент, что, если поведение щелчка самого элемента является переходом на страницу? Что нам делать?
По сути, это вопрос дизайна взаимодействия. В инструменте визуальной настройки должно быть два основных взаимодействия. Один из них — позволить пользователю выбрать элемент и настроить его, другой — позволить пользователю активировать исходное поведение страницы.
Зачем второе взаимодействие? Потому что наш инструмент должен поддерживать пользователей для визуальной настройки вторичных страниц, верно? Другими словами, на странице пользователя может появиться диалоговое окно, а в диалоговом окне есть кнопка, пользователь может следить за этой кнопкой и настраивать ее, верно? Проще говоря, это исходное поведение щелчка на пользовательской странице, которое может вызвать изменения в структуре страницы, такие как переходы, всплывающие диалоговые окна на странице и т. д.
Тогда проблему легко решить.Помимо кликов, лучше спроектировать взаимодействие, поддерживающее исходное поведение кликов на веб-странице пользователя. Используйте «щелчок правой кнопкой мыши» или «Shift+щелчок» и т. д. В любом случае, не взаимодействуйте с веб-страницей по умолчанию так, чтобы это могло привести к конфликту.
Наконец, позвольте мне упомянуть, что я не понял, как предотвратить скачок страницы, когда пользователь щелкает. Позже я узнал, что поток событий DOM делится на три стадии: захват, цель и всплытие. Таким образом, чтобы избежать щелчка пользователя для создания перехода на страницу, добавьте прослушиватель к документу на этапе захвата, чтобы перехватить продолжающееся распространение этого события.
Простой пример кода выглядит следующим образом:
document.addEventListener('click', e => { // 如果是按住shift的点击，那么保持原有的行为 if (e.shiftKey) { return; } // 如果是单纯的点击，那么拦截分发 e.preventDefault(); e.stopImmediatePropagation(); // 获取元素的唯一标识，然后让用户进行配置等等 this._selectElement(e.target);}, true); // useCapture必须为trueскопировать код4. Резюме
Видно, что «точка безвкусия» не является нулевой вторжением. Веб-страница пользователя все еще необходимо загрузить код SDK (если вы не производителем браузера, вы можете добавить базовый код ввода на веб-страницу на веб-страницу при загрузке веб-страницы). Именно то, что код отчета каждого события поведения не требует, чтобы разработчик вручную пишут, но сконфигурирован оператором с визуальным инструментом, поэтому он «визуализирует док-станцию» может быть более подходящим. Мы знаем, что сбор данных является основой анализа данных и предварительных условий. Сбор данных не является хорошим, а другие вещи являются воздушными павильонами.
Здесь мы можем суммировать преимущества и недостатки технологии «без скрытых точек». Преимущество отсутствия скрытых точек заключается в том, что технические затраты низкие, это очень удобно для пользователя и не требует повторного развертывания, а конфигурация может вступить в силу после завершения настройки. Однако его недостатки также весьма очевидны.Он не обладает гибкостью и глубиной встраивания кода.Он может только собирать данные, видимые невооруженным глазом пользователя, но не может получать данные в памяти, и не может адаптироваться к изменениям в структуре страницы.Поэтому , в реальном производстве, выборочно использовать скрытую бессмысленную технологию, где это уместно.
Говоря немного больше о выборе дизайна продукта и технических решений, может ли продукт поддерживать сбор данных памяти? Конечно, например, «пользовательский анализ» апплета WeChat может поддерживать атрибуты под данными на странице отчета, В это время, хотя это тоже визуальная конфигурация, операторы точно не будут знать имена переменных в код, и разработчики должны быть вовлечены.Просто настройте. Что касается потери данных после изменения структуры страницы, есть также решения, которые можно взломать. Например, бескодовое отслеживание на платформе Mixpanel фактически собирает и сообщает о кликах всех страниц на странице, а затем рассчитывает количество конверсий в фоновом режиме в соответствии с конфигурацией пользователя. Преимущество этого заключается в том, что если пользователь получит предупреждение и изменит конфигурацию после изменения страницы, схема представления данных будет использоваться в полном объеме, поэтому платформа способна отслеживать прошлые данные. Как упоминалось выше, схема доставки согласно конфигурации, поиска и контроля указанных элементов, а затем предоставления данных относится к отчетности по требованию, и ошибка данных не может быть отслежена. Тем не менее, все знают, что сообщать данные в полном объеме слишком недружественно.Объем данных слишком велик, не только интерфейс потребляет много ресурсов, но и возрастает нагрузка на внутреннее хранилище, чтобы выполнить возврат данных, и большая часть сохраненных данных все еще недействительна.Стоимость немного высока.
5. Ссылки Технический анализ скрытых точек JS https://github.com/Autarc/optimal-select https://github.com/rowthan/whats-elementhttps://www.zhihu.com/question/38000812
Об авторе этой статьи: @UncleChen Исходный текст: http://unclechen.github.io/2018/06/24/Раскрытие тайны незакопанной технологии JS/
Наконец, я рекомендую для вас
【Выпуск 833】Как спроектировать систему внешнего мониторинга
[Ошибка 1148] Сделайте интерфейсный мониторинг максимально эффективным