Почему ваши аналитические данные превращаются в черную дыру

И как это предотвратить

Вы только что внедрили новое аналитическое решение и очень рады видеть результаты. Но потом…ничего. Данные не поступают за часы, дни или недели. Что дает? Ваша реализация неверна? Ваши данные просто не торопятся поступать? Или есть какое-то другое объяснение?

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

Тег script, который мы внедряем на наши веб-сайты, прослушивает события и отправляет эти данные на сервер API этих провайдеров, известный домен, который может быть легко заблокирован блокировщиками рекламы или другим программным обеспечением для обеспечения конфиденциальности.

В зависимости от пользовательской базы мы можем потерять любое количество ценных пользовательских данных. Если данный сервис нацелен на разработчиков, нас могут ожидать огромные убытки, так как многие из нас используют Brave Browser или расширения, подобные Ad Block.

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

Возьмем, к примеру, тепловые карты пользователей — распространенное представление аналитических данных, которое используется для того, чтобы увидеть, где пользователи больше всего нажимают или как они прокручивают страницу. Если мы знаем, с чем сталкиваются наши пользователи, мы можем улучшить дизайн и удобство наших продуктов.

Но как мы можем обмануть эти надоедливые блокировщики рекламы, чтобы разрешить передачу данных аналитики, и где возникает барьер между этическим использованием таких методов?

Конфиденциальность — это не просто то, на что я имею право, это абсолютное необходимое условие». — Марлон Брандо, актер

Я сделал довольно гротескную диаграмму того, как выглядит нормальный поток данных ниже.

Мое самое примитивное объяснение состоит в том, что блокировщик рекламы распознает определенные домены (возможно, через черный список) и уничтожает данные (блокирует запрос) до того, как они покинут браузер.

«Простое» решение состоит в том, чтобы создать собственное решение для анализа данных, разместить его на собственном домене, подождать пару месяцев, чтобы получить статус единорога, и подтвердить его, добавив в этот самый черный список.

Если эти огромные накладные расходы на код и неразумные архитектурные решения не удовлетворяют ваши потребности, давайте поговорим о посредниках. Нет, не злая.

Вместо того, чтобы самостоятельно размещать всю аналитическую службу, мы могли бы просто перенаправить запрос из нашего домена стороннему провайдеру с помощью обычной перезаписи URL. Это действует как прокси-сервер, расположенный в том же домене, что вряд ли будет мешать большинству блокировщиков рекламы.

Чтобы продолжить мою отвратительную диаграмму, вот как простой прокси будет работать для нашего веб-сайта. Проблема и ключевое решение в этой статье были уже изумительно обрисованы Тео.

Как всегда, хватит болтовни и давайте запачкаем руки кодом, я покажу, как мы реализуем такое прокси-решение в Next.JS с помощью Splitbee и Plausible. Я не буду рассказывать о реализации Google Analytics, так как о ней уже есть несколько статей.

Сплитби Аналитика

Когда аналитика не должна быть сложной

Чтобы настроить Splitbee, мы просто создаем новый проект и указываем поддомен, из которого мы хотим извлечь аналитические данные.

Если бы мы не беспокоились о блокировщиках рекламы, мы могли бы приступить к встраиванию скрипта непосредственно в папку _app с помощью компонента Next script, как указано на панели инструментов.

Next.JS позволяет безумно легко добавлять перезаписи непосредственно в next.config.js, для каждой перезаписи нужен источник и место назначения, но решение, которое само по себе приводит к усталости от принятия решений, к счастью, мы можем найти точные строки, которые нам нужны, в документах. . Копирование вставки начинается. (код здесь)

После одного развертывания мы можем увидеть, как аналитика начинает отображаться на панели инструментов. При ближайшем рассмотрении мы можем увидеть прокси-запросы на вкладке «Сетевые запросы».

Правдоподобный

Когда защита данных является правдоподобной необходимостью

Правдоподобный довольно похож в аспектах данных и реализации, но имеет довольно неизвестную функцию, по крайней мере, для компаний, работающих только в США. Поскольку он полностью создан и размещен в облачной инфраструктуре ЕС, он полностью соответствует GDPR, CCPA и PECR.

Что означают все эти странныеаббревиатуры? Вкратце, существует несколько законов, которые ограничивают хранение и передачу данных за пределы Европейского Союза без согласия пользователя (обычно через всплывающие окна с файлами cookie). Прочтите мою статью Как шрифты Google стали нелегальными в Европе для получения дополнительной информации.

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

Интеграция Plausible в Next.JS также очень проста: в пакете next-pliusible мы оборачиваем содержимое _app.js с помощью PlausibleProvider, добавляем ваше доменное имя, и все готово к работе. (код здесь)

Что касается добавления прокси, next-правдоподобный предоставляет декоратор «с», включая все необходимые настройки прокси, скрывающие более продвинутую настройку под капотом.

Вот и все! Мы успешно добавили два аналитических решения в наше приложение Next.JS, не беспокоясь о блокировщиках рекламы или законах о конфиденциальности данных. Чтобы протестировать оба решения, я буду использовать их параллельно в моем предстоящем побочном проекте Interviewor, бесплатном тренере по веб-разработке.

У вас есть вопросы или предложения? Не стесняйтесь обратиться! 🚀.

На этом пока все, спасибо за то, что прочитали и оставили аналитические данные (каламбур)! Если вы хотите быть в курсе моих будущих статей, подписывайтесь на меня в Medium или Twitter.