Ta strona została przetłumaczona przez Cloud Translation API.

Reklamy natywne

Wyświetlanie reklamy natywnej

Gdy wczytuje się reklama natywna, pakiet SDK do reklam mobilnych Google wywołuje odpowiedni format reklamy. Twoja aplikacja jest wtedy odpowiedzialna za wyświetlenie reklamy, ale nie musi robić tego od razu. Aby ułatwić wyświetlanie formatów reklam zdefiniowanych przez system, pakiet SDK udostępnia przydatne zasoby, opisane poniżej.

Zdefiniuj klasę `NativeAdView`

Zdefiniuj klasę NativeAdView. Ta klasa jest klasą ViewGroup i jest kontenerem najwyższego poziomu dla klasy NativeAdView. Każdy obszar wyświetlania reklamy natywnej zawiera komponenty reklamy natywnej, takie jak element widoku MediaView lub element widoku Title, który musi być elementem podrzędnym obiektu NativeAdView.

Układ XML

Dodaj do projektu plik XML NativeAdView:

<com.google.android.libraries.ads.mobile.sdk.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>
        <!--Add remaining assets such as the image and media view.-->
    </LinearLayout>
</com.google.android.libraries.ads.mobile.sdk.nativead.NativeAdView>

Jetpack Compose

Uwzględnij moduł JetpackComposeDemo/compose-util, który zawiera pomocnicze funkcje do tworzenia komponentu NativeAdView i jego komponentów.

Za pomocą modułu compose-util utwórz NativeAdView:

  import com.google.android.gms.compose_util.NativeAdAttribution
  import com.google.android.gms.compose_util.NativeAdView

  @Composable
  /** Display a native ad with a user defined template. */
  fun DisplayNativeAdView(nativeAd: NativeAd) {
      NativeAdView {
          // Display the ad attribution.
          NativeAdAttribution(text = context.getString("Ad"))
          // Add remaining assets such as the image and media view.
        }
    }

Obsługa wczytanego natywnego pliku AAD

Gdy wczytuje się reklama natywna, obsługuj zdarzenie wywołania zwrotnego, ułóż widok reklamy natywnej i dodaj go do hierarchii widoków:

Kotlin

// Build an ad request with native ad options to customize the ad.
val adTypes = listOf(NativeAd.NativeAdType.NATIVE)
val adRequest = NativeAdRequest
  .Builder("/21775744923/example/native", adTypes)
  .build()

val adCallback =
  object : NativeAdLoaderCallback {
    override fun onNativeAdLoaded(nativeAd: NativeAd) {
      activity?.runOnUiThread {

        val nativeAdBinding = NativeAdBinding.inflate(layoutInflater)
        val adView = nativeAdBinding.root
        val frameLayout = myActivityLayout.nativeAdPlaceholder

        // Populate and register the native ad asset views.
        displayNativeAd(nativeAd, nativeAdBinding)

        // Remove all old ad views and add the new native ad
        // view to the view hierarchy.
        frameLayout.removeAllViews()
        frameLayout.addView(adView)
      }
    }
  }

// Load the native ad with our request and callback.
NativeAdLoader.load(adRequest, adCallback)

Java

// Build an ad request with native ad options to customize the ad.
List<NativeAd.NativeAdType> adTypes = Arrays.asList(NativeAd.NativeAdType.NATIVE);
NativeAdRequest adRequest = new NativeAdRequest
                                .Builder("/21775744923/example/native", adTypes)
                                .build();

NativeAdLoaderCallback adCallback = new NativeAdLoaderCallback() {
    @Override
    public void onNativeAdLoaded(NativeAd nativeAd) {
      if (getActivity() != null) {
        getActivity()
          .runOnUiThread(() -> {
            // Inflate the native ad view and add it to the view hierarchy.
            NativeAdBinding nativeAdBinding = NativeAdBinding.inflate(getLayoutInflater());
            NativeAdView adView = (NativeAdView) nativeAdBinding.getRoot();
            FrameLayout frameLayout = myActivityLayout.nativeAdPlaceholder;

            // Populate and register the native ad asset views.
            displayNativeAd(nativeAd, nativeAdBinding);

            // Remove all old ad views and add the new native ad
            // view to the view hierarchy.
            frameLayout.removeAllViews();
            frameLayout.addView(adView);
        });
      }
    }
};

