Нативная реклама

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

к сведению

Appodeal предоставляет 4 варианта реализации макета нативных объявлений: 3 шаблона + ваша пользовательская реализация. Все они наследуются от одного и того же класса NativeAdView.

NativeAdView состоит из следующих компонентов:

1. NativeIconView - Иконка нативного объявления.
2. AdAttributionView - Индикатор рекламы. Это TextView с надписью "Реклама".
3. TitleVIew - Заголовок нативного объявления.
4. DescriptionView - Текстовое описание нативного объявления.
5. RatingBarView - Рейтинг приложения в диапазоне [0-5].
6. NativeMediaView - Медиаконтент нативного объявления.
7. CallToActionView - Кнопка для клика.
8. AdChoiceView - Специальный рекламный значок, предоставленный рекламной сетью.

Реализация шаблонов:

Для их отображения все, что вам нужно сделать, это:

1. Создать программно или в файле макета один из классов шаблонов View

Классы шаблонов нативных представлений:

• NativeAdViewNewsFeed

• NativeAdViewAppWall

• NativeAdViewContentStream

NativeAdView для пользовательской реализации:

Для его отображения все, что вам нужно сделать, это:

1. Создать класс NativeAdVIew программно или в файле макета.
2. Внутри созданного NativeAdViewрасположить все необходимые View/IconView/MediaView для отображения в любом стиле, который вы предпочитаете.
3. Привязать программно или в файле макета все необходимые View/IconView/MediaView.

Нативное представление для пользовательской реализации:

• NativeAdView

Руководство по интеграции

Для шаблонов

1. Создайте программно или в файле макета один из классов шаблонов View:

XML

<com.appodeal.ads.nativead.NativeAdViewNewsFeed
    android:id="@+id/native_news_feed"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

<com.appodeal.ads.nativead.NativeAdViewAppWall
    android:id="@+id/native_app_wall"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

<com.appodeal.ads.nativead.NativeAdViewContentStream
    android:id="@+id/native_content_stream"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

Kotlin

val newsFeedView = NativeAdViewNewsFeed(context)
val appWallView = NativeAdViewAppWall(context)
val contentStreamView = NativeAdViewContentStream(context)

Java

NativeAdViewNewsFeed newsFeedView = new NativeAdViewNewsFeed(context);
NativeAdViewAppWall appWallView = new NativeAdViewAppWall(context);
NativeAdViewContentStream contentStreamView = new NativeAdViewContentStream(context);

2. Получите экземпляр представления из макета ИЛИ добавьте программно созданный ViewTemplate в иерархию ваших представлений:

Kotlin

val newsFeedView = findViewById<NativeAdViewNewsFeed>(R.id.native_news_feed);
val appWallView = findViewById<NativeAdViewAppWall>(R.id.native_app_wall);
val contentStreamView = findViewById<NativeAdViewContentStream>(R.id.native_content_stream);

rootView.addView(newsFeedView)
rootView.addView(appWallView)
rootView.addView(contentStreamView)

Java

NativeAdViewNewsFeed newsFeedView = findViewById(R.id.native_news_feed);
NativeAdViewAppWall appWallView = findViewById(R.id.native_app_wall);
NativeAdViewContentStream contentStreamView = findViewById(R.id.native_content_stream);

rootView.addView(newsFeedView);
rootView.addView(appWallView);
rootView.addView(contentStreamView);

3. Когда NativeAd загружен, просто зарегистрируйте его

Для одного NativeAd

Kotlin

if (Appodeal.isLoaded(Appodeal.NATIVE)) {
  newsFeedView.registerView(Appodeal.getNativeAdCount(1))
}

Java

if (Appodeal.isLoaded(Appodeal.NATIVE)) {
  newsFeedView.registerView(Appodeal.getNativeAdCount(1));
}

Для нескольких экземпляров NativeAd

Kotlin

val needToShow = 3

if (Appodeal.getAvailableNativeAdsCount() >= needToShow) {
    val nativeAds = Appodeal.getNativeAdCount(needToShow)
    newsFeedView.registerView(nativeAds[0])
    appWallView.registerView(nativeAds[1])
    contentStreamView.registerView(nativeAds[2])
}

Java

int needToShow = 3;

if (Appodeal.getAvailableNativeAdsCount() >= needToShow) {
    List<NativeAd> nativeAds = Appodeal.getNativeAdCount(needToShow);
    newsFeedView.registerView(nativeAds.get(0));
    appWallView.registerView(nativeAds.get(1));
    contentStreamView.registerView(nativeAds.get(2));
}

4. Когда отображение завершено и вы больше не планируете использовать NativeAdView, вам следует вызвать метод destroy:

Kotlin

nativeAdView.destroy()

Java

nativeAdView.destroy();

Для пользовательского макета

Общие требования:

• NativeAdView должен иметь минимальную высоту 32dp;
• NativeMediaView должен иметь минимальный размер 120dp x 120dp;
• AdAttributionView должен четко помечать вашу нативную рекламу как "Реклама", чтобы пользователи не приняли ее за контент;
• Вы можете уменьшать NativeIconView или NativeMediaView без изменения соотношения сторон;
• Вы можете симметрично обрезать NativeIconView или NativeMediaView до 20% только по одному измерению (высоте или ширине).

1. Создайте свой макет с NativeAdView в качестве корня:

подсказка

Вы можете построить макет с любым стилем, расположением элементов и с любым типом ViewGroup(ConstrainLayout, RelativeLayout, FrameLayout)

<?xml version="1.0" encoding="utf-8"?>
<com.appodeal.ads.nativead.NativeAdView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/nativeAdView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:adChoicePosition="end_top"
    app:callToActionViewId="@id/callToActionView"
    app:descriptionViewId="@id/descriptionView"
    app:iconViewId="@id/iconView"
    app:mediaViewId="@id/mediaView"
    app:ratingViewId="@id/ratingView"
    app:titleViewId="@id/titleView"
    app:adAttributionViewId="@+id/ad_attribution">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <com.appodeal.ads.nativead.NativeIconView
                android:id="@+id/iconView"
                android:layout_width="90dp"
                android:layout_height="90dp"
                android:layout_gravity="center_vertical"
                android:layout_margin="5dp" />

            <TextView
                android:id="@+id/ad_attribution"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/black"
                android:background="@color/red" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                    <TextView
                        android:id="@+id/titleView"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"/>

                </LinearLayout>

                <TextView
                    android:id="@+id/descriptionView"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:maxLines="3" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:layout_weight="1"
                        android:orientation="horizontal">

                        <RatingBar
                            android:id="@+id/ratingView"
                            style="?android:attr/ratingBarStyleSmall"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content" />
                    </LinearLayout>

                    <Button
                        android:id="@+id/callToActionView"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:minHeight="30dp" />
                </LinearLayout>
            </LinearLayout>
        </LinearLayout>

        <com.appodeal.ads.nativead.NativeMediaView
            android:id="@+id/mediaView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>
</com.appodeal.ads.nativead.NativeAdView>

Требования к элементам NativeAdView

Название представления	Тип	Обязательно	Описание
titleView	TextView	Обязательно	Заголовок нативного объявления. Должны всегда отображаться максимум 25 символов заголовка. В конце можно добавить многоточие, если заголовок длиннее.
callToActionView	Button	Обязательно	Кнопка призыва к действию. Должна отображаться без усечения на видимой кнопке.
descriptionView	TextView	Опционально	Текстовое описание нативного объявления. Если вы решили отобразить описание, вы должны отображать максимум 100 символов. В конце можно добавить многоточие.
ratingView	RatingBar	Опционально	Рейтинг приложения в диапазоне [0-5]
adAttributionView	TextView	Опционально	Индикатор рекламы. Это TextView с надписью "Реклама". Вы можете указать цвет текста и фона. См. настройки adAttribution. Вы можете разместить его в любом месте внутри NativeAdView.
adChoicesView	ViewGroup	Прикрепляется автоматически	Специальный рекламный значок, предоставленный рекламной сетью. Если SDK получил AdChoice от рекламной сети, он прикрепит его автоматически. Вы можете указать позицию в одном из углов NativeAdView. См. setAdChoice позицию
iconView	NativeIconView	Обязательно/Опционально	Медиаконтент нативного объявления.
mediaView	NativeMediaView	Обязательно/Опционально	Иконка нативного объявления.

примечание

NativeAdView должен содержать либо NativeIconView, либо NativeMediaView.

titleView, callToActionView и adAttributionView должны быть добавлены в любом случае.

2. Установите идентификаторы всех дочерних представлений NativeAdView.

подсказка

Вы можете сделать это либо в XML-файле макета (рекомендуемый способ), либо программно.

XML

<com.appodeal.ads.nativead.NativeAdView
    app:callToActionViewId="@id/callToActionView"
    app:descriptionViewId="@id/descriptionView"
    app:iconViewId="@id/iconView"
    app:mediaViewId="@id/mediaView"
    app:ratingViewId="@id/ratingView"
    app:titleViewId="@id/titleView">
    app:adAttributionViewId="@id/adAttribution">

Kotlin

val nativeAdView: NativeAdView = ...

