Родной расширенный

Отображение нативной рекламы

Когда загружается нативное объявление, Google Mobile Ads SDK вызывает прослушиватель соответствующего формата объявления. Затем ваше приложение отвечает за отображение рекламы, хотя оно не обязательно должно делать это немедленно. Чтобы упростить отображение определенных системой форматов объявлений, SDK предлагает несколько полезных ресурсов, описанных ниже.

Класс NativeAdView

Для формата NativeAd существует соответствующий класс NativeAdView . Этот класс представляет собой ViewGroup , который издатели должны использовать в качестве корня для NativeAd . Один NativeAdView соответствует одному нативному объявлению. Каждое представление, используемое для отображения ресурсов этого объявления (например, ImageView , отображающее ресурс снимка экрана), должно быть дочерним элементом объекта NativeAdView .

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

<com.google.android.gms.ads.nativead.NativeAdView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <LinearLayout
    android:orientation="vertical"
    ... >
        <LinearLayout
        android:orientation="horizontal"
        ... >
          <ImageView
           android:id="@+id/ad_app_icon"
           ... />
          <TextView
            android:id="@+id/ad_headline"
            ... />
         </LinearLayout>


         // Other assets such as image or media view, call to action, etc follow.
         ...
    </LinearLayout>
</com.google.android.gms.ads.nativead.NativeAdView>

Вот пример создания NativeAdView и заполнения его NativeAd :

Джава

AdLoader.Builder builder = new AdLoader.Builder(this, "AD_UNIT_ID")
    .forNativeAd(new NativeAd.OnNativeAdLoadedListener() {
        @Override
        public void onNativeAdLoaded(NativeAd nativeAd) {
            // Assumes you have a placeholder FrameLayout in your View layout
            // (with id fl_adplaceholder) where the ad is to be placed.
            FrameLayout frameLayout =
                findViewById(R.id.fl_adplaceholder);
            // Assumes that your ad layout is in a file call native_ad_layout.xml
            // in the res/layout folder
            NativeAdView adView = (NativeAdView) getLayoutInflater()
                .inflate(R.layout.native_ad_layout, null);
            // This method sets the text, images and the native ad, etc into the ad
            // view.
            populateNativeAdView(nativeAd, adView);
            frameLayout.removeAllViews();
            frameLayout.addView(adView);
        }
});

Котлин

val builder = AdLoader.Builder(this, "AD_UNIT_ID")
    .forNativeAd { nativeAd ->
        // Assumes that your ad layout is in a file call native_ad_layout.xml
        // in the res/layout folder
        val adView = layoutInflater
                .inflate(R.layout.native_ad_layout, null) as NativeAdView
        // This method sets the text, images and the native ad, etc into the ad
        // view.
        populateNativeAdView(nativeAd, adView)
        // Assumes you have a placeholder FrameLayout in your View layout
        // (with id ad_frame) where the ad is to be placed.
        ad_frame.removeAllViews()
        ad_frame.addView(adView)
    }

Обратите внимание, что все ресурсы для данного нативного объявления должны отображаться внутри макета NativeAdView . Google Mobile Ads SDK пытается зарегистрировать предупреждение, когда нативные ресурсы отображаются за пределами макета представления нативной рекламы.

Классы представления рекламы также предоставляют методы, используемые для регистрации представления, используемого для каждого отдельного актива, а также методы для регистрации самого объекта NativeAd . Регистрация представлений таким образом позволяет SDK автоматически выполнять такие задачи, как:

  • Запись кликов
  • Запись показов, когда на экране виден первый пиксель
  • Отображение наложения AdChoices для нативных креативов для заполнения — в настоящее время доступно только избранной группе издателей

Наложение «Выбор рекламы»

Оверлей AdChoices добавляется SDK в качестве просмотра рекламы при возврате объявления для заполнения. Если в вашем приложении используется заполнение нативной рекламой, оставьте место в предпочитаемом вами углу просмотра нативной рекламы для автоматически вставляемого логотипа AdChoices. Кроме того, важно, чтобы наложение AdChoices было хорошо видно, поэтому выбирайте соответствующие цвета фона и изображения. Дополнительную информацию о внешнем виде и функциях наложения см. в рекомендациях по реализации программных нативных объявлений .

Атрибуция рекламы для программных нативных объявлений

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