// Load the native ad with our request and callback.
NativeAdLoader.load(adRequest, adCallback);

Pamiętaj, że wszystkie komponenty danej reklamy natywnej powinny być renderowane w ramach układu NativeAdView. Pakiet SDK do reklam mobilnych Google próbuje zarejestrować ostrzeżenie, gdy komponenty natywne są renderowane poza układem wyświetlania reklamy natywnej.

Klasy widoku reklamy udostępniają też metody służące do rejestrowania widoku używanego dla każdego zasobu oraz jedną do rejestrowania samego obiektu NativeAd. Rejestrowanie widoków w ten sposób pozwala pakietowi SDK automatycznie wykonywać takie zadania jak:

Rejestrowanie kliknięć
Rejestrowanie wyświetleń, gdy na ekranie jest widoczny pierwszy piksel
wyświetlanie nakładki AdChoices w przypadku kreacji reklamowych typu native backfill (obecnie ograniczone do wybranej grupy wydawców);

Nakładka Informacja

Gdy zwracana jest reklama zapasowa, pakiet SDK dodaje nakładkę Informacja jako widok reklamy. Jeśli Twoja aplikacja korzysta z wypełniania reklam natywnych, w widoku reklamy natywnej w preferowanym rogu pozostaw miejsce na automatycznie wstawiane logo AdChoices. Ważne jest też, aby nakładka AdChoices była widoczna, dlatego należy odpowiednio dobrać kolory tła i obrazy. Więcej informacji o wyglądzie i funkcjach nakładki znajdziesz w wytycznych dotyczących implementacji natywnych reklam automatycznych.

Przypisywanie reklam w ramach zautomatyzowanych reklam natywnych

Podczas wyświetlania reklam natywnych w ramach programowania reklam musisz wyświetlić oznaczenie reklamy, aby wskazać, że wyświetlenie jest reklamą. Więcej informacji znajdziesz w naszych wytycznych dotyczących zasad.

Przykładowy kod

Aby wyświetlić reklamę natywną:

Utwórz instancję klasy NativeAdView.
W przypadku każdego komponentu reklamy, który ma być wyświetlany:
1. Wypełnij widok komponentu komponentem w obiekcie reklamy.
2. Zarejestruj widok zasobu w klasie NativeAdView.
Zarejestruj obiekt reklamy w klasie NativeAdView.

Oto przykładowa funkcja, która wyświetla wartość NativeAd:

Kotlin

private fun displayNativeAd(nativeAd: NativeAd, nativeAdBinding : NativeAdBinding) {
  // Set the native ad view elements.
  val nativeAdView = nativeAdBinding.root
  nativeAdView.advertiserView = nativeAdBinding.adAdvertiser
  nativeAdView.bodyView = nativeAdBinding.adBody
  nativeAdView.callToActionView = nativeAdBinding.adCallToAction
  nativeAdView.headlineView = nativeAdBinding.adHeadline
  nativeAdView.iconView = nativeAdBinding.adAppIcon
  nativeAdView.priceView = nativeAdBinding.adPrice
  nativeAdView.starRatingView = nativeAdBinding.adStars
  nativeAdView.storeView = nativeAdBinding.adStore

  // Set the view element with the native ad assets.
  nativeAdBinding.adAdvertiser.text = nativeAd.advertiser
  nativeAdBinding.adBody.text = nativeAd.body
  nativeAdBinding.adCallToAction.text = nativeAd.callToAction
  nativeAdBinding.adHeadline.text = nativeAd.headline
  nativeAdBinding.adAppIcon.setImageDrawable(nativeAd.icon?.drawable)
  nativeAdBinding.adPrice.text = nativeAd.price
  nativeAd.starRating?.toFloat().let { value ->
    nativeAdBinding.adStars.rating = value
  }
  nativeAdBinding.adStore.text = nativeAd.store

  // Hide views for assets that don't have data.
  nativeAdBinding.adAdvertiser.visibility = getAssetViewVisibility(nativeAd.advertiser)
  nativeAdBinding.adBody.visibility = getAssetViewVisibility(nativeAd.body)
  nativeAdBinding.adCallToAction.visibility = getAssetViewVisibility(nativeAd.callToAction)
  nativeAdBinding.adHeadline.visibility = getAssetViewVisibility(nativeAd.headline)
  nativeAdBinding.adAppIcon.visibility = getAssetViewVisibility(nativeAd.icon)
  nativeAdBinding.adPrice.visibility = getAssetViewVisibility(nativeAd.price)
  nativeAdBinding.adStars.visibility = getAssetViewVisibility(nativeAd.starRating)
  nativeAdBinding.adStore.visibility = getAssetViewVisibility(nativeAd.store)

  // Inform the Google Mobile Ads SDK that you have finished populating
  // the native ad views with this native ad.
  nativeAdView.registerNativeAd(nativeAd, nativeAdBinding.adMedia)
}

