Smart app banner android

Как внедрить баннеры в Android приложение не перекрыв другие элементы

Баннеры – один из наиболее популярных видов рекламы в мобильных приложениях. Они не занимают много места, как, например, полноэкранная (interstitial) реклама. И позволяют совместить их с элементами пользовательского интерфейса приложения. Их можно добавить на разные экраны в приложении.

Прочитав данную статью, вы узнаете, как лучше вставить баннеры таким образом, чтобы они не мешали пользователю и не портили вид приложения. При этом вам не придётся изменять layout xml и вносить много изменений в код приложения. Вы можете внедрить баннеры в своё готовое приложение, добавив всего несколько строк кода. Подход, описанный в статье, универсальный, вы можете использовать его для API любых рекламных сервисов. Статья будет интересна как для новичков, так и для опытных разработчиков. Если вы — новичок в разработке, то для того, чтобы понять предмет статьи, от вас не потребуется каких-либо глубоких знаний. Достаточно понимания базовых концепций разработки под Android. А опытные разработчики могут найти в ней готовое решение, которое они могут внедрить у себя. Но инициализация рекламного сервиса, работа с конкретными рекламными API и кеширование находятся за пределами данной статьи. Для решения таких вопросов, пожалуйста, обратитесь к руководству для вашего конкретного рекламного сервиса.

Идея статьи возникла от того, что в одном из наших приложений для Android нам было необходимо разместить баннеры в нескольких местах, но сделать это следовало таким образом, чтобы не испортить вид приложения и не перекрыть баннерами элементы управления. Код приложения был уже написан полностью и перекраивать его нам очень не хотелось, поэтому мы постарались сделать так, чтобы добавление баннеров было максимально простым, корректным и не затрагивало работу существующего кода. Другая причина — нам потребовалось создать платную версию приложения без рекламы. А если бы внедрение баннеров потребовало бы изменение layout xml, то это сильно бы усложнило создание версии без рекламы.

Чтобы было более наглядно и понятно то, о чём я пишу, посмотрите на следующий экран:

Элементы пользовательского интерфейса занимают всё пространство экрана. Пустых мест нет. В таком случае, мы можем разместить баннер внизу или вверху. Вариант размещения баннера снизу предпочтительнее, так как баннер будет находится подальше от кнопок и пользователь не заденет баннер, случайно пытаясь нажать на «Выбрать» или «Назад». Нам необходимо разместить баннер снизу экрана под GridView с фото. Так как баннер загружается по сети, он может быть не сразу и не всегда недоступен. Следовательно, не в каждый момент времени его можно показать и может получиться пустое место снизу. Если мы оставим это пустое место – получится очень некрасиво. Будет выглядеть, как будто это грубая недоработка дизайна интерфейса. Если мы разместим баннер поверх GridView, то он перекроет собой части фото и создаст неудобства пользователю, что тоже недопустимо.

Тогда сводим задачу к тому, что нам необходимо сделать так, чтобы не было дополнительных отступов. А когда баннер загружен и может быть показан – динамически добавить отступ снизу и показать баннер. С другой стороны, нам необходимо сделать код размещения баннеров максимально простым, без сложных инициализаций. Т.е. передавать id элементов или ссылки на контейнеры (ViewGroup) недопустимо. Вставлять баннеры в layout xml каждого экрана, куда нам необходимо добавить баннер – тоже недостустимо, т.к. потребует значительных изменений. В идеале, код установки баннера должен выглядеть следующим образом:

Всего одна строка кода, один вызов метода, которому передаётся только ссылка на Activity в которой будет размещён баннер. Такой код можно вставить в метод Activity onCreate.

Динамическое добавление отступа

Для того, чтобы это реализовать, нам необходимо знать, что находится в View и получить к этому доступ. Прямого метода для доступа к content view в Activity нет. Но благодаря пользователю nickes со StackOverflow мы нашли решение. Необходимо идти через Window, в котором находится Activity. У Window есть DecorView, а в DecorView находится ContentView. Первый дочерний элемент в нём – это и есть ViewGroup из layout xml.

Так что нам требуется Window, затем мы получаем DecorView, затем получаем ContentView и затем получаем первый дочерний элемент ContentView. И у этого дочернего элемента мы изменяем отступ:

Размещение баннера

Мы нашли решение, как динамически добавить отступ. Теперь нам необходимо разместить сам баннер. У разных рекламных сервисов разные API. У некоторых есть View баннера, который вы можете создать и добавить в ViewGroup. Но некоторые рекламные API не имеют доступа к View баннера, а имеют только метод, который показывает баннер. Рассмотрим оба варианта.

API, в котором есть View баннера

Назовём класс View баннера — Banner. (Чтобы узнать, как он реально называется в вашем случае и как с ним работать, пожалуйста, обратитесь к руководству вашего рекламного сервиса.)

Сначала, нам необходимо создать объект Banner:

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

Когда баннер загружен, мы вызываем setupContentViewPadding, чтобы динамически добавить отступ снизу.

Затем мы добавляем наш баннер в Window. Мы добавляем его поверх существующих элементов. В классе Window есть метод addContentView для этого:

API без View баннера

У нас нет View баннера и мы не можем создать и разместить его явным образом. Но API имеет методы, вроде showBanner — показать баннер.

Я условно назову класс рекламного API — AdAPI (вам следует обратится к руководству вашего рекламного сервиса, чтобы узнать, как называется класс в которой есть методы размещения баннеров). В этом случае, код размещения баннера будет выглядеть примерно так:

