задний план
С развитием Интернета важность данных больше не нужно подчеркивать.Как хорошо выполнять работу по сбору данных — проблема, с которой приходится сталкиваться каждой компании.
Возможны разные варианты сбора данных. Некоторые компании предпочитают использовать сторонние статистические SDK, такие как Umeng, Shence и т. д. Некоторые компании предпочитают внедрять статистические коды в свои продукты для построения системы запросов.Конечно, последнее будет стоить дороже, но преимущество в том, что это ближе к компании.Бизнес.
Технология сокрытия данных
код похоронен
Внедрение кода — это встраивание кода отчетов данных там, где статистика данных необходима для подсчета поведения пользователей.
Преимущество: вы можете очень точно выбрать, когда отправлять данные. Недостатки: Стоимость обслуживания высока, а скрытый код нужно поддерживать при каждом обновлении, иначе данные старой версии не будут собираться с большой вероятностью.
Визуализируйте закопанные точки
Используйте визуальное взаимодействие вместо написания кода, отделяйте основной код от конфигурации и ресурсов и обновляйте конфигурацию и ресурсы через сеть каждый раз, когда вы ее открываете.
Преимущества: Решить проблему высокой стоимости заглубленных точек и высокой стоимости обслуживания. Недостатки: Охват ограничен, и не все элементы управления можно настроить с помощью этой схемы.
нет захоронения
То есть значение полной скрытой точки, без скрытой точки собирает рабочие данные всех элементов управления в максимально возможной степени, а затем выполняет анализ данных в системе.
Преимущества: спрятав все элементы страницы, вы можете получить вероятность кликов по элементам страницы и провести дальнейший анализ. Недостатки: Передача данных и нагрузка на сервер относительно велики.
Конструктивные идеи и основной код
Все же начните с ментальной карты.
самоисполняющийся метод
Убедитесь, что инструмент для захоронения может работать по принципу plug-and-play, а часть данных может автоматически передаваться, пока он загружен. Конкретная реализация выглядит следующим образом:
(function (win, doc) {
var BP = {
// 开放接口代码
};
win.BP = BP;
})(window, document);Таким образом, когда файл js загружается, вы можете напрямую использовать BP глобально для вызова метода инструмента скрытой точки.
Погребенный путь
Используйте встраивание кода для отчета о данных, определите в инструменте:
var BP = {
send: function () {
// 发送数据方法
}
};Передайте ключевой метод действия страницыBP.send()передача.
В то же время, учитывая ситуацию с рендерингом на стороне сервера, страница может быть выведена непосредственно бэкендом. Бэкенд-разработчики также могут добавлять атрибуты непосредственно в теги.bp-data, чтобы реализовать отчеты о данных, когда пользователь выполняет интерактивные операции.
/**
* 埋点，捕获带有bp-data属性的节点点击事件
*/
var buryingPoint = function () {
var attr = 'bp-data';
var evtType = utils.mobile ? 'touchstart' : 'mousedown';
utils.addEvent(doc, evtType, function (evt) {
var target = evt.srcElement || evt.target;
while (target && target.parentNode) {
if (target.hasAttribute(attr)) {
BP.send();
break;
}
target = target.parentNode;
}
});
};Чтобы принять во внимание как ПК, так и мобильные браузеры,utils.addEventОн разработан как метод, который может прослушивать события в разных браузерах. Конкретный метод реализации выглядит следующим образом:
var utils = {
/**
* 跨浏览器事件侦听
*/
addEvent: function () {
if (doc.attachEvent) {
return function (ele, type, func) {
ele.attachEvent('on' + type, func);
};
} else if (doc.addEventListener) {
return function (ele, type, func) {
ele.addEventListener(type, func, false);
};
}
}()
}сбор информации
Помимо бизнеса, данные, которые обычно необходимо учитывать, — это uv и pv, а иногда необходимо подсчитать время, в течение которого страница остается. На основе этих основных потребностей необходимо собрать следующие данные:
- Информация о клиенте
Информация о клиенте — относительно хлопотная проблема для фронтенд-разработки, а различные волшебные изменения в UserAgent серьезно влияют на эмоции разработчиков. Я считаю, что крупные компании также имеют более зрелое отношение к суждениям UserAgent.В качестве личного развития рекомендуется кодовая базаua-device, может сократить большую часть этой работы. Единственным недостатком является то, что цитирование этой библиотеки увеличит размер упакованного файла js примерно на 150 КБ, Лично я думаю, что это не проблема в текущей сетевой среде.
// 浏览器信息
var CI = {
size: function () {
return scr.width + 'x' + scr.height;
}(),
// 网络类型
network: function () {
return (nav.connection && nav.connection.type) ? nav.connection.type : '-';
}(),
// 语言
language: function () {
return nav.language || '';
}(),
timezone: function () {
return new Date().getTimezoneOffset() / 60 || '';
}(),
ua: function () {
return encodeURIComponent(ua);
}(),
os: function () {
var o = uaOutput.os;
return encodeURIComponent(o.name + '_' + o.version.original);
}(),
browser: function () {
var b = uaOutput.browser;
return b.name + '_' + b.version.original;
}(),
engine: function () {
var e = uaOutput.engine;
return e.name + '_' + e.version.original;
}()
};-
источник трафика
-
адрес страницы
-
идентификатор сессии
Идентификатор сеанса используется для расчета uv, а uuid генерируется при инициализации инструмента. Поскольку идентификатор сеанса не будет обновляться после открытия страницы, он реализован с использованием вычисляемого свойства, похожего на vue.
var BP = {
/**
* 会话id，刷新页面会更新
*/
sessionId: function () {
return UUID.create();
}()
}- идентификатор устройства
Идентификатор устройства используется для конкатенации поведения пользователя. Например, если пользователь просматривает несколько страниц и сообщает несколько фрагментов данных, идентификатор устройства может использоваться для объединения этих действий. Поскольку внешний интерфейс не может реально получить уникальный идентификатор используемого устройства, так же как и идентификатор сеанса, используется uuid, который не будет повторяться. Это также вычисляемое свойство класса vue.
BP = {
/**
* 设备id，读取cookie，不存在则种入cookie
*/
deviceId: function () {
var did = utils.getCookie(cookieName);
if (!did) {
did = UUID.create();
utils.setCookie(cookieName, did, year);
}
return did;
}()
}-
отметка времени
-
время пребывания на странице
Самый дешевый способ записать время пребывания на странице — это использовать опрос для представления данных, а интервал запроса можно определить в соответствии с потребностями бизнеса. Ведь чем меньше интервал, тем больше нагрузка на сервер, но тем точнее получаемые данные.
/**
* Ticker钩子函数，用于上报页面停留时长
* @param dt 间隔时间
*/
var calStayTime = function (dt) {
totalTime += dt;
if(totalTime >= stayTime) {
BP.send();
totalTime -= stayTime;
}
};
// 启动ticker
ticker.start();
ticker.register(calStayTime);
// 页面离开时不再计时
utils.addEvent(doc, 'visibilitychange', function () {
if (doc.visibilityState === 'hidden') {
ticker.stop();
} else {
ticker.start();
}
});Чтобы максимально точно сообщать о времени задержки, таймер должен останавливаться при выходе со страницы (например, при сворачивании или переключении вкладок). Здесь для ведения временной шкалы используется отдельная упрощенная версия Тикера.Дополнительную информацию о ведении временной шкалы смотрите по ссылке ниже.
Хранение и чтение данных
Используйте файлы cookie для хранения некоторых данных, которые необходимо сохранить, например идентификаторов устройств.
var utils = {
/**
* 设置cookie
* @param name 名称
* @param value 值
* @param days 保存时间
* @param domain 域
*/
setCookie: function (name, value, days, domain) {
if (value === null) {
return;
}
if (domain === undefined || domain === null) {
// 去除host中的端口部分
domain = utils.stringSplice(win.location.host, '', ':', '');
}
if (days === undefined || days === null || days === '') {
doc.cookie = name + '=' + value + ';domain=' + domain + ';path=/';
} else {
var now = new Date();
var time = now.getTime() + DAY * days;
now.setTime(time);
doc.cookie = name + '=' + value + ';domain=' + domain + ';expires=' + now.toUTCString() + ';path/';
}
},
/**
* 读取cookie
* @param name 名称
*/
getCookie: function (name) {
if (name === undefined || name === null) {
return;
}
var reg = RegExp(name);
if (reg.test(doc.cookie)) {
return utils.stringSplice(doc.cookie, name, ';', '');
}
}
}данные отчета
Отчет о скрытых точках можно рассматривать как односторонний запрос, то есть он не должен заботиться об обратной связи с сервером и может использовать теги изображений для отправки данных на сервер, избегая при этом дополнительных междоменных проблем.
var utils = {
/**
* 发送请求，使用image标签跨域
* @param url 接口地址
*/
sendRequest: function (url) {
if (page.length === 0) {
console.error('请配置有效的page参数', '@burying-point');
return;
}
var img = new Image();
img.src = url;
}
}расширять
- белый список
Добавьте фильтр белого списка, который предусматривает, что только доменное имя в белом списке может отправить запрос. Это просто небольшой трюк, чтобы избежать слишком много грязных данных, сообщенных в процессе разработки, увеличить рабочую нагрузку анализа данных.
var utils = {
/**
* 白名单校验
*/
checkWhiteList: function () {
if (whiteList.length === 0) {
return true;
}
var href = win.location.href;
var flag = false;
for (var i = 0; i < whiteList.length; i++) {
if (href.indexOf(whiteList[i]) > -1) {
flag = true;
break;
}
}
return flag;
}
}Как использовать
Встроенный инструмент отслеживания может сообщать данные двумя разными способами.
Первый — сообщать напрямую через код:
<script>
BP.send();
</script>Во-вторых, добавьте атрибут bp-data в тег DOM:
<div bp-data>点击我会上报一条数据</div>Суммировать
Разработка внешнего инструмента отслеживания данных не требует особенно сложных технологий, а больше основана на бизнес-мышлении. Вот некоторые из наиболее важных частей, перечисленных в качестве справочных материалов:
- самоисполняющийся метод
- Кроссбраузерное прослушивание событий
- график обслуживания
- куки читать и писать
- Односторонний междоменный запрос
- вычисляемое свойство class vue
Полный код и использование, пожалуйста, переместитеGitHub,благодарный.