/**
* Determines the visibility of an asset view based on the presence of its asset.
*
* @param asset The native ad asset to check for nullability.
* @return [View.VISIBLE] if the asset is not null, [View.INVISIBLE] otherwise.
*/
private fun getAssetViewVisibility(asset: Any?): Int {
  return if (asset == null) View.INVISIBLE else View.VISIBLE
}

Java

private void displayNativeAd(ad: NativeAd, nativeAdBinding : NativeAdBinding) {
  // Set the native ad view elements.
  NativeAdView nativeAdView = nativeAdBinding.getRoot();
  nativeAdView.setAdvertiserView(nativeAdBinding.adAdvertiser);
  nativeAdView.setBodyView(nativeAdBinding.adBody);
  nativeAdView.setCallToActionView(nativeAdBinding.adCallToAction);
  nativeAdView.setHeadlineView(nativeAdBinding.adHeadline);
  nativeAdView.setIconView(nativeAdBinding.adAppIcon);
  nativeAdView.setPriceView(nativeAdBinding.adPrice);
  nativeAdView.setStarRatingView(nativeAdBinding.adStars);
  nativeAdView.setStoreView(nativeAdBinding.adStore);

  // Set the view element with the native ad assets.
  nativeAdBinding.adAdvertiser.setText(nativeAd.getAdvertiser());
  nativeAdBinding.adBody.setText(nativeAd.getBody());
  nativeAdBinding.adCallToAction.setText(nativeAd.getCallToAction());
  nativeAdBinding.adHeadline.setText(nativeAd.getHeadline());
  if (nativeAd.getIcon() != null) {
      nativeAdBinding.adAppIcon.setImageDrawable(nativeAd.getIcon().getDrawable());
  }
  nativeAdBinding.adPrice.setText(nativeAd.getPrice());
  if (nativeAd.getStarRating() != null) {
      nativeAdBinding.adStars.setRating(nativeAd.getStarRating().floatValue());
  }
  nativeAdBinding.adStore.setText(nativeAd.getStore());

  // Hide views for assets that don't have data.
  nativeAdBinding.adAdvertiser.setVisibility(getAssetViewVisibility(nativeAd.getAdvertiser()));
  nativeAdBinding.adBody.setVisibility(getAssetViewVisibility(nativeAd.getBody()));
  nativeAdBinding.adCallToAction.setVisibility(getAssetViewVisibility(nativeAd.getCallToAction()));
  nativeAdBinding.adHeadline.setVisibility(getAssetViewVisibility(nativeAd.getHeadline()));
  nativeAdBinding.adAppIcon.setVisibility(getAssetViewVisibility(nativeAd.getIcon()));
  nativeAdBinding.adPrice.setVisibility(getAssetViewVisibility(nativeAd.getPrice()));
  nativeAdBinding.adStars.setVisibility(getAssetViewVisibility(nativeAd.getStarRating()));
  nativeAdBinding.adStore.setVisibility(getAssetViewVisibility(nativeAd.getStore()));

  // Inform the Google Mobile Ads SDK that you have finished populating
  // the native ad views with this native ad.
  nativeAdView.registerNativeAd(nativeAd, nativeAdBinding.adMedia);
}

/**
* Determines the visibility of an asset view based on the presence of its asset.
*
* @param asset The native ad asset to check for nullability.
* @return {@link View#VISIBLE} if the asset is not null, {@link View#INVISIBLE} otherwise.
*/
private int getAssetViewVisibility(Object asset) {
    return (asset == null) ? View.INVISIBLE : View.VISIBLE;
}