nativeAdView.titleViewId = R.id.titleView
nativeAdView.callToActionViewId = R.id.callToActionView
nativeAdView.descriptionViewId = R.id.descriptionView
nativeAdView.ratingViewId = R.id.ratingView
nativeAdView.iconViewId = R.id.iconView
nativeAdView.mediaViewId = R.id.mediaView
nativeAdView.adAttributionViewId = R.id.adAttribution

// ИЛИ

nativeAdView.titleView = findViewById(R.id.titleView)
nativeAdView.callToActionView = findViewById(R.id.callToActionView)
nativeAdView.descriptionView = findViewById(R.id.descriptionView)
nativeAdView.ratingView = findViewById(R.id.ratingView)
nativeAdView.iconView = findViewById(R.id.iconView)
nativeAdView.mediaView = findViewById(R.id.mediaView)
nativeAdView.adAttributionView = findViewById(R.id.adAttribution)

Java

NativeAdView nativeAdView: NativeAdView = ...

nativeAdView.setTitleViewId(R.id.titleView);
nativeAdView.setCallToActionViewId(R.id.callToActionView);
nativeAdView.setDescriptionViewId(R.id.descriptionView);
nativeAdView.setRatingViewId(R.id.ratingView);
nativeAdView.setIconViewId(R.id.iconView);
nativeAdView.setMediaViewId(R.id.mediaView);
nativeAdView.setAdAttributionViewId(R.id.adAttribution);

// ИЛИ
nativeAdView.setTitleView(findViewById(R.id.titleView));
nativeAdView.setCallToActionView(findViewById(R.id.callToActionView));
nativeAdView.setDescriptionView(findViewById(R.id.descriptionView));
nativeAdView.setRatingView(findViewById(R.id.ratingView));
nativeAdView.setIconView(findViewById(R.id.iconView));
nativeAdView.setMediaView(findViewById(R.id.mediaView));
nativeAdView.setAdAttributionView(findViewById(R.id.adAttribution));

3. Когда NativeAd загружен, просто зарегистрируйте его для показа:

Для одного NativeAd

Kotlin

if (Appodeal.isLoaded(Appodeal.NATIVE)) {
  newsFeedView.registerView(Appodeal.getNativeAdCount(1))
}

Java

if (Appodeal.isLoaded(Appodeal.NATIVE)) {
  newsFeedView.registerView(Appodeal.getNativeAdCount(1));
}

Для нескольких экземпляров NativeAd

Kotlin

val needToShow = 3

if (Appodeal.getAvailableNativeAdsCount() >= needToShow) {
    val nativeAds = Appodeal.getNativeAdCount(needToShow)
    nativeAdView1.registerView(nativeAds[0])
    nativeAdView2.registerView(nativeAds[1])
    nativeAdView3.registerView(nativeAds[2])
}

Java

int needToShow = 3;

if (Appodeal.getAvailableNativeAdsCount() >= needToShow) {
    List<NativeAd> nativeAds = Appodeal.getNativeAdCount(needToShow);
    nativeAdView1.registerView(nativeAds.get(0));
    nativeAdView2.registerView(nativeAds.get(1));
    nativeAdView3.registerView(nativeAds.get(2));
}

4. Когда отображение завершено и вы больше не планируете использовать NativeAdView, вам следует вызвать метод destroy:

Kotlin

nativeAdView.destroy()

Java

nativeAdView.destroy();

подсказка

Если вы хотите показать новое NativeAd внутри используемого nativeAdView, просто вызовите метод nativeAdView.registerView(newNativeAd).

Проверить, загружено ли объявление

Чтобы проверить, загружен ли хотя бы 1 экземпляр NativeAd, используйте метод:

Kotlin

Appodeal.isLoaded(Appodeal.NATIVE)

Java

Appodeal.isLoaded(Appodeal.NATIVE);

Чтобы узнать, сколько экземпляров NativeAd загружено, используйте метод:

Kotlin

val nativeAmount = Appodeal.getAvailableNativeAdsCount()

Java

int nativeAmount = Appodeal.getAvailableNativeAdsCount();

примечание

По умолчанию Appodeal SDK с включенным AutoCache загружает по 2 экземпляра NativeAd

подсказка

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

Получить загруженные нативные объявления

Чтобы получить загруженные нативные объявления, используйте следующий метод:

Kotlin

val nativeAds: List<NativeAd> = Appodeal.getNativeAds(amount)

Java

List<NativeAd> nativeAds = Appodeal.getNativeAds(int amount);

осторожно

Как только вы получаете объявления, они удаляются из кэша нашего SDK.

Отображение

Чтобы отобразить NativeAd, вам необходимо вызвать следующий код:

Kotlin

