Установка Progressive Web App (PWA) может облегчить пользователям поиск и использование. Даже при продвижении браузера некоторые пользователи не осознают, что они могут установить PWA, поэтому может быть полезно предоставить возможность внутри приложения, которую вы можете использовать для продвижения и включения установки вашего PWA.
Эта статья ни в коем случае не является исчерпывающей, но предлагает отправную точку для различных способов продвижения установки вашего PWA. Независимо от того, какой шаблон или шаблоны вы используете, все они приводят к одному и тому же коду, который запускает процесс установки, описанный в разделе «Как обеспечить собственный опыт установки в приложении» .
Лучшие практики
Существует несколько рекомендаций, которые применимы независимо от того, какие рекламные шаблоны вы используете на своем сайте.
- Держите рекламные акции вне потока вашего взаимодействия с пользователем. Например, на странице входа в PWA поместите призыв к действию под формой входа и кнопкой «Отправить». Неправильное использование рекламных шаблонов снижает удобство использования вашего PWA и отрицательно влияет на показатели вовлеченности.
- Включите возможность отклонить или отклонить продвижение. Запомните предпочтения пользователя, если он это сделает, и повторите запрос только в том случае, если в отношениях пользователя с вашим контентом произошли изменения, например, если он вошел в систему или совершил покупку.
- Комбинируйте методы в разных частях вашего PWA, но будьте осторожны, чтобы не перегружать и не раздражать пользователя продвижением установок.
- Показывайте продвижение только после того, как сработает событие
beforeinstallprompt.
Автоматическое продвижение браузера
При выполнении определенных критериев большинство браузеров автоматически сообщают пользователю, что ваше прогрессивное веб-приложение можно установить. Например, в настольном Chrome в омнибоксе отображается кнопка установки.
Chrome для Android показывает пользователю мини-информационную панель, хотя этого можно предотвратить, вызвав метод preventDefault() в событии beforeinstallprompt . Если вы не вызовете метод preventDefault() , баннер будет показан, когда пользователь впервые посетит ваш сайт и будет соответствовать критериям установки на Android, а затем снова примерно через 90 дней.
Рекламные шаблоны пользовательского интерфейса
Рекламные шаблоны пользовательского интерфейса можно использовать практически для любого типа PWA и появляться в таких местах, как навигация по сайту и баннеры. Как и в случае с любым другим типом рекламного шаблона, важно знать контекст пользователя, чтобы свести к минимуму нарушение его пути.
Сайты, которые внимательно относятся к запуску пользовательского интерфейса продвижения, достигают большего количества установок и не мешают работе пользователей, которые не заинтересованы в установке.
Простая кнопка установки
Самый простой возможный пользовательский интерфейс — это включить кнопку «Установить» или «Получить приложение» в соответствующем месте вашего веб-контента. Убедитесь, что кнопка не блокирует другие важные функции и не мешает пользователю перемещаться по вашему приложению.
Фиксированный заголовок
Это кнопка установки, которая является частью шапки вашего сайта. Другое содержимое заголовка часто включает в себя брендинг сайта, например логотип и меню-гамбургер. Заголовки могут быть position:fixed или нет, в зависимости от функциональности вашего сайта и потребностей пользователей.
При правильном использовании реклама установки PWA из заголовка вашего сайта — отличный способ облегчить вашим самым лояльным клиентам возможность вернуться к вам. Пиксели в заголовке PWA очень важны, поэтому убедитесь, что ваш призыв к действию имеет соответствующий размер, имеет большее значение, чем другое возможное содержимое заголовка, и ненавязчив.
Убедись, что ты:
- Не показывайте кнопку установки, если не было запущено приглашение
beforeinstallprompt. - Оцените ценность установленного варианта использования для пользователей. Рассмотрите возможность выборочного таргетинга, чтобы показывать рекламу только тем пользователям, которым она может быть полезна.
- Эффективно используйте драгоценное пространство заголовка. Подумайте, что еще было бы полезно предложить вашему пользователю в заголовке, и взвесьте приоритет продвижения установки относительно других вариантов.
Меню навигации
Меню навигации — отличное место для продвижения установки вашего приложения, поскольку пользователи, открывающие меню, сигнализируют о заинтересованности в вашем опыте.
Убедись, что ты:
- Не нарушайте важный навигационный контент. Поместите рекламу установки PWA под другими пунктами меню.
- Предложите короткое и актуальное объяснение того, почему пользователю будет полезна установка вашего PWA.
Целевая страница
Целью целевой страницы является продвижение ваших продуктов и услуг, поэтому это одно из мест, где уместно широко рекламировать преимущества установки PWA.
Сначала объясните ценностное предложение вашего сайта, а затем сообщите посетителям, что они получат от установки.
Убедись, что ты:
- Обратитесь к функциям, которые наиболее важны для ваших посетителей, и подчеркните ключевые слова, которые могли бы привести их на вашу целевую страницу.
- Сделайте рекламу установки и призыв к действию привлекательными, но только после того, как вы ясно изложите свое ценностное предложение. В конце концов, это ваша целевая страница.
- Подумайте о том, чтобы добавить рекламу установки в ту часть вашего приложения, где пользователи проводят большую часть своего времени.
Установить баннер
Большинство пользователей сталкивались с установочными баннерами на мобильных устройствах и знакомы с взаимодействием, предлагаемым баннером. Баннеры следует использовать осторожно, поскольку они могут отвлекать пользователя.
Убедись, что ты:
- Прежде чем показывать баннер, подождите, пока пользователь проявит интерес к вашему сайту. Если пользователь отклоняет ваш баннер, не показывайте его снова, если только пользователь не инициирует событие конверсии, которое указывает на более высокий уровень взаимодействия с вашим контентом, например покупку на сайте электронной коммерции или регистрацию учетной записи.
- В баннере дайте краткое объяснение ценности установки PWA. Например, вы можете отличить установку PWA от приложения для iOS/Android, упомянув, что оно практически не использует хранилище на устройстве пользователя или что оно будет установлено мгновенно без перенаправления в магазин.
Временный интерфейс
Временный пользовательский интерфейс, такой как шаблон дизайна Snackbar , уведомляет пользователя и позволяет ему легко выполнить действие, в данном случае установку приложения. При правильном использовании подобные шаблоны пользовательского интерфейса не прерывают работу пользователя и обычно автоматически отклоняются, если пользователь игнорирует их.
Покажите снэкбар после нескольких взаимодействий с вашим приложением. Если оно появляется при загрузке страницы или вне контекста, его можно легко пропустить или привести к когнитивной перегрузке. Когда это произойдет, пользователи просто закроют все, что видят. Помните, что новые пользователи вашего сайта могут быть не готовы установить PWA. Поэтому перед использованием этого шаблона лучше подождать, пока вы не получите сильные сигналы заинтересованности пользователя, например повторные посещения, вход пользователя в систему или подобное событие-конверсию.
Убедись, что ты:
- Покажите закусочную в течение 4–7 секунд, чтобы у пользователей было достаточно времени, чтобы увидеть ее и отреагировать на нее, не мешая при этом.
- Не показывайте его поверх других временных интерфейсов, таких как баннеры и т. д.
- Прежде чем использовать этот шаблон, подождите, пока у вас не появятся сильные сигналы заинтересованности пользователя, например повторные посещения, вход пользователя в систему или подобное событие-конверсия.
После преобразования
Сразу после конверсии пользователя, например после покупки на сайте электронной коммерции, это отличная возможность рекламировать установку вашего PWA. Пользователь явно заинтересован вашим контентом, и конверсия часто сигнализирует о том, что пользователь снова будет пользоваться вашими услугами.
Бронирование или оформление поездки
Показывайте рекламу установки во время или после последовательного путешествия, например после оформления бронирования или оформления заказа. Если вы показываете рекламную акцию после того, как пользователь завершил путешествие, вы часто можете сделать ее более заметной после завершения путешествия.
Убедись, что ты:
- Включите соответствующий призыв к действию. Каким пользователям будет полезно установить ваше приложение и почему? Какое отношение это имеет к путешествию, в котором они сейчас находятся?
- Если у вашего бренда есть уникальные предложения для пользователей установленных приложений, упомяните их.
- Не допускайте, чтобы рекламная акция мешала следующим шагам вашего путешествия, иначе вы можете негативно повлиять на показатели завершения путешествия. В приведенном выше примере электронной коммерции обратите внимание, что ключевой призыв к оформлению заказа находится над рекламой установки приложения.
Процедура регистрации, входа или выхода
Эта рекламная акция представляет собой особый случай рекламной кампании «Путешествие» , где рекламная карта может быть более заметной.
Эти страницы обычно просматривают только заинтересованные пользователи, для которых ценностное предложение вашего PWA уже установлено. Кроме того, на этих страницах зачастую не так уж много другого полезного контента, который можно было бы разместить. В результате более крупный призыв к действию не мешает, если он не мешает.
Убедись, что ты:
- Не мешайте пользователю путешествовать внутри формы регистрации. Если это многоэтапный процесс, возможно, вам захочется подождать, пока пользователь завершит путешествие.
- Продвигайте функции, наиболее актуальные для зарегистрированного пользователя.
- Рассмотрите возможность добавления дополнительной рекламы установки в разделах вашего приложения, где выполнен вход.
Встроенные рекламные шаблоны
Методы онлайн-рекламы переплетают рекламные акции с контентом сайта. Зачастую это более тонкий процесс, чем продвижение в пользовательском интерфейсе, которое требует компромиссов. Вы хотите, чтобы ваше продвижение выделялось настолько, чтобы его заметили заинтересованные пользователи, но не настолько, чтобы оно ухудшало качество вашего пользовательского опыта.
Подача
Реклама установки в ленте появляется между новостными статьями или другими списками информационных карточек в вашем PWA.
Ваша цель — показать пользователям, как получить более удобный доступ к контенту, который им нравится. Сосредоточьтесь на продвижении функций и возможностей, которые будут полезны вашим пользователям.
Убедись, что ты:
- Ограничьте частоту рекламных акций, чтобы не раздражать пользователей.
- Предоставьте своим пользователям возможность отклонять рекламные акции.
- Помните, что ваш пользователь выбрал отказ.