Oto poszczególne zadania:

Rozwijanie układu

Kotlin

 // Remove all old ad views when loading a new native ad.
 binding.nativeViewContainer.removeAllViews()

 // Inflate the native ad view and add it to the view hierarchy.
 val nativeAdBinding = NativeAdBinding.inflate(layoutInflater)
 binding.nativeViewContainer.addView(nativeAdBinding.root)

Java

 // Remove all old ad views when loading a new native ad.
 binding.nativeViewContainer.removeAllViews();

 // Inflate the native ad view and add it to the view hierarchy.
 NativeAdBinding nativeAdBinding = NativeAdBinding.inflate(getLayoutInflater());
 binding.nativeViewContainer.addView(nativeAdBinding.getRoot());

Ten kod napełnia układ XML, który zawiera widoki do wyświetlania reklamy natywnej, a następnie wyszukuje odwołanie do NativeAdView. Pamiętaj, że możesz też użyć istniejącego elementu NativeAdView, jeśli jest on obecny w Twoim fragmencie lub aktywności, a nawet utworzyć instancję dynamicznie bez użycia pliku układu.

Wypełnianie i rejestrowanie widoków komponentów

Ten przykładowy kod znajduje widok używany do wyświetlania nagłówka, ustawia jego tekst za pomocą komponentu ciągu znaków dostarczonego przez obiekt reklamy i rejestruje go w obiekcie NativeAdView:
Kotlin
```
 nativeAdView.headlineView = nativeAdBinding.adHeadline
 nativeAdBinding.adHeadline.text = nativeAd.headline
 nativeAdBinding.adHeadline.visibility = getAssetViewVisibility(nativeAd.headline)
```
Java
```
 nativeAdView.setHeadlineView(nativeAdBinding.adHeadline);
 nativeAdBinding.adHeadline.setText(nativeAd.getHeadline());
 nativeAdBinding.adHeadline.setVisibility(getAssetViewVisibility(nativeAd.getHeadline()));
```
Proces znajdowania widoku, ustawiania jego wartości i rejestrowania go w klasie widoku reklamy należy powtórzyć w przypadku każdego komponentu dostarczonego przez obiekt reklamy natywnej, który ma być wyświetlany przez aplikację.

Obsługa kliknięć

Nie implementuj żadnych niestandardowych metod obsługi kliknięć w żadnym widoku, który obejmuje lub zawiera widok reklamy natywnej. Kliknięcia komponentów widoku reklamy są obsługiwane przez pakiet SDK, o ile prawidłowo wypełnisz i zarejestrujesz widoki komponentów zgodnie z opisem w poprzedniej sekcji.

Aby wykrywać kliknięcia, zaimplementuj funkcję wywołania po kliknięciu w pakiecie SDK do reklam mobilnych Google:

Kotlin

 private fun setEventCallback(nativeAd: NativeAd) {
   nativeAd.adEventCallback =
     object : NativeAdEventCallback {
       override fun onAdClicked() {
         Log.d(Constant.TAG, "Native ad recorded a click.")
       }
     }
 }

Java

 private void setEventCallback(NativeAd nativeAd) {
   nativeAd.setAdEventCallback(new NativeAdEventCallback() {
       @Override
       public void onAdClicked() {
         Log.d(Constant.TAG, "Native ad recorded a click.");
       }
   });
 }

Zarejestruj obiekt MediaView

Jeśli w układzie reklamy natywnej chcesz uwzględnić główny zasób obrazu, zamiast zasobu ImageView musisz użyć zasobu MediaView.
Kotlin
```
// Get the media asset view.
val mediaView = nativeAdBinding.adMedia
```
Java
```
// Get the media asset view.
MediaView mediaView = nativeAdBinding.adMedia;
```
ImageScaleType

Klasa MediaView ma w przypadku wyświetlania obrazów właściwość ImageScaleType. Jeśli chcesz zmienić sposób skalowania obrazu w MediaView, ustaw odpowiednią wartość ImageView.ScaleType za pomocą metody setImageScaleType() elementu MediaView:
Kotlin
```
nativeAdViewBinding.mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP
```
Java
```
nativeAdViewBinding.mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);
```
MediaContent