Где BANNER_HEIGHT — константа равная высоте баннера.

Здесь возникают некоторые затруднения. Вам следует точно узнать или установить высоту баннера. У нас была такая проблема: мы запускали наше приложение на 3.7 дюймовом смартфоне и на 10.1 дюймовом планшете. Размеры баннера оказались разными на разных устройствах. На смартфоне баннер выглядел отлично, но на планшете он оказался слишком большим и отнял слишком много места у других элементов. Если ваш рекламный сервис позволяет явно задать высоту баннера — лучше задайте, чтобы не было таких неприятных неожиданностей.

Результат

Как вы можете видеть, баннер показан и не перекрывает другие элементы. Отступ снизу добавлен динамически.

Это то, что нам требовалось.

Использование

Подводя итог всему вышесказанному, привожу способ интеграции кода в ваше приложение.

Замените код в методе showBottomBanner на вызовы API вашего рекламного сервиса.

Чтобы разместить баннер, добавьте строчку кода Ads.showBottomBanner(this) в метод Activity onCreate.

Заключение

В статье я привёл описание как интегрировать баннеры в приложение наиболее корректным и простым способом. Есть и другие способы размещения баннеров. Например, можно взять первый экран показанный в статье и разместить баннер не снизу, а между элементами.

Надеюсь, статья была полезна для вас.

Пожалуйста, пишите ваши замечания в комментариях.

Благодарю за внимание. Успехов вам в разработке!

Источник

Демонстрация приложения — Smart App Banner

Как пользователь узнает о вашем приложении? Баннер приложения в Safari на вашем сайте.

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

Он даёт возможность разработчикам добавить один meta тег на свой сайт, чтобы в стандартном браузере (Safari) сверху экрана отобразился баннер со стандартной иконкой приложения и соответствующей кнопкой установить или открыть уже установленное приложение для заданного appID. Это позволит пользователям, зашедшим на мобильную или полную версию сайта увидеть, что у вас есть приложение под iOS (только с 6 версии).

name: apple-itunes-app
content: app-id=ID вашего приложения,
affiliate-data=данные по партнёрской программе (опционально),
app-argument=дополнительные параметры URL, для “бесшовного” перехода в приложение. Например, на конкретную страницу поиска или диалога (опционально)

Баннер можно закрыть, после второго раза он больше не появляется (но не известно на сколько). Он также не отображается, если устройство не поддерживает данное приложение или оно не доступно для данной локали.

P.S.
Яндекс, Вконтакте, Майл.ру, Хабр, Спортс.ру, Спортбокс, их мобильные версии и т.д. не поддерживают пока данного функционала.

Источник

Smart Banners

Smart Banners are ad units that render screen-width banner ads on any screen size across different devices in either orientation. Smart Banners detect the width of the device in its current orientation and create the ad view that size.

Three ad heights are implemented in smart banners:

Ad height	Screen height
32 dp	≤ 400 dp
50 dp	> 400 dp and ≤ 720 dp
90 dp	> 720 dp

Typically, Smart Banners on phones have a height of 50 dp in portrait and 32 dp in landscape. On tablets, height is normally 90 dp in both orientations.

When an image ad isn’t large enough to take up the entire allotted space, the image will be centered, and the space on either side will be filled in.

To use Smart Banners in XML, specify the constant SMART_BANNER for the ad size and set the width of the AdView to match_parent . For example:

To create a Smart Banner programmatically, use AdSize.SMART_BANNER as the ad size:

Kotlin

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Источник

Создаем Smart App Banner для iOS и Android

Если Вы впервые сталкиваетесь с термниом Smart App Banners, то одного взгляда на скриншот хватит для того чтобы понять, о чем идет речь. Думаю что все пользователи iOS или Android, хотя бы раз встречали такой вид баннера на каком-либо сайте. Smart App Banner это небольшая панелька, которая появляется в верхней части страницы и призывает пользователя установить приложение. Для сайтов имеющих свое нативное приложение в AppStore или Google Play это отличный способ для его рекламы.

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

1. iOS

Начнем с iOS, так как создать Smart Banner App для пользователей мобильных на этой системы, очень-очень просто. Для этого нам понадобиться узнать только id необходимого приложения в AppStore и добавить всего одну мета-строку в header сайта:

%айди_приложения% – заменить на настоящий

Для того чтобы проверить результат, откройте сайт в браузере Safari (только Safari понимает этот метатег, для других браузеров используем плагин jQuery Smart Banner) на iPhone/iPad или через iOS-симулятор.

2. Android

Для андроида, придется воспользоваться небольшим jQuery-плагином – jQuery Smart Banner. Примеры с кодом доступны на страничке с плагином.

Для сайтов на основе WordPress

Конечно же, для тех кто используют вордпресс, доступны готовые плагины, которые активируют смарт баннеры на сайте.Два самых популярных Smart App Banners и Smart App Banner

О сайте

ArtsLab

Блог для тех, кто интересуется разработкой сайтов, веб-дизайном и новыми событиями в интернете. В моем блоге Вы найдете записи на различные околокомпьютерные темы, обзоры сервисов и новинок, статьи по кодингу, советы, скрипты, темы и хаки для wordpress, уроки phostohop и многое другое.

Источник

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

Alex Austin

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Используя смарт-баннер 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.

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

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

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

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

Источник