Смарт-баннеры: Mobile Web-to-App

Краткий обзор. Источником большей части трафика веб-сайтов являются мобильные устройства. Использование смарт-баннеров в мобильной версии сайта позволяет конвертировать посетителей сайта в пользователей мобильного приложения. 

wc2a.jpg

Smart Banners

Смарт-баннеры:

  • Отображаются в мобильной версии сайта вашего бренда, чтобы повысить показатель конверсии пользователей с высокой мотивацией.
  • Измеряют качество установок приложения, сделанных посетителями мобильной версии сайта.
  • Обеспечивают точную мобильную атрибуцию Web Campaign-to-App (переходов в приложение из веб-кампаний) по ВСЕМ медиа-источникам, включая сети с самостоятельной атрибуцией (SRN).
  • Выполняют атрибуцию по кликам или по количеству показов:

    • Clicks: A user clicks the Smart Banners and proceeds to install.
    • Impressions: When the banner loads (user sees the banner), it sends an impression count event to AppsFlyer. 

Схема работы:

  1. Пользователь нажимает на рекламное объявление и направляется в мобильную версию сайта рекламодателя.
  2. В мобильной версии сайта рекламодателя отображается смарт-баннер.
  3. Пользователь нажимает на смарт-баннер:
    • если приложение не установлено, пользователь перенаправляется в магазин приложений для установки этого приложения;
    • если приложение установлено и настроены универсальные ссылки iOS, Android App Links и/или ссылки URI, приложение запускается.
  4. В приложении пользователь попадает на контент, связанный с рекламой.
  5. Данный пользователь атрибутируется медиа-источнику, показавшему исходное рекламное объявление.

 Примечание

Еще не решили, подходят ли вам смарт-баннеры как решение?
Сравните смарт-баннеры с другими решениями AppsFlyer Web-to-App.

Scope of work

Who's involved

Маркетолог и веб-разработчик.

  • Веб-разработчику достаточно вставить фрагмент кода в HTML-код сайта.
  • Для всех остальных действий по настройке нужен только маркетолог.

Prerequisites

  • An AppsFlyer account with at least one app
  • Шаблон OneLink со сведениями об одном или нескольких приложениях, которые требуется рекламировать с помощью смарт-баннеров.
    Он необходим, чтобы смарт-баннеры могли направлять посетителей мобильной версии сайта на нужные страницы магазина приложений в зависимости от используемых ими устройств. 

Time required

Approximately 20 minutes.

Outcome

  • Website visitors clicking the CTA button will be sent to the correct app store or web page based on their device.
  • Mobile app users clicking the CTA button can be deep-linked into the app.
  • Пользователи атрибутируются по клику/установке к вашему собственному медиа-источнику.

 Пример

Марк работает маркетологом в успешной компании по доставке продуктов Feed Me.
Марк хочет конвертировать посетителей мобильного сайта Feed Me в пользователей мобильного приложения. 

To do this Mark utilizes Smart Banners using his own visuals and texts.  

Smart Banners are powered by OneLink. When mobile website visitors click the CTA button, it automatically directs them to the appropriate app store or landing page, where it's easy for them to install the app. When existing mobile users click the CTA button, it launches the app. 

AppsFlyer then attributes the click/install to Mark's defined media source and campaign

 Важно!

Используйте либо смарт-баннер AppsFlyer, либо iOS Safari Smart App Banner, но не оба одновременно. Использование баннеров обоих типов может вызвать проблемы с отображением мобильной версии сайта и расхождения в атрибуции.

Процедура

Выполните следующие процедуры для настройки смарт-баннера, который:

  • направляет пользователей с мобильной версии сайта через смарт-баннер в нужный магазин приложений или на нужный экран приложения в соответствии с типами их устройств;
  • атрибутирует клики/установки вашим собственным медиа-источникам с помощью OneLink.

1. Настройка веб-сайта

Чтобы подготовить мобильную версию сайта к показу смарт-баннеров

  1. На дэшборде AppsFlyer перейдите в раздел Engagement & Deep Linking (Интеракции и диплинкинг) > Smart Banners (Смарт-баннеры).
  2. Нажмите Create Website workplace (Создать рабочую область сайта).

    SB_website_workplace_en-us.png

  3. Введите имя рабочей области сайта.
  4. Нажмите Create (Создать).
    Откроется рабочая область сайта. 
  5. Копируйте фрагмент кода баннера. 
  6. Отправьте фрагмент кода баннера своему front-end разработчику для вставки в код сайта.
    Ему нужно выполнить это простое действие один раз для всего сайта. На следующих этапах привлечение front-end разработчика не требуется. 
  7. [необязательно] Скопируйте веб-ключ. (Этот ключ уже есть во фрагменте кода).
  8. Нажмите Continue (Продолжить).

2. Настройка группы баннеров

Banner Groups contain one or more banners. Here you can:

  • Select the OneLink template used by the Banner Group, which contains the mobile apps to redirect your website visitors to.
  • Set a specific deep-linking scheme
  • Define your targeting rules, scheduling, behavior, and attribution details used by all banners of the Banner Group.
  • Set which pages activate the Banner Group's banners when visited.

To set up a new Banner Group:

  1. На дэшборде AppsFlyer перейдите в раздел Engagement & Deep Linking (Интеракции и диплинкинг) > Smart Banners (Смарт-баннеры).
  2. Слева выберите Add Banner Group (Добавить группу баннеров).
  3. Введите уникальное имя для группы баннеров.
    Оно должно отражать тему, в рамках которой эти баннеры объединены в группу (например, рекламируемое приложение).
  4. Select the OneLink template for the Banner Group.
  5. [необязательно] Задайте схему URI для группы баннеров в качестве резервного варианта для пользователей универсальных ссылок и Android App Links. Она редко оказывается нужна, так как по умолчанию значение берется из шаблона OneLink. Задавайте этот параметр для группы баннеров, только если вам нужно значение, отличное от указанного в шаблоне.
  6. В параметре Attributed sources (Атрибутированные источники) укажите, каким источникам будут атрибутироваться новые установки при переходе с этой группы баннеров. Обратитесь к следующей таблице, чтобы выбрать оптимальный вариант для настраиваемой ссылки.

    Опция Когда выбирать Комментарии
    Использовать параметры UTM  Выбирайте, если большинство неорганических посетителей попадают на мобильную версию сайта из источников с параметрами UTM. 
    • Имя медиа-источника (pid) = UTM_Source 
    • Кампания (c) = UTM_campaign
    • Если параметры UTM_source или UTM_campaign отсутствуют, в качестве резервных используются статические имена.
    Использовать параметры входящей ссылки атрибуции Выбирайте, если большинство неорганических посетителей попадают на мобильную версию сайта из рекламных сетей с оплатой за клики, использующих ссылки атрибуции AppsFlyer. 
    • Все доступные параметры из входящих ссылок атрибуции AppsFlyer добавляются к ссылке смарт-баннера. 
    • Если параметр задан и во входящей ссылке атрибуции AppsFlyer, и в смарт-баннере, то в окончательной настраиваемой ссылке приоритет имеет значение, указанное во входящей ссылке.
    Добавить другой параметр атрибуции  Если требуется, укажите дополнительные данные атрибуции, связанные с сайтом. Это позволит более детально анализировать каждую установку.  Так, для сайтов электронной коммерции можно создать идентичные настраиваемые ссылки по каждой категории товаров, которые будут отличаться значениями параметра af_adset (например, для фруктов "af_adset=fruit") 
    Использовать параметры атрибуции по умолчанию
    • Выбирайте, если большинство посетителей мобильной версии сайта являются органическими.
    • Выбирайте, если неорганические пользователи не попадают на сайт из рекламных сетей с оплатой за клики или из источников с параметрами UTM.  
    Важно! Рекомендуется выбирать параметры UTM или входящей ссылки атрибуции, т. к. заданные по умолчанию параметры атрибуции смарт-баннеров в любом случае используются в настраиваемой ссылке как резервный вариант на случай, если имена медиа-источника, кампании или канала будут недоступны.
  7. [Рекомендуется] Задайте значение используемого по умолчанию параметра атрибуции Channel name (Имя канала), чтобы все установки после перехода со смарт-баннера атрибутировались указанному каналу. Это позволяет агрегировать информацию из нескольких медиа-источников по одному каналу в когортном отчете, на обзорном дэшборде, в отчете об удержании пользователей и т. д. 
  8. [Необязательно] Задайте значение параметра Dismissal behavior (Поведение после закрытия), т. е. минимальный временной интервал между закрытием баннера пользователем и возможностью повторного показа этого баннера. Выберите один из вариантов:
    • By time: 1 hour, 1 day, or 1 week.
    • Следующая сессия: то есть сессия, которая происходит в другой вкладке или в другом окне после того, как пользователь закрыл баннер.
    • Never: the banner is not shown again. 
      Note: If the user clears the browser cache or views the site in private browsing mode the Dismissal Behaviour setting is lost.
  9. [дополнительно] Задайте значение параметра Frequency capping (Ограничение частоты показов). 
    Ограничение частоты показов определяет, сколько раз баннер может быть продемонстрирован уникальному пользователю. Например, если частота показов ограничена тремя, а пользователь заходит на сайт четыре раза, в первые три визита он будет видеть баннер, а начиная с четвертого — не будет. Ограничение частоты показов можно отключить. Выберите значение или отключите ограничение частоты показов.  
  10. [Необязательно] Определите время активации группы баннеров: незамедлительно (по умолчанию) или задайте кампанию, ограниченную по времени.
  11. [Необязательно] Задайте Locations (Местоположения), для которых активируется группа баннеров.
    1. Чтобы показывать эту группу баннеров всем пользователям, выберите опцию Worldwide (Во всем мире). При необходимости можно исключить посетителей из других регионов или стран. 
    2. Чтобы показывать эту группу баннеров пользователям из одного или нескольких конкретных местоположений, выберите Pick specific location (Выбрать конкретное местоположение).
  12. [Необязательно] Задайте значение параметра Show on pages (Показывать на страницах), определяющего, посетители каких страниц будут видеть эту группу баннеров:
    • [По умолчанию] Show on all pages (Показывать на всех страницах) сайта.
      Примечание. Рекомендуем настроить показ на всех страницах хотя бы для одной группы баннеров в качестве резервного варианта.
    • Show on specific pages: Specify the conditions for what the page or URL should or should not contain in order to display banners.  
      • You can choose either:
        • Specific page: Specify the host and/or path of the page on which to display the banner. Any queries entered will be disregarded. Example: http://www.example.com/path?query
        • URL: Specify the path and/or query, or the keyword in the path/query of the pages on which to display the banner. Example: http://www.example.com/path?query
      • С помощью операторов И/ИЛИ можно добавить до 5 условий.
      • В случае конфликта между условиями баннер не отображается. 
  13. Нажмите Create Banner Group (Создать группу баннеров).
  14. [Необязательно] Чтобы снова отредактировать группу баннеров, наведите курсор мыши на пункт Targeting & behavior (Таргетинг и поведение) и нажмите Edit (Редактировать).

 Пример