Klasa MediaContent zawiera dane dotyczące multimediów reklamy natywnej, która jest wyświetlana za pomocą klasy MediaView. Gdy właściwość MediaView mediaContent jest ustawiona w przypadku instancji MediaContent:
- Jeśli zasób wideo jest dostępny, jest buforowany i rozpoczyna się odtwarzanie w ramach MediaView. Aby sprawdzić, czy zasób wideo jest dostępny, sprawdź hasVideoContent().
- Jeśli reklama nie zawiera komponentu wideo, komponent mainImage jest pobierany i umieszczany w komponencie MediaView.
Jeśli używasz atrybutu disableImageDownloading(true), wartość atrybutu mainImage to null, a właściwość mainImage musisz ustawić na ręcznie pobrany obraz. Pamiętaj, że to zdjęcie będzie używane tylko wtedy, gdy nie ma dostępnego komponentu wideo.

Zarejestruj obiekt reklamy natywnej

Ten ostatni krok rejestruje obiekt reklamy natywnej w widoku odpowiedzialnym za jego wyświetlanie oraz w widoku zasobu treści multimedialnych.

Kotlin

 // Inform the Google Mobile Ads SDK that you have finished populating
 // the native ad views with this native ad and media content asset.
 nativeAdView.registerNativeAd(nativeAd, mediaView)

Java

 // Inform the Google Mobile Ads SDK that you have finished populating
 // the native ad views with this native ad and media content asset.
 nativeAdView.registerNativeAd(nativeAd, mediaView);

Zniszcz reklamę

Po zakończeniu wyświetlania reklamy natywnej należy ją zniszczyć, aby została prawidłowo zebrana przez garbage collectora.

Kotlin

nativeAd.destroy()

Java

nativeAd.destroy();

Testowanie kodu reklamy natywnej

Reklamy sprzedawane bezpośrednio

Jeśli chcesz przetestować działanie reklam natywnych sprzedawanych bezpośrednio, możesz użyć tego identyfikatora jednostki reklamowej w usłudze Ad Manager:

/21775744923/example/native

Jest on skonfigurowany tak, aby wyświetlać przykładowe reklamy promujące instalacje aplikacji i reklamy z treścią oraz niestandardowy format reklamy natywnej z tymi komponentami:

Nagłówek (tekst)
MainImage (obraz)
Podpis (tekst)

Identyfikator szablonu niestandardowego formatu reklamy natywnej to 10063170.

Natywne reklamy zastępcze

Zastępowanie reklam Ad Exchange jest ograniczone do wybranej grupy wydawców. Aby przetestować działanie reklam natywnych z reklamami zapasowymi, użyj tej jednostki reklamowej Ad Managera:

/21775744923/example/native-backfill

Wyświetla ona przykładowe reklamy promujące instalacje aplikacji i reklamy z treścią, które zawierają nakładkę AdChoices.

Pamiętaj, aby przed uruchomieniem zaktualizować kod, tak aby odwoływał się do rzeczywistych identyfikatorów jednostek reklamowych i szablonów.

Dalsze kroki

Zapoznaj się z tymi tematami:

Prywatność użytkowników

Przykład

Pobierz i uruchom przykładową aplikację, która demonstruje korzystanie z pakietu SDK do reklam mobilnych Google nowej generacji.

Reklamy natywne Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Wyświetlanie reklamy natywnej

Zdefiniuj klasę NativeAdView

Układ XML

Jetpack Compose

Obsługa wczytanego natywnego pliku AAD

Kotlin

Java

Nakładka Informacja

Przypisywanie reklam w ramach zautomatyzowanych reklam natywnych

Przykładowy kod

Kotlin

Java

Kotlin

Java

Kotlin

Java

Kotlin

Java

Kotlin

Java

ImageScaleType

Kotlin

Java

MediaContent

Kotlin

Java

Zniszcz reklamę

Kotlin

Java

Testowanie kodu reklamy natywnej

Reklamy sprzedawane bezpośrednio

Natywne reklamy zastępcze

Dalsze kroki

Przykład

Reklamy natywne

Zdefiniuj klasę `NativeAdView`