Мануалы

Как мы научились определять трафик из PWA-приложения

В какой-то момент перед нами встала на первый взгляд простая, но на деле крайне важная задача: понять, откуда приходит пользователь — из браузера или из установленного 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'
}

Что происходит:

navigator.standalone отвечает за iOS, где PWA работает особым образом;
window.matchMedia('(display-mode: standalone)') — проверка для Android и десктопа;
по умолчанию все считается «browser», но если условия выполняются — меняем на «standalone».

Так мы всегда получаем корректное значение в переменной displayMode.

Как применить на практике

Дальше все просто: скрипт встраивается в код сайта, и при каждом заходе пользователя определяется его сценарий входа. Самое важное — передавать это значение в систему аналитики: будь то Google Analytics, Яндекс.Метрика или BI-платформа.

Когда данные начинают копиться, можно строить отдельные отчеты: одни пользователи открывают продукт в браузере, другие — через PWA. Это позволяет работать с аудиторией не усредненно, а сегментами. А значит — лучше понимать поведение, тестировать гипотезы и принимать более точные бизнес-решения.

Например, для PWA-аудитории можно запустить акции с push-уведомлениями, а для браузерных — ремаркетинг. Такой подход позволяет гибко подстраивать маркетинговые кампании и усиливать эффект.

Где это может пригодиться

Аналитика трафика. Разделяя аудиторию на браузерных и PWA-пользователей, можно видеть реальную картину: как быстро они совершают целевые действия, какая у них глубина просмотра, где чаще происходят отказы.
Маркетинг. Сегментация помогает точнее оценивать эффективность каналов. Допустим, браузерные пользователи чаще приходят с рекламы, но хуже конвертируются. А PWA-аудитория стабильно возвращается и приносит больше заказов. Эти знания помогают перераспределять бюджеты и находить новые точки роста.
UX-исследования. Разные каналы использования — это разные сценарии. То, что удобно в браузере, может быть перегружено в PWA, или наоборот. Такой анализ помогает точечно улучшать продукт.
Бизнес-метрики. Когда мы точно знаем, как пользователь зашел в сервис, проще корректно считать LTV, удержание, конверсию и другие ключевые показатели. Усредненные данные часто искажают картину, а сегментация дает реальную основу для решений.

Итог

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

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