Пример кода

Вот шаги для показа нативной рекламы:

  1. Создайте экземпляр класса NativeAdView .
  2. Для каждого рекламного объекта, который будет отображаться:
    1. Заполните представление актива активом в объекте объявления.
    2. Зарегистрируйте представление актива в классе ViewGroup .
  3. Зарегистрируйте MediaView если ваш собственный макет объявления включает в себя большой медиаресурс.
  4. Зарегистрируйте объект объявления в классе ViewGroup .

Вот пример функции, отображающей NativeAd :

Джава

private void displayNativeAd(ViewGroup parent, NativeAd ad) {

    // Inflate a layout and add it to the parent ViewGroup.
    LayoutInflater inflater = (LayoutInflater) parent.getContext()
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    NativeAdView adView = (NativeAdView) inflater
            .inflate(R.layout.ad_layout_file, parent);

    // Locate the view that will hold the headline, set its text, and call the
    // NativeAdView's setHeadlineView method to register it.
    TextView headlineView = adView.findViewById<TextView>(R.id.ad_headline);
    headlineView.setText(ad.getHeadline());
    adView.setHeadlineView(headlineView);

    ...
    // Repeat the above process for the other assets in the NativeAd
    // using additional view objects (Buttons, ImageViews, etc).
    ...

    // If the app is using a MediaView, it should be
    // instantiated and passed to setMediaView. This view is a little different
    // in that the asset is populated automatically, so there's one less step.
    MediaView mediaView = (MediaView) adView.findViewById(R.id.ad_media);
    adView.setMediaView(mediaView);

    // Call the NativeAdView's setNativeAd method to register the
    // NativeAdObject.
    adView.setNativeAd(ad);

    // Ensure that the parent view doesn't already contain an ad view.
    parent.removeAllViews();

    // Place the AdView into the parent.
    parent.addView(adView);
}

Котлин

fun displayNativeAd(parent: ViewGroup, ad: NativeAd) {

    // Inflate a layout and add it to the parent ViewGroup.
    val inflater = parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE)
            as LayoutInflater
    val adView = inflater.inflate(R.layout.ad_layout_file, parent) as NativeAdView

    // Locate the view that will hold the headline, set its text, and use the
    // NativeAdView's headlineView property to register it.
    val headlineView = adView.findViewById<TextView>(R.id.ad_headline)
    headlineView.text = ad.headline
    adView.headlineView = headlineView

    ...
    // Repeat the above process for the other assets in the NativeAd using
    // additional view objects (Buttons, ImageViews, etc).
    ...

    val mediaView = adView.findViewById<MediaView>(R.id.ad_media)
    adView.mediaView = mediaView

    // Call the NativeAdView's setNativeAd method to register the
    // NativeAdObject.
    adView.setNativeAd(ad)

    // Ensure that the parent view doesn't already contain an ad view.
    parent.removeAllViews()

    // Place the AdView into the parent.
    parent.addView(adView)
}

