Руководство по рекламным макетам Audience Network для Android
Устройства Android могут быть разной формы и размера, поэтому нужно учитывать, как нативная реклама будет выглядеть на различных экранах. Чтобы макет нативной рекламы выглядел единообразно на разных устройствах, он должен быть гибким. Это означает, что в нем не должны использоваться фиксированные размеры. Вместо этого он должен адаптироваться к текущему размеру и ориентации экрана.
Для создания адаптивного макета рекомендуется использовать ConstraintLayout из библиотеки API, совместимой с Android 2.3 (API level 9) и более поздних версий. Кроме того, в последней версии Android Studio есть редактор макетов, упрощающий создание ConstraintLayout. Ниже приведены инструкции по созданию пользовательского интерфейса нативной рекламы с помощью ConstraintLayout в редакторе макетов.
Прежде чем продолжить, обязательно ознакомьтесь с руководствами по началу работы с Audience Network и Android.
Предварительные требования
- Изучите примеры нативной рекламы и нативной баннерной рекламы.
- Ознакомьтесь с политикой Facebook по созданию качественных продуктов.
- Изучите руководство по созданию адаптивного пользовательского интерфейса с помощью ConstraintLayout.
- Изучите руководство по созданию пользовательского интерфейса с помощью редактора макетов.
Создание макета нативной рекламы
Шаг 1. Добавление библиотеки ConstraintLayout
Шаг 2. Компоновка верхней части нативной рекламы (включая значки, заголовок и подпись)
Шаг 3. Компоновка MediaView в нативной рекламе
Шаг 4. Компоновка социального контекста, текста рекламы и кнопки действия для нативной рекламы
Пример: полный XML-макет с ограничениями
Демонстрация: макет с ограничениями для разной ориентации и размеров экрана
Пример XML-макета с ограничениями для нативной баннерной рекламы
Пример: полный XML-макет с ограничениями
Демонстрация: макет с ограничениями для разной ориентации и размеров экрана
Политика в отношении нативной рекламы
Пример неправильных интерактивных элементов
Пример правильных интерактивных элементов
Создание макета нативной рекламы
Шаг 1. Добавление библиотеки ConstraintLayout
Чтобы использовать ConstraintLayout в проекте, сделайте следующее:
Чтобы использовать последнюю версию библиотеки ConstraintLayout, добавьте в файл build.gradle на уровне модуля (не проекта!) следующее выражение:
dependencies {
...
implementation 'com.android.support.constraint:constraint-layout:1.0.2'
}Если возникнут проблемы с разрешением Constraint Layout Library, убедитесь, что файл Gradle синхронизирован, и попробуйте перезапустить Android Studio.
После успешной синхронизации файла Gradle с библиотекой ConstraintLayout вы сможете создать файл макета XML с использованием ConstraintLayout:
Шаг 2. Компоновка верхней части нативной рекламы (включая значки, заголовок и подпись)
Сначала добавьте Horizontal Guidelines и установите для layout_constraintGuide_begin значение 55dp (для ограничения других представлений). Добавьте com.facebook.ads.MediaView, ограничьте верхний и левый края этого представления родительским макетом, а нижний край — направляющей линией.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white">
<com.facebook.ads.MediaView
android:id="@+id/native_ad_icon"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Guideline
android:id="@+id/below_ad_icon_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="55dp" />
...
</android.support.constraint.ConstraintLayout>Затем добавьте ещё один элемент Horizontal Guideline и установите для параметра layout_constraintGuide_begin значение 27.5dp (для отделения текста с названием рекламодателя и подписи спонсора). Добавьте элементы native_advertiser_name, native_ad_sponsored_label и ad_choices_container:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout>
...
<TextView
android:id="@+id/native_advertiser_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="6dp"
android:ellipsize="end"
android:lines="1"
android:textColor="@android:color/black"
android:textSize="15sp"
android:text="@string/placeholder"
app:layout_constraintStart_toEndOf="@+id/native_ad_icon"
app:layout_constraintBottom_toTopOf="@+id/separate_advertiser_name_guideline" />
<android.support.constraint.Guideline
android:id="@+id/separate_advertiser_name_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="27.5dp" />
<TextView
android:id="@+id/native_ad_sponsored_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="1"
android:textColor="@android:color/darker_gray"
android:textSize="12sp"
android:text="@string/placeholder"
app:layout_constraintStart_toStartOf="@+id/native_advertiser_name"
app:layout_constraintTop_toBottomOf="@+id/separate_advertiser_name_guideline" />
<LinearLayout
android:id="@+id/ad_choices_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginEnd="10dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
...
</android.support.constraint.ConstraintLayout>Шаг 3. Компоновка MediaView в нативной рекламе
Добавьте элемент MediaView и ограничьте его элементом Horizontal Guideline, созданным на шаге 2:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout>
...
<com.facebook.ads.MediaView
android:id="@+id/native_ad_media"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
app:layout_constraintEnd_toEndOf="@+id/ad_choices_container"
app:layout_constraintStart_toStartOf="@+id/native_ad_icon"
app:layout_constraintTop_toTopOf="@+id/below_ad_icon_guideline" />
...
</android.support.constraint.ConstraintLayout>Шаг 4. Компоновка социального контекста, текста рекламы и кнопки действия для нативной рекламы
Добавьте элементы native_ad_social_context, native_ad_body и native_ad_call_to_action и ограничьте их областью под элементом MediaView.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout>
...
<TextView
android:id="@+id/native_ad_social_context"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginStart="3dp"
android:ellipsize="end"
android:lines="1"
android:textColor="@android:color/darker_gray"
android:textSize="12sp"
android:text="@string/placeholder"
app:layout_constraintStart_toStartOf="@+id/native_ad_media"
app:layout_constraintTop_toBottomOf="@+id/native_ad_media" />
<TextView
android:id="@+id/native_ad_body"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:ellipsize="end"
android:gravity="center_vertical"
android:maxLines="2"
android:textColor="@android:color/black"
android:textSize="12sp"
android:text="@string/placeholder"
app:layout_constraintStart_toStartOf="@+id/native_ad_social_context"
app:layout_constraintTop_toBottomOf="@+id/native_ad_social_context" />
<Button
android:id="@+id/native_ad_call_to_action"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_marginTop="15dp"
android:background="#4286F4"
android:textSize="12sp"
android:textColor="@android:color/white"
android:text="@string/placeholder"
android:paddingStart="20dp"
android:paddingEnd="20dp"
app:layout_constraintEnd_toEndOf="@id/native_ad_media"
app:layout_constraintTop_toBottomOf="@+id/native_ad_media" />
...
</android.support.constraint.ConstraintLayout>Пример: полный XML-макет с ограничениями
Вот пример полного XML-макета с ограничениями для нативной рекламы:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white">
<com.facebook.ads.MediaView
android:id="@+id/native_ad_icon"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Guideline
android:id="@+id/below_ad_icon_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="55dp" />
<TextView
android:id="@+id/native_advertiser_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="6dp"
android:ellipsize="end"
android:lines="1"
android:textColor="@android:color/black"
android:textSize="15sp"
android:text="@string/placeholder"
app:layout_constraintStart_toEndOf="@+id/native_ad_icon"
app:layout_constraintBottom_toTopOf="@+id/separate_advertiser_name_guideline" />
<android.support.constraint.Guideline
android:id="@+id/separate_advertiser_name_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="27.5dp" />
<TextView
android:id="@+id/native_ad_sponsored_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="1"
android:textColor="@android:color/darker_gray"
android:textSize="12sp"
android:text="@string/placeholder"
app:layout_constraintStart_toStartOf="@+id/native_advertiser_name"
app:layout_constraintTop_toBottomOf="@+id/separate_advertiser_name_guideline" />
<LinearLayout
android:id="@+id/ad_choices_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginEnd="10dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<com.facebook.ads.MediaView
android:id="@+id/native_ad_media"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
app:layout_constraintEnd_toEndOf="@+id/ad_choices_container"
app:layout_constraintStart_toStartOf="@+id/native_ad_icon"
app:layout_constraintTop_toTopOf="@+id/below_ad_icon_guideline" />
<TextView
android:id="@+id/native_ad_social_context"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginStart="3dp"
android:ellipsize="end"
android:lines="1"
android:textColor="@android:color/darker_gray"
android:textSize="12sp"
android:text="@string/placeholder"
app:layout_constraintStart_toStartOf="@+id/native_ad_media"
app:layout_constraintTop_toBottomOf="@+id/native_ad_media" />
<TextView
android:id="@+id/native_ad_body"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:ellipsize="end"
android:gravity="center_vertical"
android:maxLines="2"
android:textColor="@android:color/black"
android:textSize="12sp"
android:text="@string/placeholder"
app:layout_constraintStart_toStartOf="@+id/native_ad_social_context"
app:layout_constraintTop_toBottomOf="@+id/native_ad_social_context" />
<Button
android:id="@+id/native_ad_call_to_action"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_marginTop="15dp"
android:background="#4286F4"
android:textSize="12sp"
android:textColor="@android:color/white"
android:text="@string/placeholder"
android:paddingStart="20dp"
android:paddingEnd="20dp"
app:layout_constraintEnd_toEndOf="@id/native_ad_media"
app:layout_constraintTop_toBottomOf="@+id/native_ad_media" />
</android.support.constraint.ConstraintLayout>Демонстрация: макет с ограничениями для разной ориентации и размеров экрана
Вы уже создали для нативной рекламы макет ConstraintLayout, который адаптируется под любую ориентацию и размер экрана. Макет ConstraintLayout будет выглядеть единообразно на телефонах и на планшетах Android. Примечание. Макет находится внутри ScrollView; он поддерживает прокрутку, если нативная реклама в ориентации Landscape на телефонах отображается не полностью.
Пример макета с ограничениями для нативной баннерной рекламы
Нативная баннерная реклама появилась в последней версии SDK Meta Audience Network. Последовательность действий по созданию макета с ограничениями для нативной баннерной рекламы аналогична последовательности для Native Ad. Вы можете создать макет Native Banner Ad, выполнив описанные выше действия, или скопировать в свой проект показанный ниже пример кода XML-макета.
Пример: полный XML-макет с ограничениями
Вот пример полного XML-макета с ограничениями для нативной баннерной рекламы:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="3dp">
<RelativeLayout
android:id="@+id/ad_choices_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="2dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/native_ad_sponsored_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="1"
android:textColor="@android:color/darker_gray"
android:textSize="12sp"
android:text="Placeholder"
app:layout_constraintStart_toEndOf="@id/ad_choices_container"
app:layout_constraintTop_toTopOf="parent" />
<com.facebook.ads.MediaView
android:id="@+id/native_ad_icon"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginTop="3dp"
android:gravity="center"
app:layout_constraintStart_toStartOf="@id/ad_choices_container"
app:layout_constraintTop_toBottomOf="@id/ad_choices_container" />
<TextView
android:id="@+id/native_advertiser_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="6dp"
android:textColor="@android:color/black"
android:textSize="15sp"
android:textStyle="bold"
android:ellipsize="end"
android:lines="1"
app:layout_constraintStart_toEndOf="@+id/native_ad_icon"
app:layout_constraintBottom_toTopOf="@+id/separate_advertiser_name_guideline" />
<android.support.constraint.Guideline
android:id="@+id/separate_advertiser_name_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="43dp" />
<TextView
android:id="@+id/native_ad_social_context"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"
android:ellipsize="end"
android:lines="1"
app:layout_constraintStart_toStartOf="@+id/native_advertiser_name"
app:layout_constraintTop_toBottomOf="@+id/separate_advertiser_name_guideline" />
<Button
android:id="@+id/native_ad_call_to_action"
android:layout_width="80dp"
android:layout_height="50dp"
android:gravity="center"
android:background="#4286F4"
android:textSize="12sp"
android:textColor="@android:color/white"
android:paddingLeft="3dp"
android:paddingRight="3dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@id/native_ad_icon" />
</android.support.constraint.ConstraintLayout>Демонстрация: макет с ограничениями для разной ориентации и размеров экрана
Соблюдение требований политики в отношении нативной рекламы
Чтобы создавать качественные продукты, при построении макета для нативной рекламы или нативной баннерной рекламы разработчики должны соблюдать политику Meta Audience Network. У пользователей должна быть возможность полностью контролировать взаимодействие с элементами на экране. В частности, интерактивными элементами в рекламе должны быть только заголовки, URL, призывы к действию и графические объекты. При этом пустое пространство в тексте заголовка и в графических представлениях не должно быть интерактивным.
Пример неправильных интерактивных элементов
При создании макета для нативной рекламы не используйте фиксированную ширину и высоту элементов TextView, AdIcon и MediaView, чтобы избежать появления white space в рекламных заголовках. Вот пример того, как не надо делать:
На экране это выглядит следующим образом:
Пример правильных интерактивных элементов
Для разработки качественной нативной рекламы или нативной баннерной рекламы создайте макет с ограничениями, следуя инструкциям выше. Например, для высоты и ширины компонентов TextView всегда следует использовать атрибут wrap_content. для элементов AdIcon и MediaView можно назначить фиксированную ширину или match_parent, однако для высоты нужно всегда использовать wrap_content. Здесь показан пример макета, соответствующего политике Meta Audience Network:
Дальнейшие действия
- Следуйте инструкциям, чтобы интегрировать в свое приложение разные форматы рекламы:
Тестирование интеграции рекламы в приложение
Отправьте приложение на проверку.
Как только мы получим запрос рекламы от вашего приложения или сайта, мы проверим его на соответствие Политике Audience Network и Нормам сообщества Facebook. Подробнее о нашем процессе проверки см. здесь.
Дополнительные ресурсы |
Руководство по началу работыТехническое руководство по началу работы с Audience Network | Справка по APIСправка по Facebook SDK для Android |