предисловие
Встраивание — распространенный метод сбора данных для анализа веб-сайтов. В основном мы используем его для сбора данных о поведении пользователей (таких как пути доступа к страницам, какие элементы нажимаются) для анализа данных, чтобы студенты, изучающие операции, могли более разумно составить план работы. Сейчас на рынке много сторонних поставщиков услуг по отслеживанию, таких как Baidu Statistics, Youmeng,rowingIO и др. С ними должен быть знаком каждый.В большинстве случаев все просто ими пользуются.Недавно я изучал веб-трекинг. вы хотите знать больше.
Три типа существующих закопанных точек
Анализ поведения пользователей — это большая система, типичная платформа данных. Он состоит из нескольких модулей: сбор данных о пользователях, моделирование и анализ поведения пользователей, отображение визуального отчета. Существующие схемы сбора скрытых точек можно условно разделить на три типа: ручные скрытые точки, визуализированные скрытые точки и отсутствие скрытых точек.
- Похоронен вручную Скрытие кода вручную более распространено.Бизнес-партнер, которому необходимо вызвать точку скрытия, вызывает метод скрытия точки, в которой необходимо собрать данные. Преимущество в том, что поток управляем, бизнес-сторона может собирать данные в любом месте и на любой сцене по мере необходимости, а собранная информация полностью контролируется бизнес-стороной. Этот пункт также имеет некоторые недостатки: бизнес-сторона должна написать мертвый метод, а если схема сбора изменится, бизнес-сторона также должна изменить код и опубликовать его заново.
- Визуализируйте закопанные точки Тем не менее, точки захоронения - это тенденция захоронения точек в последние годы, и многие крупные производители собственных точек захоронения данных также начали это делать. Преимущество заключается в том, что бизнес-сторона имеет меньшую рабочую нагрузку, а недостаток заключается в том, что ее технически сложно продвигать и внедрять (основной предпосылкой является спецификация внешнего кода бизнес-стороны). Многие страницы действий Alibaba управляются с помощью конфигурации перетаскивания визуального интерфейса, и эти элементы управления действиями имеют уникальные идентификаторы. Настроив фон скрытой точки, связав элемент с собираемым событием, можно автоматически сгенерировать код скрытой точки и встроить его в страницу.
- нет захоронения Отсутствие скрытой точки заключается в том, что внешний интерфейс автоматически собирает все события, сообщает данные о скрытой точке, а серверная часть фильтрует и вычисляет полезные данные.Преимущество заключается в том, что внешнему интерфейсу нужно только загрузить сценарий скрытой точки. Недостатком является то, что трафик и собранные данные слишком велики, а производительность сервера находится под большим давлением.Основной GrowingIO является эта реализация.
Временно отказываемся от реализации визуальных скрытых точек, в手动埋点а также无埋点Пробовал на вышеперечисленном, ниже для удобства описания буду называть скрипт приобретения SDK.
Подумайте над несколькими вопросами
При разработке скрытых точек необходимо учитывать много контента, следуя принципу непростого написания кода, перед разработкой мы думаем о следующих вопросах.
- Какой контент мы хотим собирать и какие соглашения об интерфейсе сбора мы должны заключить?
- Как деловая сторона называет наш сценарий сбора
- Точки захоронения вручную: SDK должен инкапсулировать метод для вызова бизнес-стороны, а бизнес-сторона может управлять методом передачи параметров.
- Нет скрытых точек: учитывая нагрузку на сервер из-за объема данных, нам необходимо настроить коммутатор для отсутствия скрытых точек и какие элементы можно настроить для сбора не скрытых точек.
- Идентификация пользователя: как отличить и связать собранные данные пользователей-туристов и зарегистрированных пользователей
- Идентификатор устройства: когда пользователь заходит на веб-страницу через браузер, идентификатор устройства должен храниться в браузере. Один и тот же пользователь заходит на разные бизнес-сайты, и идентификатор устройства должен оставаться неизменным. Как этого добиться?
- Одностраничные приложения: есть ли разница между сбором данных популярных одностраничных приложений и обычных веб-страниц?
- Гибридное приложение: как мы взаимодействуем с гибридным приложением приложения и h5
Какой контент мы хотим собирать и какие соглашения об интерфейсе сбора мы должны заключить?
На первом этапе мы впервые реализовали сбор основных показателей PV (то есть просмотров страниц или кликов), UV (несколько посещений одним и тем же посетителем в течение дня), кликов и путей доступа пользователей. Конверсия трафика уточненного анализа должна быть связана с бизнесом и должна быть согласована со стороной анализа данных Мы оставляем за собой расширение. Таким образом, наш интерфейс коллекции должен следовать следующим соглашениям.
{
"header":{ // HTTP 头部
"X-Device-Id":" 550e8400-e29b-41d4-a716-446655440000", //设备ID，用来区分用户设备
"X-Source-Url":"https://www.baidu.com/", //源地址，关联用户的整个操作流程，用于用户行为路径分析，例如登录，到首页，进入商品详情，退出这一整个完整的路径
"X-Current-Url":"", //当前地址，用户行为发生的页面
"X-User-Id":"",//用户ID，统计登录用户行为
},
"body":[{ // HTTP Body体
"PageSessionID":"", //页面标识ID，用来区分页面事件，例如加载和离开我们会发两个事件，这个标识可以让我们知道这个事件是发生在一个页面上
"Event":"loaded", //事件类型，区分用户行为事件
"PageTitle": "埋点测试页", //页面标题，直观看到用户访问页面
"CurrentTime": “1517798922201”, //事件发生的时间
"ExtraInfo": {
} //扩展字段，对具体业务分析的传参
}]
}
Выше приведен общий интерфейс сбора событий, который мы согласовали сейчас.Переданные параметры в основном будут меняться в зависимости от различных событий сбора. Однако во всем поведении доступа пользователя устройство пользователя не изменится. Если вы хотите собирать информацию об устройстве, вы можете повторно назначить интерфейс для отправки информации об устройстве до начала сбора всей информации, чтобы избежать повторного сбора данных о событии. интерфейс сбора фиксированных данных.
{
"header":{ // HTTP 头部
"X-Device-Id" ："550e8400-e29b-41d4-a716-446655440000" , // 设备id
},
"body":{ // HTTP Body体
"DeviceType": "web" , //设备类型
"ScreenWide" : 768 , // 屏幕宽
"ScreenHigh": 1366 , // 屏幕高
"Language": "zh-cn" //语言
}
}
Как деловая сторона называет наш сценарий сбора
Точка захоронения должна сделать так, чтобы у звонящего бизнес-партнера была как можно меньше работы, а лучше вообще ничего, 😁, но это немного сложно реализовать. Решение, которое мы приняли, состоит в том, чтобы позволить бизнес-стороне обращаться к нашему SDK через сценарий скрипта в коде.Бизнес-стороне нужно только настроить некоторые необходимые параметры для настройки встроенной точки (👆Управление трафиком без встроенной точки, о котором мы упоминали), а дальше все можно собирать базовые данные не делая этого.
(function() {
var collect = document.createElement('script');
collect.type = 'text/javascript';
collect.async = true;
collect.src = 'http://collect.trc.com/index.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(collect, s);
})();
//用户自定义要进行无埋点采集的元素，如果不进行无埋点采集，可以不配置
var _XT = [];
_XT.push(['Target','div']);
Ручное закапывание: SDK
Если бизнес-стороне необходимо собрать больше данных, настроенных для бизнеса, она может вызвать наш открытый метод для их сбора.
//自定义事件
sdk.dispatch('customEvent',{extraInfo:'自定义事件的额外信息'})
Ассоциация посетителей и пользователей
Мы используем userId в качестве идентификатора пользователя. Пользователи одного и того же устройства переключаются с гостевого пользователя на вошедшего в систему пользователя. Если мы хотим связать их, нам нужен идентификатор устройства для ассоциации.
идентификатор веб-устройства
Когда пользователь заходит на веб-страницу через браузер, идентификатор устройства должен храниться в браузере.Один и тот же пользователь заходит на разные бизнес-сайты, а идентификатор устройства должен оставаться неизменным. Что касается хранилища веб-переменных, первое, о чем мы думаем, это cookie, sessionStorage, localStorage, но все эти три метода хранения связаны с доменным именем ресурса доступа. Мы не можем создавать новый отпечаток устройства при каждом посещении веб-сайта, поэтому нам нужен способ обмена отпечатками устройств между доменами.
Решение, о котором мы подумали, состоит в том, чтобы загрузить статическую страницу через вложенные iframe, сохранить идентификатор устройства в доменном имени, загруженном в iframe, и получить идентификатор устройства через междоменные общие переменные.Статус события, вызов инкапсулированной функции обратного вызова для данных обработка, конкретный способ реализации
//web 应用，通过嵌入 iframe 进行跨域 cookie 通讯，设置设备id,
collect.setIframe = function () {
var that = this
var iframe = document.createElement('iframe')
iframe.id = "frame",
iframe.src = 'http://collectiframe.trc.com' // 配置域名代理，目的是让开发测试生产环境代码一致
iframe.style.display='none' //iframe 设置的目的是用来生成固定的设备id，不展示
document.body.appendChild(iframe)
iframe.onload = function () {
iframe.contentWindow.postMessage('loaded','*');
}
//监听message事件，iframe 加载完成，获取设备id ，进行相关的数据采集
helper.on(window,"message",function(event){
that.deviceId = event.data.deviceId
if(event.data && event.data.type == 'loaded'){
that.sendDevice(that.getDevice(), that.deviceUrl);
setTimeout(function () {
that.send(that.beforeload)
that.send(that.loaded)
},1000)
}
})
}
iframe взаимодействует с SDK
function receiveMessageFromIndex ( event ) {
getDeviceInfo() // 获取设备信息
var data = {
deviceId: _deviceId,
type:event.data
}
event.source.postMessage(data, '*'); // 将设备信息发送给 SDK
}
//监听message事件
if(window.addEventListener){
window.addEventListener("message", receiveMessageFromIndex, false);
}else{
window.attachEvent("onmessage", receiveMessageFromIndex, false)
Если вы хотите знать, вы можете прочитать мой другой блогОтпечатки пальцев веб-браузера являются общими для разных доменов
Одностраничные приложения: есть ли разница между сбором данных популярных одностраничных приложений и обычных веб-страниц?
Мы знаем, что одностраничные приложения загружают все страницы без обновления, поэтому мы находимся на странице
跳转Обработка и наши обычные страницы будут отличаться. Подключаемый модуль маршрутизации одностраничного приложения использует метод изменения записи просмотра пользователем без обновления, pushState и replaceState.
Объект истории окна предоставляет два метода, которые могут изменять запись просмотра пользователя без обновления, pushSate и replaceState. Отличие pushState заключается в том, что запись доступа добавляется после страницы доступа пользователя, а replaceState напрямую заменяет текущую запись доступа, поэтому мы Пока метод истории переписывается, а наш метод сбора выполняется до выполнения метода, может быть реализован сбор событий перехода на страницу одностраничного приложения.
// 改写思路：拷贝 window 默认的 replaceState 函数，重写 history.replaceState 在方法里插入我们的采集行为，在重写的 replaceState 方法最后调用，window 默认的 replaceState 方法
collect = {}
collect.onPushStateCallback : function(){} // 自定义的采集方法
(function(history){
var replaceState = history.replaceState; // 存储原生 replaceState
history.replaceState = function(state, param) { // 改写 replaceState
var url = arguments[2];
if (typeof collect.onPushStateCallback == "function") {
collect.onPushStateCallback({state: state, param: param, url: url}); //自定义的采集行为方法
}
return replaceState.apply(history, arguments); // 调用原生的 replaceState
};
})(window.history);
Эту часть также сложнее представить, если вы хотите узнать больше, вы можете прочитать мой другой блог.Что нужно знать о принципе реализации одностраничной маршрутизации
Гибридное приложение: как мы взаимодействуем с гибридным приложением приложения и h5
Большинство приложений теперь не являются чисто нативными приложениями, а смешанное приложение app и h5 теперь является основным.
Для чистого веб-сбора данных мы считаем, что данные внешнего хранилища легко потерять, и мы используем интерфейс сбора для передачи собранных данных каждый раз, когда инициируется событие. Учитывая, что мобильные телефоны многих пользователей сейчас контролируются программным обеспечением трафик-стюардов, если h5 все еще собирает данные в приложении и передает их на сервер, очень вероятно, что трафик-стюарды обнаружат это и предупредят пользователей, чтобы пользователи не больше доверять вашему приложению, поэтому мы передаем данные на сторону приложения, когда пользователь работает, и сохраняем их в приложении. Когда пользователь переводит приложение в фоновый режим, оно упаковывается и передается на сервер через SDK на стороне приложения, мы инкапсулируем адаптер для метода, предоставляемого приложением.
// app 与 h5 混合应用，直接将数信息发给 app
collect.saveEvent = function (jsonString) {
collect.dcpDeviceType && setTimeout(function () {
if(collect.dcpDeviceType=='android'){
android.saveEvent(jsonString)
} else {
window.webkit && window.webkit.messageHandlers ? window.webkit.messageHandlers.nativeBridge.postMessage(jsonString) : window.postBridgeMessage(jsonString)
}
},1000)
}
Реализовать идеи
Размышляя над приведенными выше вопросами, мы примерно получили некоторые идеи о реализации скрытой точки. Мы используем карту разума, чтобы восстановить то, что мы собираемся сделать. Не забудьте увеличить изображение, может быть неясно, если это слишком мало.
- Нам нужно раскрыть методы, которые будут вызываться бизнес-стороной.
Давайте посмотрим на реализацию нескольких основных кодов
инструментальный метод
Мы определили несколько инструментов и методов для улучшения индекса счастья развития 😝
var helper = {};
// 生成一个唯一的标识，pageSessionId （用这个变量来关联开始加载、加载完成、离开页面的事件，计算出页面加菜时间，停留时间）
helper.uuid = function(){}
// 元素绑定事件监听，兼容浏览器到IE8
helper.on = function(){}
//元素移除事件监听的适配器函数，兼容浏览器到IE8
helper.remove = function(){}
//将json转为字符串,事件传输的参数类型转化
helper.changeJSON2Query = function(){}
//将相对路径解析成文档全路径
helper.normalize = function(){}
Логика приобретения
var collect = {
deviceUrl:'http://collect.trc.com/rest/collect/device/h5/v1',
eventUrl:'http://collect.trc.com/rest/collect/event/h5/v1',
isuploadUrl:'http://collect.trc.com/rest/collect/isupload/app/v1',
parmas:{ ExtraInfo:{} },
device:{}
};
//获取埋点配置
collect.setParames = function(){}
//更新访问路径及页面信息
collect.updatePageInfo = function(){}
//获取事件参数
collect.getParames = function(){}
//获取设备信息
collect.getDevice = function(){}
//事件采集
collect.send = function(){}
//设备采集
collect.sendDevice = function(){}
//判断才否采集，埋点采集的开关
collect.isupload = function(){
1. 判断是否采集，不采集就注销事件监听（项目中区分游客身份和用户身份的采集情况，这个方法会被判断两次）
2. 采集则判断是否已经采集过
a.已经采集过不做任何操作
b.没有采集过添加事件监听
3. 判断是 混合应用还是纯 web 应用
a.如果是web 应用，调用 collect.setIframe 设置 iframe
b.如果是混合应用 将开始加载和加载完成事件传输给 app
}
//点击事件处理函数
collect.clickHandler = function(){}
//离开页面的事件处理函数
collect.beforeUnloadHandler = function(){}
//页面回退事件处理函数
collect.onPopStateHandler = function(){}
//系统事件初始化，注册离开事件，浏览器后退事件
collect.event = function(){}
//获取记录开始加载数据信息
collect.getBeforeload = function(){}
//存储加载完成，获取设备类型，记录加载完成信息
collect.onload = function(){
1. 判断cookie是否有存设备类型信息，有表示混合应用
2. 采集加载完成时间等信息
3. 调用 collect.isupload 判断是否进行采集
}
//web 应用，通过嵌入 iframe 进行跨域 cookie 通讯，设置设备id
collect.setIframe = function(){}
//app 与 h5 混合应用，直接将数信息发给 app,判断设备类型做原生方法适配器
collect.saveEvent = function(){}
//采集自定义事件类型
collect.dispatch = function(){}
//将参数 userId 存入sessionStorage
collect.storeUserId = function(){}
//采集H5信息,如果是混合应用，将采集到的信息发送给 app 端
collect.saveEventInfo = function(){}
//页面初始化调用方法
collect.init = function(){
1. 获取开始加载的采集信息
2. 获取 SDK 配置信息，设备信息
3. 改写 history 两个方法，单页面应用页面跳转前调用我们自己的方法
4. 页面加载完成，调用 collect.onload 方法
}
collect.init(); // 初始化
//暴露给业务方调用的方法
return {
dispatch:collect.dispatch,
storeUserId:collect.storeUserId,
}
расширять
👆Это результат моих исследований за этот период времени.Длина кода относительно велика,поэтому я не буду выкладывать его в блог.Заинтересованные студенты могут добавить меня в WeChat для общения,или оставить сообщение под статьей , Вы также можете высказать свое мнение. , помогите оптимизировать 😝.
Отпечатки пальцев веб-браузера являются общими для разных доменов
Что нужно знать о принципе реализации одностраничной маршрутизации
Какова точка захоронения данных? В чем смысл установки закопанной точки?
Практика бесследного встраивания в интерфейсе Meituan Dianping