Марк работает маркетологом в сервисе доставки продуктов Feed Me. Он хочет создать рекламную кампанию для распродажи слив. Марк решает использовать SMS-рассылку, а также рекламные сети и Google.

Чтобы подготовить SMS-рассылку, Марк:

  • Добавляет уникальные параметры атрибуции в ссылку кампании по привлечению пользователей на страницу распродажи слив в мобильной версии сайта Feed Me. Эта ссылка содержит параметр pid с URL-адресом страницы распродажи слив: http://feedme.com/plums_link?pid=sms&c=plums.
  • Создает смарт-баннер (группу баннеров и сам баннер), задав для параметра Attributed sources (Атрибутируемые источники) значение Use incoming attribution link parameters (Использовать параметры входящей ссылки атрибуции), которое активируется для пользователей, посещающих страницы мобильной версии сайта с параметром "plums_link".

Чтобы подготовить кампанию с использованием рекламной сети, Марк:

  • Присваивает рекламной сети уникальную ссылку атрибуции, которая будет использоваться в кампании по привлечению пользователей на страницу распродажи слив в мобильной версии сайта Feed Me. Эта ссылка содержит параметр перенаправления af_r с URL-адресом страницы распродажи слив: http://feedme.com/plums_link. Дополнительные параметры не требуются.
  • Использует смарт-баннер, ранее созданный для SMS-кампании.

Чтобы подготовить кампанию с использованием Google Рекламы, Марк:

  • Создает копию страницы распродажи слив в мобильной версии сайта Feed Me: https://www.feedme.com/plums_utm?utm_source=google&utm_campaign=plums.
  • Создает копию смарт-баннера (группы баннеров и самого баннера); присваивает параметру Attributed sources (Атрибутируемые источники) значение Use UTM parameters (Использовать параметры UTM), которое активируется для пользователей, посещающих страницы мобильной версии сайта с параметром "plums_utm".

Кампания запускается.

Пользователи:

  • Видят рекламное объявление о распродаже слив, нажимают на него и переходят на мобильную версию сайта Feed Me.
  • Клики по объявлениям Google Рекламы приводят на лэндинг с UTM, а все остальные клики — на лэндинг входящей ссылки. На каждой странице активируется соответствующий смарт-баннер.
  • Видят смарт-баннер в мобильной версии сайта и нажимают на него. 
  • Попадают на страницу мобильного приложения Feed Me, загружают и устанавливают его. 
  • При запуске приложения попадают на экран, посвященный распродаже слив.
  • Корректно атрибутируются медиа-источникам, которые привели их на мобильную версию сайта Feed Me.

3. Настройка баннера

Чтобы создать баннер в группе баннеров:

  1. Нажмите Create Banner (Создать баннер), чтобы перейти на страницу редактирования баннеров.
  2. Задайте имя баннера.
  3. Создайте креатив:
    1. Нажмите Design creative (Создать креатив), чтобы задать креатив для баннера.
      Откроется окно для выбора шаблона баннера.

    2. Наведите курсор мыши на Creative template (Шаблон креатива) и нажмите Create (Создать), чтобы войти на страницу настройки креатива .
    3. Customize all the elements in the Smart Banner creative. To do so, select elements by name or click on them on the preview image. 
      1. Название
      2. Абзац
      3. Звезды рейтинга
      4. Кнопка закрытия
      5. Призыв к действию
      6. Логотип приложения
      7. Фон
      8. Используйте изображения следующих форматов: JPEG, JPG, PNG. 
        Примечание. Формат WEBP не поддерживается. Рекомендации по изображениям:

        Тип шаблона Максимальный размер файла DPI Пропорции
        Стандартный 300 КБ 72 9:4 (горизонтальный)

        Расширенный

        9:4 (горизонтальный)
        Рекламный 1:1
        Рекламная вставка 9:16 (вертикальное)
    4. Click Review to review the banner creative and test its appearance on different devices.
      Note: Banners may appear slightly different in active campaigns compared to preview images.
    5. If changes are needed, click Back to editor..
    6. Нажмите Done (Готово), чтобы вернуться на страницу настройки баннера.
  4. Когда новый креатив готов и сохранен, баннер получает статус активного. Используйте переключатель Status (Статус) для переключения между статусами Active (Активный) и Paused (Приостановлен). 
  5. [необязательно] Нажмите Add a parameter (Добавить параметр), чтобы включить дополнительные настраиваемые параметры атрибуции, например, Ad name (Имя рекламного объявления).
    • Чтобы преобразовать ссылку атрибуции из URL-адреса для привлечения пользователей в URL-адрес ретаргетинга, добавьте настраиваемый параметр is_retargeting=true.
  6. Нажмите Save all (Сохранить все), чтобы сохранить изменения, или Save all and close (Сохранить все и закрыть), чтобы сохранить изменения и закрыть страницу настройки баннера.

4. Тестирование

Когда креатив готов, перед публикацией и активацией для пользователей его нужно протестировать.

To test a Smart Banner's creative: 

Prerequisite: Make sure that the Smart Banner code snippet is integrated into your website.  

  1. На странице Test Creative (Тестирование креативов) введите ссылку на вашу страницу, в которую интегрирован SDK для смарт-баннеров (см. следующую вкладку).
  2. Нажмите Generate (Создать).
  3. Копируйте созданную ссылку и отправьте ее на тестовое устройство или сканируйте QR-код тестовым устройством. Ссылка или QR-код должны привести вас на веб-страницу, на которой отображается баннер с креативом.
  4. Нажмите Edit Creative (Редактировать креатив), чтобы вернуться к настройке креатива, или нажмите Done (Готово), чтобы сохранить креатив.

Limitations

Limitation Remarks
Tablets
  • Smart Banners are designed for mobile devices and their resolutions may not be optimized for tablets with large screens.
  • Browsers on tablets may not be recognized as mobile devices.
Была ли эта статья полезной?

Статьи в этом разделе