Вот индивидуальные задания:

  1. Раздувание макета

    Джава

    LayoutInflater inflater = (LayoutInflater) parent.getContext()
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    NativeAdView adView = (NativeAdView) inflater
            .inflate(R.layout.ad_layout_file, parent);
    

    Котлин

    val inflater = parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE)
            as LayoutInflater
    val adView = inflater.inflate(R.layout.ad_layout_file, parent) as NativeAdView
    

    Этот код наполняет XML-макет, содержащий представления для отображения собственного объявления, а затем находит ссылку на NativeAdView . Обратите внимание, что вы также можете повторно использовать существующий NativeAdView если он есть в вашем фрагменте или действии, или даже создать экземпляр динамически, не используя файл макета.

  2. Заполнение и регистрация представлений активов

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

    Джава

    TextView headlineView = adView.findViewById<TextView>(R.id.ad_headline);
    headlineView.setText(ad.getHeadline());
    adView.setHeadlineView(headlineView);
    

    Котлин

    val headlineView = adView.findViewById<TextView>(R.id.ad_headline)
    headlineView.text = ad.headline
    adView.headlineView = headlineView
    

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

  3. Обработка кликов

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

    Клики по объектам просмотра объявлений обрабатываются SDK, если вы правильно заполняете и регистрируете представления ресурсов, как описано в предыдущем разделе.

    Вот пример, в котором прослушиватель рекламы используется для наблюдения за событиями кликов:

    Джава

    AdLoader adLoader = new AdLoader.Builder(context, "/6499/example/native")
        ...
        .withAdListener(new AdListener() {
            @Override
            public void onAdFailedToLoad(LoadAdError adError) {
                // Handle the failure by logging, altering the UI, and so on.
            }
            @Override
            public void onAdClicked() {
                // Log the click event or other custom behavior.
            }
        })
        .build();
    

    Котлин

    val adLoader = AdLoader.Builder(this, "/6499/example/native")
        ...
        .withAdListener(object : AdListener() {
            override fun onAdFailedToLoad(adError: LoadAdError) {
                // Handle the failure by logging, altering the UI, and so on.
            }
        })
        .build()
    
  4. Зарегистрируйте МедиаВью

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

    MediaView — это специальный View , предназначенный для отображения основного медиа-ресурса, видео или изображения.

    MediaView можно определить в макете XML или создать динамически. Его следует разместить в иерархии представлений NativeAdView , как и любое другое представление ресурса. Приложения, использующие MediaView должны зарегистрировать его в NativeAdView :

    Джава

    MediaView mediaView = adView.findViewById(R.id.ad_media);
    adView.setMediaView(mediaView);
    

    Котлин

    adView.mediaView = adView.findViewById<MediaView>(R.id.ad_media)
    

    Как и во всех представлениях ресурсов, в представлении мультимедиа необходимо заполнить содержимое. Это делается с помощью метода getMediaContent() для получения медиаконтента , который можно передать в MediaView . Вот фрагмент кода, устанавливающий медиаконтент для медиапредставления:

    Джава

    mediaView.setMediaContent(nativeAd.getMediaContent());
    

    Котлин

    mediaView.mediaContent = nativeAd.mediaContent
    

    Тип масштаба изображения

    Класс MediaView имеет свойство ImageScaleType при отображении изображений. Если вы хотите изменить способ масштабирования изображения в MediaView , установите соответствующий ImageView.ScaleType с помощью метода setImageScaleType() MediaView :

    Джава

    mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);
    

    Котлин

    mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP
    

    МедиаКонтент

    Класс MediaContent содержит данные, относящиеся к медиаконтенту собственной рекламы, которая отображается с помощью класса MediaView . Когда свойство MediaView mediaContent установлено с экземпляром MediaContent :

    • Если видеоресурс доступен, он помещается в буфер и начинает воспроизводиться внутри MediaView . Вы можете узнать, доступен ли видеоресурс, проверив hasVideoContent() .

    • Если объявление не содержит видеоресурса, вместо него загружается ресурс mainImage и помещается в MediaView .

    По умолчанию mainImage является первым загруженным изображением. Если используется setReturnUrlsForImageAssets(true) , mainImage имеет значение null , и вам необходимо установить свойство mainImage для изображения, загруженного вручную. Обратите внимание, что это изображение будет использоваться только в том случае, если нет доступного видеоресурса.

  5. Зарегистрируйте объект нативной рекламы

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

    Джава

    adView.setNativeAd(ad);
    

    Котлин

    adView.setNativeAd(ad)
    

Удалить объявление

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

Джава

nativeAd.destroy();
        .inflate(R.layout.ad_layout_file, parent);

Котлин

nativeAd.destroy()

Тестирование нативного рекламного кода

Реклама с прямой продажей

Если вы хотите протестировать, что представляют собой нативные объявления с прямой продажей, вы можете использовать этот идентификатор рекламного блока Менеджера рекламы:

/6499/example/native

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

  • Заголовок (текст)
  • Главное изображение (изображение)
  • Подпись (текст)

Идентификатор шаблона для формата пользовательского нативного объявления – 10063170 .

Нативные объявления для заполнения

Заполнение Ad Exchange в настоящее время доступно только избранной группе издателей. Чтобы протестировать поведение нативных объявлений-заполнителей, используйте этот рекламный блок Менеджера рекламы:

/6499/example/native-backfill

Он показывает примеры объявлений, устанавливающих приложения, и контентных объявлений, включающих наложение AdChoices.

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

Примеры на GitHub

Пример полной реализации нативной рекламы:

Java Котлин

Следующие шаги

Изучите следующие темы: