Цифровой отпечаток браузера пользователя с помощью OverpoweredJS

17 ноября, 2024

Этот материал посвящен отслеживанию цифровых отпечатков браузеров пользователей вашего сайта с помощью библиотеки OverpoweredJS и Google Tag Manager.

Отвечу вам на ключевой вопрос в самом начале публикации. Что вы получите, дочитав этот материал до конца? Общее понимание того, как работает цифровой отпечаток вашего браузера (так называемая технология fingerprint) и пошаговый алгоритм настройки отслеживания такого цифрового отпечатка между разными доменами сайтов с помощью свободно распространяющегося решения OverpoweredJS и диспетчера тегов Google.

Другими словами, вы сможете идентифицировать одного и того же пользователя на нескольких ваших сайтах, даже если на них будут установлены разные счетчики аналитики (Яндекс Метрика и Google Analytics 4). При переходе с одного сайта на другой в счетчике будет сохраняться уникальный идентификатор посетителя, с помощью которого вы сможете распознать все его действия на разных сайтах со своей аналитикой, а затем эти данные объединить/склеить для последующего анализа. Благодаря этому, у вас будет полный путь конкретного пользователя по всем вашим сайтам/доменам.

Про файлы cookie

Если вы никогда не слышали про уникальный идентификатор пользователя Client ID и методы определения/отличия посетителей вашего сайта друг от друга в Яндекс Метрике и Google Analytics 4, то перед изучением данной темы я рекомендую прочитать весь цикл нижеприведенных статей, и только после этого переходить в погружение fingerprint.

Если кратко, то сбор данных о посетителях на сайте с помощью Яндекс Метрики и Google Analytics 4 основан на cookie. Файлы cookie (куки) - это небольшие фрагменты текста, передаваемые в браузер с сайта, который вы открываете. С их помощью сайт запоминает информацию о ваших посещениях. Это упрощает взаимодействие с сайтом и делает его полезнее для вас.

Основное назначение файлов cookie с точки зрения аналитических инструментов и дисциплины "веб-аналитика" – идентификация пользователей с помощью уникального идентификатора (Client ID, cid), который создается для каждого посетителя сайта, возможность объединения его данных о посещении страниц, совершения событий в одном (едином!) профиле с целью дальнейшего анализа его действий. Полученную информацию, затем, можно использовать для улучшений ключевых показателей бизнеса (KPI), в рекламных инструментах (для оптимизации ставок и стратегий), а также для построения автоматических отчетов и дашбордов.

Данные о конкретном пользователе - его история посещений сайта

Когда пользователь впервые переходит на ваш сайт, в его браузере создается файл cookie с соответствующим идентификатором (_ga для Google Analytics 4 и _ym_uid для Яндекс Метрики).

Файлы cookie Яндекс Метрики и Google Analytics 4 в браузере пользователя

Этот файл cookie привязывается к конкретному браузеру и конкретному устройству. И пока он существует в браузере пользователя мы можем отслеживать все действия, которые он совершает на нашем сайте.

Но наверняка вы знаете, что с развитием технологий, законодательств разных стран и регулированием процессов в WWW, отслеживать пользователей становится все сложнее и сложнее. И то очень много причин. Например:

  • с конца 2019 года и по настоящее время браузеры активно блокируют как сторонние файлы cookie (third-party), так и основные (first-party). Сторонние файлы cookie создаются сторонними сайтами-партнерами, коды которых поставил себе владелец сайта (попапы, чаты, кнопки социальных сетей и т.д.). А основные файлы cookie создается тем сайтом (доменом), на котором находится пользователь, и как раз предназначены для аналитических целей;
  • срок жизни файлов cookie может составлять менее 10 дней из-за ограничений в самих браузерах из-за систем интеллектуального отслеживания браузеров, новых версий операционной системы Apple (iOS) и т.д. и т.п.;
  • пользователь может почистить историю посещений и удалить куки;
  • пользователь может использовать блокировщики рекламы и другие расширения/утилиты, которые будут блокировать отслеживания счетчиков аналитики;
  • работа антивируса, установленного на компьютере пользователя, может препятствовать корректной работе его браузера и отслеживанию файлов cookie;
  • пользователь может зайти в режиме Инкогнито. В нем не сохраняются файлы cookie, данные сайтов и история просмотров, а также информация, которую вы вводите в формы;
  • в связи с текущими событиями в мире некоторые сетевые запросы могут блокироваться интернет-провайдером, поэтому работа определенных инструментов интернет-компаний может быть под запретом.

Результат не самый оптимистичный:

  • расхождение данных. Один браузер заблокирует счетчик Google Analytics 4, но не заблокирует Яндекс Метрику. В результате пользователь в Метрике засчитается, а в Analytics не попадет;
  • увеличение количества новых пользователей (статья по GA4, статья по Метрике), прямого трафика (direct / none)
  • уменьшение цепочек касаний, поскольку при повторном заходе пользователя на сайт для него будет создан новый файл cookie и новая карточка пользователя в аналитике. Связать старые действия с новым сеансом не получится;
  • рекламные кампании оцениваются по последнему клику (Last Click) или с использованием "продвинутой" модели, основанной на данных, о которой мало что известно (black box);
  • вектор работы маркетолога теперь направлен на сбор телефонов, e-mail адресов для ретаргетинга и работы с текущей базой клиентов;
  • функционал когортного отчета в Google Analytics 4 ограничен;
  • аналитика строится вокруг идентификации пользователей по User ID (на авторизации), а не по Client ID.

Вдобавок сюда можно добавить GDPR и соблюдение регламентов в странах ЕС и США по сбору информации о пользователях, и возможности в любой момент отказаться от отслеживания. Если пользователь не захочет, чтобы мы отслеживали его действия на сайте, то мы не имеем права собирать данные и отправлять их в счетчики аналитики (Яндекс Метрику и Google Analytics 4). Если быть точнее, отправлять можно, но в ограниченном/сжатом виде с "псевдоидентификаторами пользователей". Глубокую аналитику с такой информацией не построишь.

А из этого вытекает другая проблема. Если пользователь вообще отказывается от отслеживания, запрещает сбор файлов cookie, то поведенческие данные о нем станут недоступны, и тогда в дело вступает так называемое Моделирование. В этом случае система использует сведения о похожих людях, которые дали тому же ресурсу согласие на использование файлов cookie, чтобы смоделировать недостающую информацию.

Другими словами, на основе тех данных о пользователях, что у GA4 есть, он моделирует недостающие сведения для тех пользователей, которые отказались предоставлять информацию о себе. На основе этих данных Google моделирует поведение и конверсии для Google Analytics 4 и Google Ads, что позволяет повысить точность отслеживания.

Но как бы мы не хотели отойти от файлов cookie и попытаться найти какие-то новые технологии, подходы и методы, позволяющие более качественно отслеживать действия пользователей на сайте (например, серверное отслеживание), в ключевых системах аналитики сбор данных по-прежнему основан именно на куках. И мы должны с этим считаться.

Про fingerprint

Как можно отследить пользователя в Интернете? Первое, что приходит на ум - IP-адрес пользователя. Он может дать определенную информацию о его местоположении и типе интернет-соединения человека. Однако IP не является точной метрикой (как, впрочем и другие), поскольку у пользователя есть возможности для анонимности, например, с помощью VPN или прокси-серверов, что усложняет идентификацию.

К тому же, в соответствии с GDPR (Общим регламентом по защите данных ЕС) IP-адрес пользователя является персональной информацией пользователя, поскольку он может использоваться для определения и идентификации конкретного пользователя в сети. И его нельзя передавать в Яндекс Метрику и Google Analytics 4.

Примечание: вы можете прочитать в блоге мои другие материалы по отслеживанию IP-адреса пользователя и использовать такую настройку в образовательных целях.

Во многих странах существуют законы о защите персональных данных, которые ограничивают использование информации, связанной с IP-адресами. Нам не подходит.

Тогда разработчики пошли дальше. Они обратились к традиционному способу отслеживания пользователей с помощью браузера, но стали ориентироваться не только на файлы cookie, но и другие настройки и возможности самого браузера, стараясь выжать из программы пользователя максимум. Так появилась технология fingerprint (отпечаток браузера пользователя).

Технология fingerprint (цифровой отпечаток браузера) напоминает отпечатки пальцев людей

Отпечатки браузера - это технология, которая позволяет идентифицировать пользователя по сочетанию свойств его браузера, таких как: разрешение, список плагинов, шрифтов, свойства navigator, и т.д.

Согласно исследованию EFF (Electronic Frontier Foundation), отпечаток браузера включает в себя:

  • User-Agent (включая не только браузер, но и версию ОС, тип устройства, языковые настройки, панели инструментов и т.п.);
  • часовой пояс;
  • разрешение экрана и глубину цвета;
  • supercookies;
  • настройки куки;
  • системные шрифты;
  • плагины к браузеру и их версии;
  • журнал посещений.

Согласно результатам исследования EFF, уникальность отпечатка браузера очень высока. Если говорить о статистике, то только раз на 286777 случаев случается полное совпадение отпечатков браузеров двух разных пользователей.

Согласно еще одному исследованию, точность идентификации пользователя при помощи отпечатка браузера составляет 99,24%. Изменение одного из параметров браузера снижает точность идентификации пользователя лишь на 0,3%. Существуют тесты на отпечаток браузера, которые показывают, насколько большой объем информации собирается.

На тему fingerprint написано много статей, цифровому отпечатку браузера посвящено большое количество видео и всевозможных мероприятий (конференций, семинаров, дискуссий). В этом руководстве я не буду описывать принцип работы данной технологии, у меня все равно не получится сделать это лучше специалистов по данной теме, да и сама публикация направлена на изучение одного из решений, представленных на рынке, а не рассказ о технологии в целом.

Обязательно прочитайте эти материалы:

А для лучшего понимания посмотрите еще и видео:

Если кратко, то когда вы запрашиваете адрес сайта и переходите на него, ваш браузер обменивается данными с веб-сервером. В этот момент сайты и сервисы присваивают пользователю уникальный идентификатор. Например, K0-VQB-2UL-WHV. Эта строчка из случайных букв и цифр помогает серверу узнать ваc, ассоциировать ваш браузер и ваши предпочтения с вами. Действиям, которые вы совершаете онлайн, будет присвоен примерно тот же код.

Этот идентификатор может быть сквозным и передаваться от одного домена к другому. То есть при переходе с одного сайта на другой в браузере будет сохраняться уникальный идентификатор посетителя, с помощью которого вы сможете распознать все его действия на разных сайтах со своей аналитикой, а затем эти данные объединить/склеить для последующего анализа. Этот идентификатор можно сохранять как в Яндекс Метрике/Google Analytics 4, так и отправлять в собственную CRM/ERP-систему.

Одно из популярных решений - Fingerprint. Но если и другие, не менее интересные решения, которые заслуживают внимания.

fingerprint.com

Например, OWOX давно использует схожую технологию, "пробрасывая" идентификатор в свою систему с последующей склейкой данных (так называемое кросс-доменное отслеживание). Таким образом, если пользователь будет иметь множество Client ID от аналитических инструментов, но один идентификатор Fingerprint, мы все равно сможет связать все его действия в единое целое.

userOwoxId

Если вы хотите практически познакомиться с технологией fingerprint и узнать, как выглядит отпечаток вашего браузера, вы можете использовать соответствующие утилиты и сервисы. Например, browserleaks.com.

browserleaks.com

BrowserLeaks - это набор инструментов, который предлагает несколько тестов для оценки безопасности и конфиденциальности вашего веб-браузера. Эти тесты направлены на выявление способов, с помощью которых веб-сайты могут раскрыть ваш реальный IP-адрес, собирать информацию о вашем устройстве и выполнять отпечаток браузера. Понимая эти риски, вы сможете предпринять соответствующие шаги для защиты своей конфиденциальности в Интернете.

Список тестов:

  • IP-адрес - отображение вашего IP-адреса, обратный поиск IP и заголовки HTTP-запросов, вашу страну, штат, город, ISP/ASN и местное время. Инструмент также включает такие функции, как поиск по IP-адресу whois, отпечаток TCP/IP OS, WebRTC, DNS и тесты на утечку IPv6;

Информация по IP-адресу

  • JavaScript - базовая функциональность JavaScript и современных веб-API. Можно извлечь множество данных о системе пользователя. Сюда входит такая информация, как: User-Agent, разрешение экрана, язык системы, локальное время, архитектура ЦП, количество логических ядер, состояние батареи, сетевая информация, установленные плагины и многое другое;

Пример данных по службам JavaScript

  • WebRTC Leak Test - тест на утечку WebRTC является критически важным инструментом для любого, кто использует VPN, поскольку он использует API WebRTC для связи с сервером STUN и потенциально раскрывает реальные локальные и публичные IP-адреса пользователя, даже при использовании VPN, прокси-сервера или NAT. Этот инструмент может помочь проверить, происходит ли утечка реального публичного IP-адреса;

WebRTC Leak Test

  • Canvas Fingerprinting - метод отслеживания использует код HTML5 Canvas для генерации уникального идентификатора для каждого отдельного пользователя. Метод основан на том факте, что уникальные пиксели, сгенерированные с помощью кода Canvas, могут различаться в зависимости от используемой системы и браузера, что позволяет идентифицировать пользователей;

Canvas Fingerprinting

  • WebGL Report - это диагностический инструмент для анализа поддержки WebGL вашим браузером и создания уникального отпечатка WebGL, который потенциально может идентифицировать ваш веб-браузер. Инструмент предоставляет информацию о вашей видеокарте и других возможностях WebGL и GPU, которые можно использовать для дифференциации вашего браузера от других;

WebGL Report

  • Font Fingerprinting - это метод, используемый для отслеживания онлайн-активности путем анализа уникальных характеристик системных шрифтов пользователя. Измеряя размеры текста или отдельных глифов Unicode, перечисляя шрифты и находя различия в отображении, этот метод может создать уникальный отпечаток, который трудно подделать или изменить;

Font Fingerprinting

  • Geolocation API - одна из служб JavaScript, которая позволяет веб-сайтам извлекать информацию о географическом местоположении с устройства пользователя, а этот инструмент тестирования API геолокации HTML5 обеспечивает подробный анализ вашего геолокационного местоположения и разрешений браузера;

Geolocation API

  • Features Detection - предоставляет подробный список функций HTML5, который поддерживает или не поддерживает ваш веб-браузер;

Обнаружение функций HTML5

  • SSL/TLS Client Test - позволяет проверить поддерживаемые браузером протоколы TLS, наборы шифров, расширения TLS и группы обмена ключами;

SSL/TLS Client Test

  • Content Filters - предоставляет детекторы для определения использования контент-фильтров, которые манипулируют соединением и контентом между браузером и посещаемой веб-страницей. Примерами таких фильтров являются Tor Browser и AdBlockers.

Content Filters and Proxy Detection

Технология fingerprint как раз объединяет информацию по всем этим тестам и присваивает пользователю уникальный идентификатор, который не повторяется ни с каким другим пользователем. Поэтому он так и похож на отпечатки пальцев реального человека, так как их рисунок всегда уникален.

Вы можете использовать и другой сервис для определения уникального отпечатка пальца, например, amiunique.org. Перейдя на страницу amiunique.org/fingerprint, вы увидите свой отпечаток браузера со всеми найденными свойствами.

Пример цифрового отпечатка браузера на amiunique.org

Вы даже можете скачать сведения о своем fingerprint в формате .JSON.

Или перейдите на страницу fingerprint.com/demo и посмотрите, как определяет данные по браузеру этот сервис. В демонстрационной части он не показывает детальные сведения о вашей системе, но выводит на экран уникальный цифровой отпечаток браузера пользователя.

Демонстрация работы fingerprint.com

Fingerprint определил мой IP-адрес, браузер, показал, перешел ли я на сайт в режиме Инкогнито или нет, а также использовал ли я при этом VPN.

Как видите, такой уникальный идентификатор куда надежнее и точнее, чем файлы cookie. Но и сервисы, которые предоставляют возможность отслеживания таких цифровых отпечатков, не бесплатные.

OverpoweredJS

Я хочу вам предложить одно из самых простых, но в то же время не менее интересных и бесплатных решений по отслеживанию fingerprint, которое вы можете использовать в своем проекте. Называется оно OverpoweredJS.

OverpoweredJS - это замена устаревшей библиотеки OPFS для снятия отпечатков браузеров. Она имеет API, разработанный для отслеживания экземпляров браузера Chromium с невероятной точностью и уникальностью. Его автор - Joe Rutkowski, известен вам по другому решению - DetectIncognito.js, благодаря которому вы можете определить режим Инкогнито в браузере пользователя.

В качестве демонстрации возможностей OverpoweredJS перейдите по ссылке и нажмите кнопу View Demo:

OverpoweredJS - View Demo

Вас перенаправит на отдельную страницу, где OverpoweredJS просканирует вашу систему и отобразит несколько fingerprint-характеристик:

Цифровой отпечаток браузера (OverpoweredJS)

  • Browser Indetifier - идентификатор вашего браузера. В зависимости от браузера он может быть уникальным для вашего браузера или устройства;
  • User Description - предоставляет информацию о том, является ли пользователь ботом и откуда происходит соединение (в моем примере Human using Chrome означает, что OverpoweredJS определил меня как человека, который использует Chrome);
  • Bot Score - оценка от 1 до 5, показывающая, насколько данный пользователь близок к поведению бота (в моем примере Probably a human (1) означает, что я, по мнению OverpoweredJS, являюсь человеком). 5 соответствует наибольшей вероятности того, что это бот;
  • Uniqueness Score - оценка уникальности от 1 до 5, где 5 означает наименьшую вероятность того, что идентификатору браузера будет назначено более одного устройства (в моем примере Probably Unique (5) означает, что мое устройство, по мнению OverpoweredJS, является уникальным);
  • Fingerprint Hash - хэш SHA-256 объекта отпечатка браузера, который был отправлен в этом запросе.

Как вы знаете, если пользователь заходит на сайт через режим Инкогнито, то история его просмотров не записывается, а файлы cookie удаляются, что помогает сохранить конфиденциальность личных предпочтений. Поэтому при повторном заходе мы не сможем идентифицировать пользователя.

Но если мы используем fingerprint, то сделать это возможно. Убедиться в этом очень легко - просто перейдите на OverpoweredJS и совершите два демонстрационных запроса - один из стандартного режима, а другой в режиме Инкогнито. Browser Identifier должен быть одинаковым.

Один и тот же fingerprint в обычном режиме и режиме Инкогнито

Именно идентификатор браузера (Browser Identifier, он же clusterUUID) является ключевой характеристикой, которая нам нужна. Именно ее нам необходимо отправлять в счетчики аналитики, а также в CRM/ERP-системы, если впоследствии вы желаете связать все действия пользователя в одну цепочку, даже если они совершались на разных сайтах и доменах с разными установленными Яндекс Метрикой и Google Analytics 4.

Примечание: хотя отслеживать браузеры/людей на разных сайтах возможно, это требует исключительно больших ресурсов из-за количества записей, которые необходимо проверить. Разделение идентификаторов по происхождению позволяет адекватно масштабировать сервис, а также обеспечивать определенный уровень конфиденциальности для посетителей сайта.

По состоянию на ноябрь 2024 года OverpoweredJS поддерживает все современные браузеры, включая браузеры на базе Chromium (Google Chrome, Microsoft Edge, Opera), а также Firefox, Brave и Safari. Хотя большинство браузеров могут генерировать уникальные идентификаторы clusterUUID, некоторые конфигурации или среды, в частности Safari, Firefox и Brave, могут приводить к конфликтам (случаям, когда два или более устройств используют один и тот же clusterUUID).

В настоящее время OverpoweredJS является бесплатным и используется без регистрации или ключа API. Но по мере его развития у автора есть желание перевести эту библиотеку на коммерческое использование. Разработчики библиотеки могут предоставить услуги междоменного отслеживания тем, кто хочет воспользоваться их сервисом, используя выделенную инфраструктуру, однако это значительно дороже как с точки зрения вычислительных затрат, так и с экономической точки зрения. Вы можете связаться с авторами решения через контактную информацию, представленную на GitHub.

Подключение OverpoweredJS на сайте

Чтобы начать использовать OverpoweredJS, подключите библиотеку, добавив ее в исходный код сайта. Просто поручите эту задачу своему разработчику, либо же самостоятельно установите скрипт между тегами <head></head>:

Добавить OverpoweredJS можно и через Google Tag Manager. Просто создайте тег типа Пользовательский HTML и вставьте в него тот же код. В качестве триггера активации задайте триггер Инициализация (Initialization), чтобы библиотека OverpoweredJS загружалась как можно раньше, до загрузки кодов Яндекс Метрики и Google Analytics 4.

Тег "Пользовательский HTML"

Дополнительно можно задать порядок активации тегов, установив для ЯМ и GA4 Тег setup - OverpoweredJS:

Активировать тег перед тегом аналитики - Тег setup - OverpoweredJS

Сохраните изменения и опубликуйте контейнер GTM.

OverpoweredJS следует использовать ответственно в целях безопасности. Использование может регулироваться правилами конфиденциальности, такими как GDPR или CCPA, поэтому для более широких приложений рекомендуется явное согласие пользователя. Неправильное использование или злоупотребление API может привести к внесению в черный список.

Вызов функции

Чтобы получить цифровой отпечаток браузера пользователя, необходимо вызвать функцию:

Она извлекает объект fingerprint, который затем можно отправить на сервер или использовать непосредственно в клиентском коде. Выглядеть он может примерно так:

, где:

  • clusterUUID - идентификатор вашего браузера;
  • botScore - оценка от 1 до 5, показывающая вероятность того, что пользователь является ботом (1 - человек; 5 соответствует наибольшей вероятности того, что это бот);
  • uniquenessScore - оценка от 1 до 5, представляющая уникальность отпечатка пальца (5 - уникальный идентификатор браузер, 1 - имеет существенные сходства с многочисленными другими устройствами);
  • hash - хэш данных отпечатка пальца, полезный для справки и устранения неполадок;
  • authToken - токен, который может быть отправлен на серверы разработчика решения для проверки подлинности запроса и отсутствия подделки другими способами.

Получение цифрового отпечатка браузера

Возвращаемые параметры помогают определить природу пользователя или экземпляра браузера в целях безопасности.

clusterUUID идентифицирует браузер или устройство. Он разработан так, чтобы быть максимально уникальным, назначая каждый идентификатор наименьшему количеству возможных пользователей. Каждый clusterUUID сопровождается uniquenessScore. Он описывает, насколько уникален clusterUUID, при этом 5 указывает на то, что он, скорее всего, полностью уникален для данного конкретного браузера или устройства, а более низкие баллы указывают на возможность того, что более чем одному отдельному устройству может быть назначен тот же clusterUUID. clusterUUID учитывает только информацию о браузере на стороне клиента и не зависит от изменений в сети.

Параметр uniquenessScore все еще находится в стадии разработки и не является окончательной метрикой. uniquenessScore варьируется от 1 до 5, указывая, насколько уникален и отслеживаем clusterUUID. Более высокие баллы отражают большую отличительность.

Расшифровка баллов uniquenessScore:

  • 5 (уникальный) - очень отличительный. Вероятно, представляет одно устройство. Включает браузеры, такие как: Google Chrome, Microsoft Edge, Opera и другие браузеры на основе Chromium, которые не используют защиту от отпечатков браузера;
  • 4 (довольно уникальный). Вероятно, отличается, но может иметь незначительные сходства с другими устройствами, что может привести к тому, что несколько устройств будут сгруппированы под одним и тем же clusterUUID;
  • 3 (неизвестно). Неясно, насколько уникальны характеристики устройства по сравнению с другими;
  • 2 (низкая уникальность). Вероятно, похоже на многие другие устройства; общие конфигурации;
  • 1 (не уникально). Имеет существенные сходства с многочисленными другими устройствами.

Автор решения рекомендует использовать uniquenessScore для настройки мер безопасности вашего приложения в зависимости от того, насколько важно различать пользователей. Более высокие баллы говорят о том, что отпечаток пальца более уникален и надежен для отслеживания.

Параметр botScore с диапазоном значений от 1 до 5 указывает на вероятность того, что пользователь является ботом.

Расшифровка баллов botScore:

  • 5 (вероятно, бот). Высокая степень уверенности; настоятельно предполагает автоматизацию;
  • 4 (возможно, бот). Средняя уверенность; среда предполагает автоматизацию;
  • 3 (неопределенный). Неоднозначный результат; по сути не предполагает автоматизацию. Это может быть бот или может указывать на то, что некоторые API были недоступны. Обновление страницы может решить эту проблему;
  • 2 (возможно, человек). Скорее всего, человек, но некоторые признаки вызывают некоторую неопределенность;
  • 1 (вероятно, человек). Высокая вероятность того, что пользователь — человек.

Рекомендации по использованию botScore:

  • Приложения с низким уровнем риска - рассмотрите возможность блокировки пользователей с рейтингом botScore = 5 (вероятно, боты);
  • Приложения с умеренным уровнем риска - рассмотрите возможность блокировки пользователей с рейтингом botScore = 4 или 5, поскольку они со средней или высокой степенью вероятности предполагают поведение бота;
  • Приложения с высоким уровнем риска - рассмотрите возможность блокировки пользователей с рейтингом botScore = 3 или выше. Обратите внимание, что рейтинг 3 указывает на неоднозначность, которую можно устранить, обновив страницу и вызвав функцию еще раз.

Запуск функции opjs() при загрузке страницы ухудшает результаты обнаружения ботов. Если вы полагаетесь на эффективное обнаружение ботов, рекомендуется загружать скрипт при загрузке страницы и выполнять opjs() только после того, как пользователь выполнит действие, например, нажмет кнопку. Другими словами, запускайте функцию opjs() только в ответ на какое-то действие/событие от пользователя, а не просто при загрузке страницы.

Настройка в Google Tag Manager

Как я написал выше, подключать библиотеку OverpoweredJS лучше через исходный код сайта, а вызывать функцию opjs() следует только тогда, когда пользователь совершает какое-то действие на вашем сайте. Так повышается вероятность верного определения всех параметров, включая botScore и uniquenessScore.

Но это не значит, что вы не сможете сделать это самостоятельно через диспетчер тегов Google. В самой простой реализации вы можете сделать следующее - вернитесь в GTM и откройте Пользовательский HTML тег, добавив ниже еще один код между <script></script>:

В результате у вас должно получится так:

Пользовательский HTML тег

Итоговый код предназначен для асинхронного вызова метода из библиотеки opjs, который возвращает результат в виде объекта цифрового отпечатка браузера, и этот результат сохраняется в переменной fpValue для дальнейшего использования.

Переменная fpValue возвращает объект цифрового отпечатка браузера

Сохраните тег. Теперь вам необходимо создать пользовательскую переменную типа Переменная JavaScript. Если вы желаете извлекать значения из всех параметров объекта, то создайте поочередно переменные с такими именами:

  • fpValue.authToker
  • fpValue.botScore
  • fpValue.clusterUUID
  • fpValue.hash
  • fpValue.uniquenessScore

Тогда вы сможете передать с событием пользователя все эти значения в Яндекс Метрику и Google Analytics 4. В качестве примера я создам переменную JavaScript для идентификатора браузера с именем fpValue.clusterUUID:

Переменная JavaScript - fpValue.clusterUUID

Задайте переменной название (например, clusterUUID) и сохраните ее. Теперь вы можете использовать эту переменную в тегах Яндекс Метрики и Google Analytics 4, и передавать значение идентификатора браузера как:

  • параметр события вместе с конкретным событием;
  • параметр посетителя (свойство пользователя), объединяя данные по clusterUUID с Client ID / User ID внутри аналитики.

Примечание: в случае, если вам нужно передавать значение clusterUUID в CRM/ERP-систему, поручите эту задачу вашему разработчику.

Передача данных в Google Analytics 4

Сначала отправим значение fingeprint в GA4 вместе с событием как параметр события и свойство пользователя. В качестве примера я буду использовать событие отправки формы на странице онлайн-курса по Google Analytics 4 и BigQuery. На ней есть стандартная форма:

Отслеживание отправки формы

Именно после ее заполнения и отправки я буду вместе с событием отправлять цифровой отпечаток браузера. О том, как настроить триггер отслеживания, вы можете почитать в других материалах моего блога. Ключевое - это правильно настроить тег.

Создайте тег типа Google Аналитика: событие GA4. Укажите:

  • идентификатор потока данных;
  • название события;
  • триггер.

В качестве параметра события добавьте свой параметр (например, browser_id), где значением будет переменная JavaScript с именем fpValue.clusterUUID, созданная на предыдущем шаге. Аналогично можно сделать и для свойства пользователя, задав ему название ресурса (например, user_fingerprint) с значением все той же переменной JavaScript.

Тег события GA4 с параметром события и свойством пользователя fingerprint

Таким образом, информация по цифровому отпечатку браузера пользователя будет отправляться как на уровень события, так и на уровень пользователя (с привязкой к Client ID / User ID).

Сохраните тег. Для проверки запустите режим предварительного просмотра. Выполните то действие, для которого вы настроили отслеживание. На шкале событий GTM вы должны увидеть активированный тег GA4:

Активированный тег GA4

Нажмите на него, чтобы открыть детальные сведения. Внутри него вы должны видеть значение параметра события и свойство пользователя и уникальным идентификатором браузера, он же fingerprint, назначенный OverpoweredJS:

Детальные сведения тега GA4 (fingerprint пользователя)

В инструменте DebugView вы тоже должны видеть эти же данные:

Проверка данных в DebugView

Если вы хотите в дальнейшем строить Исследования и использовать цифровой отпечаток браузера в стандартных отчетах GA4, обязательно создайте специальные параметры с областью действия Событие и Пользователь.

Как я писал выше, помимо цифрового отпечатка браузера вместе с событием вы можете отправлять данные по botScore и uniquenessScore. Для этого нужно создать отдельные переменные JavaScript (см. выше) и передавать их точно таким же образом, как я это продемонстрировал для clusterUUID.

