JourneysВеб-приложениеСмарт-баннер

Как установить Smart App Banner на iOS и Android

By Март 29, 2017 No Comments

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

Например, представьте, что существующий пользователь вашего приложения публикует в Facebook ссылку на статью, размещенную в вашем приложении, и несколько новых пользователей переходят по ссылке на эту статью. Если при этом вместо страницы со статьей откроется страница вашего приложения в App Store, то пользователи будут этим недовольны, они просто закроют App Store и вернутся в Facebook. Именно для таких сценариев и предназначены смарт-баннеры приложений.

Что такое смарт-баннер приложений?

Это мобильный смарт-баннер, занимающий часть экрана на мобильном веб-сайте и предлагающий пользователям открыть вместо веб-сайта мобильное приложение либо установить его, если оно еще не установлено. Это «умная ссылка», включающая всю логику переадресации, необходимую, чтобы автоматически открывать приложение, если оно уже установлено на устройстве, или открывать страницу приложения в App Store, если оно не установлено.

Smart App Banner Example

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

Что делает смарт-баннер приложений в Apple iOS?

В iOS 6 корпорация Apple выпустила браузер Safari с полностью интегрированными возможностями смарт-баннера приложений В последующих версиях внешний вид и возможности браузера претерпели ряд изменений, но нужная функциональность по-прежнему поддерживается.

Smart app banner on iOS

При нажатии на баннер возможно два результата. Если приложение установлено, при нажатии на баннер оно будет открыто путем вызова его схемы URI с сопровождающими параметрами прямой ссылки. Если приложение не установлено, то при нажатии на баннер откроется страница приложения в App Store.

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

  1. Действие «Просмотреть» всегда изменится на «Открыть», если iOS обнаружит, что приложение установлено.
  2. При загрузке приложения на смарт-баннере отображается индикатор хода выполнения.

Кроме того, действуют и существенные ограничения.

  1. Поддерживается только Safari для iOS.
  2. Невозможно изменять разметку, цвет и содержимое.
  3. Невозможно отслеживать нажатия и загрузки.
  4. Прямые ссылки (ведущие пользователей непосредственно к определенному содержимому) работают только в случае, если приложение уже установлено.

Существует ли смарт-баннер приложений для Android?

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

  1. Подключаемый модуль смарт-баннера приложений для jQueryhttps://github.com/jasny/jquery.smartbanner (больше не поддерживается)
  2. Подключаемый модуль смарт-баннера приложений без использования jQueryhttps://github.com/kudago/smart-app-banner

Межплатформенный смарт-баннер приложений Branch

Branch применяется ежедневно для ссылок на десятки тысяч приложений, при этом используются и динамически сформированные ссылки из SDK iOS/Android, и маркетинговые ссылки, созданные вручную на панели мониторинга Branch. Эти ссылки работают во всех операционных системах и браузерах и в зависимости от того, установлено ли приложение, направляют пользователя либо в ваше приложение, либо в App Store.

Опираясь на этот опыт, мы создали полностью настраиваемое, межплатформенное решение смарт-баннера с возможностями отслеживания и прямых ссылок. Это решение работает во всех браузерах, в том числе в Safari, Chrome, Firefox, и встроенных браузерах Android.

Пример баннера на iOS:

smartbanner-blog3-cut_1.png

Пример баннера Branch на настольном компьютере:

desktop_banner1.png

Используя смарт-баннер Branch, вы получаете не только полную функциональность смарт-баннера Apple iOS, но и следующие удобные возможности.

  1. Умная система перехода к приложению либо в App Store

При нажатии на баннер происходит переадресация в приложение или на страницу приложения в App Store. Если приложение уже установлено, оно будет открыто. Если приложение не установлено, то при нажатии баннера откроется страница приложения в App Store..

  1. Поддержка разных платформ

Поддерживаются все мобильные браузеры и все мобильные операционные системы. Достаточно один раз создать смарт-баннер для iOS или для Android, чтобы потом везде его использовать.

  1. Обнаружение установленных приложений

Если ваше приложение содержит SDK Branch, а пользователь хотя бы один раз открывал его, мы можем автоматически обновить вызов действия с «Установить» на «Открыть», как это делается на платформе Apple, а также предоставить возможность настройки сообщений вызова действия.

  1. Настройка в соответствии с целевой аудиторией

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

  1. Тестирование A/B

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

  1. Отслеживание загрузок

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

  1. Прямые ссылки

Можно задать словарь данных для передачи приложению, чтобы пользователь переходил к определенному продукту или к определенному содержимому в приложении, такая технология называется «прямыми ссылками». Решения Branch отличаются передовыми характеристиками по точности сопоставления. Это означает, что вы получите параметры прямой ссылки при первой установке из App Store, чтобы настроить процесс освоения для всех пользователей (как новых, так и повторных).

  1. Настраиваемая разметка, цвет, содержимое и значки смарт-баннера.

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

Руководство по настройке универсальных смарт-баннеров с помощью решений Journey

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

  1. Создание неограниченного количества потенциальных аудиторий на основе действий пользователей на веб-странице и в приложении в зависимости от исходного сайта, операционной системы и т. д.
  2. Выбор любого из готовых шаблонов с возможностью полного контроля над разметкой и дизайна ваших ресурсов.
  3. Просмотр производительности в реальном времени с разделением по каждому решению Journey. Подробное назначение действий решениям Journey. Внедрение улучшений без изменения кода.

Руководство по настройке универсальных смарт-баннеров

Приступить к работе со смарт-баннером Branch с помощью решений Journey очень просто. Вот пошаговое руководство.

 

Шаг 1. Настройте переадресацию ссылок

Сначала перейдите по адресу https://start.branch.io и следуйте инструкциям. Нужно будет задать все конечные точки, чтобы система знала, куда перенаправлять пользователей в каждом сценарии.

Шаг 2: Добавить Web SDK на ваш сайт

Затем получите ключ Branch на панели мониторинга по адресу https://dashboard.branch.io/#/settings. Вставьте приведенный ниже фрагмент кода в теги Javascript на вашем сайте. Добавьте ключ, полученныйна странице настроек, в раздел YOUR-BRANCH-KEY.

<script type="text/javascript">
  (function(b,r,a,n,c,h,_,s,d,k){if(!b[n]||!b[n]._q){for(;s<_.length;)c(h,_[s++]);d=r.createElement(a);d.async=1;d.src="https://cdn.branch.io/branch-latest.min.js";k=r.getElementsByTagName(a)[0];k.parentNode.insertBefore(d,k);b[n]=h}})(window,document,"script","branch",function(b,r){b[r]=function(){b._q.push([r,arguments])}},{_q:[],_v:1},"addListener applyCode banner closeBanner creditHistory credits data deepview deepviewCta first getCode init link logout redeem referrals removeListener sendSMS setBranchViewData setIdentity track validateCode".split(" "), 0);
 	branch.init('YOUR-BRANCH-KEY');
</script>

 

Шаг 3. Настройте смарт-баннер приложения с помощью решений Journey

Перейдите в раздел Journeys на панели мониторинга Branch и используйте мастер для настройки смарт-баннера вашего приложения. Полная документацияо Journey доступна на нашем портале разработчиков.

Шаг 4. Настройте приложение iOS или Android для поддержки прямых ссылок

Наконец, можно настроить ваше приложение для использования отложенных прямых ссылок и отслеживания установки. Это очень удобно сделать, если воспользоваться инструкциями по интеграции, опубликованными на этом сайте для iOS или Android.
Готово!