NativeAdView.registerView(nativeAd: NativeAd)

Java

NativeAdView.registerView(NativeAd nativeAd);

осторожно

SDK не может показывать рекламу без сетевого подключения!

NativeAdView.registerView() возвращает булево значение, указывающее, был ли вызов метода show передан соответствующему SDK.

к сведению

До вызова метода registerView(nativeAd), NativeAdView находится в состоянии visibility == GONE. После вызова состояние автоматически изменится на visibility == VISIBLE.

Вам не нужно изменять состояние видимости, Appodeal SDK делает это автоматически.

После вызова destroy(), состояние автоматически изменится на visibility == GONE.

подсказка

NativeAdView и его преемники имеют встроенный атрибут tools:visibility="visible" поэтому представление будет отображаться в вашей разметке IDE во время разработки.

Размещения

Appodeal SDK позволяет помечать каждое впечатление различными размещениями. Чтобы использовать размещения, вам необходимо создать их в Панели управления Appodeal. Подробнее о размещениях.

Чтобы показать объявление с размещением, вам нужно вызвать метод show:

Kotlin

NativeAdView.registerView(nativeAd: NativeAd, yourPlacementName: String)

Java

NativeAdView.registerView(NativeAd nativeAd, String yourPlacementName)

к сведению

Если загруженное объявление не может быть показано для конкретного размещения, ничего не будет показано.

Если включено автоматическое кэширование, SDK начнет кэшировать другое объявление, что может повлиять на частоту показов. Чтобы сохранить загруженное объявление для будущего использования (например, для другого размещения), проверьте, может ли объявление быть показано, прежде чем вызывать метод show:

Kotlin

if (NativeAd.canShow(context: Context, yourPlacementName: String)) {
    NativeAdView.registerView(nativeAd: NativeAd, yourPlacementName: String)
}

Java

if (NativeAd.canShow(Context context, String yourPlacementName)) {
    NativeAdView.registerView(NativeAd nativeAd, String yourPlacementName)
}

Вы можете настроить логику показов для каждого размещения.

к сведению

Если у вас нет размещений или вы вызываете NativeAdView.registerView с несуществующим размещением, показ будет помечен как 'default', и будут применены его настройки.

примечание

Настройки размещения влияют ТОЛЬКО на показ рекламы, а не на загрузку или кэширование.

Отмена регистрации View

Чтобы отменить регистрацию представления для отображения текущего зарегистрированного нативного объявления, используйте метод:

Kotlin

NativeAdView.unregisterView()

Java

NativeAdView.unregisterView();

примечание

Метод UnregisterView не скрывает NativeAdView. Он приостанавливает отслеживание показа нативного объявления.

подсказка

UnregisterView имеет смысл использовать, например, если NativeAdView выходит за пределы экрана при прокрутке в списке или временно перекрывается другим View/Fragment/Activity

Удаление

Чтобы удалить представление нативного объявления и выполнить все необходимые очистки, а также скрыть NativeAdView, используйте метод:

Kotlin

NativeAdView.destroy()

Java

NativeAdView.destroy();

к сведению

Этот метод следует вызывать, когда нативное объявление больше не требуется.

Также при вызове destroy() запускается логика unregisterView.

Распространенные ошибки

• Нет adAttributionView

Большинство рекламных сетей требуют от издателей добавлять специальную пометку к нативному объявлению, чтобы пользователи не спутали их с контентом. Вот почему вы всегда должны убедиться, что нативные объявления в вашем приложении имеют атрибуцию рекламы (например, «Реклама») или значок AdChoices.

• Отсутствие необходимых элементов нативной рекламы

Каждое нативное объявление должно содержать:

• titleView TextView;

• кнопку callToActionView;

• adAttribution TextView;

• NativeIconView или NativeMedaiaView.

• Изменение элементов нативной рекламы

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

• Наложение элементов нативной рекламы друг на друга

Убедитесь, что все элементы нативного объявления видны и не наложены друг на друга.

Требования к нативным объявлениям:

• Все поля нативной рекламы, отмеченные как обязательные, должны быть отображены.
• Изображения могут быть изменены для соответствия вашему рекламному пространству, но не должны быть значительно искажены или обрезаны.

Проверка видимости

Вы всегда можете проверить в логах, был ли отслежен показ и видно ли ваше объявление.

Вы увидите лог Native [Notify Shown], если показ был успешно отслежен.

Log

Appodeal  com.example.app  D Native [Notify Shown]

---

Вы можете использовать наше демо-приложение в качестве примера проекта.

Демо-приложение

---

Если вы хотите использовать расширенную интеграцию нативной рекламы, подробную документацию вы можете найти здесь