Примерно через 24 часа статистика по отслеживаемым вами событиям вместе с цифровым отпечатком будет доступна в отчетах и Исследованиях Google Analytics 4.

Передача данных в Яндекс Метрику

Если вы планируете передавать параметр события/визита вместе JS-событием, тогда обязательно создайте его в интерфейсе Яндекс Метрики.

Затем в диспетчере тегов Google создайте тег типа Пользовательский HTML. Вставьте в него код цели, а в качестве четвертого аргумента добавьте переменную с цифровым отпечатком. Это должно выглядеть примерно так:

А чтобы передать информацию в Яндекс Метрику сразу же как параметр посетителя, используйте метод userParams и нижеприведенную конструкцию:

В Google Tag Manager в одном теге на текущее событие можно добавить сразу два кода - один будет передавать на уровень параметра события, а другой - на уровень пользователя (с привязкой с Client ID):

Тег Яндекс Метрики с параметром события и параметром посетителя fingerprint

В качестве триггера активации используйте тот же самый триггер, что и для Google Analytics 4. Сохраните тег.

Примечание: 25 июля 2024 года Яндекс анонсировал новые отчеты по событиям в Яндекс Метрике. О том, какие возможности появились у владельцев счетчиков после обновления, читайте в этом материале.

Для проверки тега запустите режим отладки Google Tag Manager. Можно сразу же с параметром _ym_debug=2 в URL-адресе, чтобы отрыть консоль отладки самой Яндекс Метрики. Выполните то действие, для которого вы настроили отслеживание. На шкале событий вы должны увидеть активированный тег Яндекс Метрики:

Активированный тег Яндекс Метрики

В консоли Яндекс Метрики вы должны увидеть значения, отправленные с JS-событием и как параметр посетителя:

Проверка данных с помощью _ym_debug=2

Через некоторое время (~ 30 минут) вы увидите данные в отчетах по Яндекс Метрике. Например, в отчете по параметрам событий:

Переданный fingerprint в Яндекс Метрику как параметр события

Или в самой карточке пользователя в разделе Посетители:

Цифровой отпечаток браузера как параметр посетителя в Яндекс Метрике

Если все отслеживается так, как вы планировали, и цифровой отпечаток браузера пользователя передается без проблем, тогда вы можете опубликовать изменения контейнера Google Tag Manager для всех пользователей.

Бонус

Еще один скрипт по получению visitorID, только на базе fingerprint.com/demo, который работает и загружается через Google Tag Manager. Добавить его можно в тег типа Пользовательский HTML:

Триггер активации - Инициализация согласия. За решение спасибо Виктору Кончишину.

Заключение

Теперь в Яндекс Метрике и Google Analytics 4 у вас есть еще как минимум одна метрика, позволяющая вам объединять/склеивать данные не только по файлам cookie с привязкой к Client ID, но еще и отслеживать цифровой отпечаток пользователя браузера, и передавать его в CRM/ERP-систему с помощью разработчиков.

Это позволяет точнее отслеживать цепочку действий пользователя не только в рамках одного сайта, но и на разных доменах. Вы можете настроить скрипт OverpoweredJS на нескольких своих сайтах, и передавать clusterUUID в несколько счетчиков, а затем с помощью сводной таблицы, SQL или более сложных вычислениях после выгрузки данных связывать все действия именно по цифровому отпечатку браузера пользователя.

Как я писал ранее, помимо clusterUUID вы можете отправлять данные и по другим параметрам, которые определяет библиотека - botScore и uniquenessScore. Пока OverpoweredJS является бесплатным и используется без регистрации или ключа API. Но по мере его развития у автора есть желание перевести эту библиотеку на коммерческое использование. Разработчики библиотеки могут предоставить услуги междоменного отслеживания тем, кто хочет воспользоваться их сервисом, используя выделенную инфраструктуру, однако это значительно дороже как с точки зрения вычислительных затрат, так и с экономической точки зрения. Вы можете связаться с авторами решения через контактную информацию, представленную на GitHub.

Моя ключевая задача состояла в том, чтобы познакомить вас с технологией fingerprint и предоставить пошаговую настройку отслеживания цифрового отпечатка браузера с помощью простого и готового решения и диспетчера тегов Google. Надеюсь, у меня это получилось!

Получайте бесплатные уроки и фишки

По контекстной, таргетированной рекламе и аналитике