В какой-то момент перед нами встала на первый взгляд простая, но на деле крайне важная задача: понять, откуда приходит пользователь — из браузера или из установленного PWA-приложения.
На первый взгляд кажется, что разницы нет: и сайт, и PWA открываются по одному адресу, а данные в аналитике выглядят одинаково. Но это только на поверхности. В реальности сценарии использования разные. Пользователь, который установил PWA, воспринимает сервис не как сайт, а как приложение — это совсем другой уровень вовлеченности, чаще возвраты и иное качество взаимодействия. Чтобы это измерить, мы должны были научиться разделять источники трафика.
Что такое PWA и зачем различать каналы
PWA (Progressive Web App) — это веб-сайт, который можно установить на устройство и использовать как приложение. Он запускается без браузерной оболочки, работает быстрее и ощущается для пользователя как нативный софт.
Для бизнеса разница принципиальна:
Если аналитика не умеет различать эти два сценария, данные будут усредненными и потеряют точность.
Для бизнеса разница принципиальна:
- браузерный трафик — легкий, но менее конверсионный;
- PWA-трафик — более лояльная аудитория, которая установила приложение и возвращается к нему регулярно.
Если аналитика не умеет различать эти два сценария, данные будут усредненными и потеряют точность.
Наше решение
Подсказку мы нашли в официальной документации Google и адаптировали под свой проект. Суть в том, чтобы проверять режим отображения (display-mode) и на его основе определять источник.
Рабочий минимальный код выглядит так:
let displayMode = 'browser';
const mqStandAlone = '(display-mode: standalone)';
if (navigator.standalone || window.matchMedia(mqStandAlone).matches) {
displayMode = 'standalone'
}
Что происходит:
Так мы всегда получаем корректное значение в переменной displayMode.
Рабочий минимальный код выглядит так:
let displayMode = 'browser';
const mqStandAlone = '(display-mode: standalone)';
if (navigator.standalone || window.matchMedia(mqStandAlone).matches) {
displayMode = 'standalone'
}
Что происходит:
- navigator.standalone отвечает за iOS, где PWA работает особым образом;
- window.matchMedia('(display-mode: standalone)') — проверка для Android и десктопа;
- по умолчанию все считается «browser», но если условия выполняются — меняем на «standalone».
Так мы всегда получаем корректное значение в переменной displayMode.
Как применить на практике
Дальше все просто: скрипт встраивается в код сайта, и при каждом заходе пользователя определяется его сценарий входа. Самое важное — передавать это значение в систему аналитики: будь то Google Analytics, Яндекс.Метрика или BI-платформа.
Когда данные начинают копиться, можно строить отдельные отчеты: одни пользователи открывают продукт в браузере, другие — через PWA. Это позволяет работать с аудиторией не усредненно, а сегментами. А значит — лучше понимать поведение, тестировать гипотезы и принимать более точные бизнес-решения.
Например, для PWA-аудитории можно запустить акции с push-уведомлениями, а для браузерных — ремаркетинг. Такой подход позволяет гибко подстраивать маркетинговые кампании и усиливать эффект.
Когда данные начинают копиться, можно строить отдельные отчеты: одни пользователи открывают продукт в браузере, другие — через PWA. Это позволяет работать с аудиторией не усредненно, а сегментами. А значит — лучше понимать поведение, тестировать гипотезы и принимать более точные бизнес-решения.
Например, для PWA-аудитории можно запустить акции с push-уведомлениями, а для браузерных — ремаркетинг. Такой подход позволяет гибко подстраивать маркетинговые кампании и усиливать эффект.
Где это может пригодиться
- Аналитика трафика. Разделяя аудиторию на браузерных и PWA-пользователей, можно видеть реальную картину: как быстро они совершают целевые действия, какая у них глубина просмотра, где чаще происходят отказы.
- Маркетинг. Сегментация помогает точнее оценивать эффективность каналов. Допустим, браузерные пользователи чаще приходят с рекламы, но хуже конвертируются. А PWA-аудитория стабильно возвращается и приносит больше заказов. Эти знания помогают перераспределять бюджеты и находить новые точки роста.
- UX-исследования. Разные каналы использования — это разные сценарии. То, что удобно в браузере, может быть перегружено в PWA, или наоборот. Такой анализ помогает точечно улучшать продукт.
- Бизнес-метрики. Когда мы точно знаем, как пользователь зашел в сервис, проще корректно считать LTV, удержание, конверсию и другие ключевые показатели. Усредненные данные часто искажают картину, а сегментация дает реальную основу для решений.
Итог
Мы внедрили простое, но надежное решение, которое позволяет четко понимать: пользователь пришел из браузера или из PWA-приложения.
Для разработки это лишь несколько строк кода. Но для аналитики и бизнеса — огромный шаг вперед. Теперь мы видим картину точнее, понимаем реальное поведение аудитории и можем принимать решения, основанные на фактах, а не предположениях.
Для разработки это лишь несколько строк кода. Но для аналитики и бизнеса — огромный шаг вперед. Теперь мы видим картину точнее, понимаем реальное поведение аудитории и можем принимать решения, основанные на фактах, а не предположениях.