Diese Seite wurde von der Cloud Translation API übersetzt.

Erweiterte native Anzeigen

Plattform auswählen:Android iOS

Native Anzeige ausliefern

Wenn eine native Anzeige geladen wird, ruft das Google Mobile Ads SDK den Listener für das entsprechende Anzeigenformat auf. Ihre App ist dann für die Auslieferung der Anzeige verantwortlich. Dies muss jedoch nicht sofort erfolgen. Das SDK bietet einige nützliche Ressourcen, die das Einblenden systemdefinierter Anzeigenformate erleichtern. Sie werden unten beschrieben.

`NativeAdView`-Klasse definieren

Definieren Sie eine NativeAdView-Klasse. Diese Klasse ist eine ViewGroup-Klasse und der übergeordnete Container für eine NativeAdView-Klasse. Jede Ansicht für native Anzeigen enthält native Anzeigen-Assets, z. B. das MediaView- oder das Title-Ansichtselement, das ein untergeordnetes Element des NativeAdView-Objekts sein muss.

XML-Layout

Fügen Sie Ihrem Projekt ein XML-NativeAdView hinzu:

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

Jetpack Compose

Fügen Sie das Modul JetpackComposeDemo/compose-util hinzu, das Hilfsfunktionen zum Erstellen der NativeAdView und ihrer Assets enthält.

Mit dem compose-util-Modul eine NativeAdView erstellen:

  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.
        }
    }

Geladene native Anzeigen-Unterstützung verarbeiten

Wenn eine native Anzeige geladen wird, verarbeiten Sie das Callback-Ereignis, maximieren Sie den Darstellungsbereich der nativen Anzeige und fügen Sie ihn der Ansichtshierarchie hinzu:

Java

AdLoader.Builder builder = new AdLoader.Builder(this, "/21775744923/example/native")
    .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 assets into the ad view.
            populateNativeAdView(nativeAd, adView);
            frameLayout.removeAllViews();
            frameLayout.addView(adView);
        }
});

Kotlin

val builder = AdLoader.Builder(this, "/21775744923/example/native")
    .forNativeAd { nativeAd ->
        // Assumes you have a placeholder FrameLayout in your View layout
        // (with ID fl_adplaceholder) where the ad is to be placed.
        val 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
        val adView = layoutInflater
                .inflate(R.layout.native_ad_layout, null) as NativeAdView
        // This method sets the assets into the ad view.
        populateNativeAdView(nativeAd, adView)
        frameLayout.removeAllViews()
        frameLayout.addView(adView)
    }

Jetpack Compose

@Composable
/** Load and display a native ad. */
fun NativeScreen() {
  var nativeAd by remember { mutableStateOf<NativeAd?>(null) }
  val context = LocalContext.current
  var isDisposed by remember { mutableStateOf(false) }

  DisposableEffect(Unit) {
    // Load the native ad when we launch this screen
    loadNativeAd(
      context = context,
      onAdLoaded = { ad ->
        // Handle the native ad being loaded.
        if (!isDisposed) {
          nativeAd = ad
        } else {
          // Destroy the native ad if loaded after the screen is disposed.
          ad.destroy()
        }
      },
    )
    // Destroy the native ad to prevent memory leaks when we dispose of this screen.
    onDispose {
      isDisposed = true
      nativeAd?.destroy()
      nativeAd = null
    }
  }

  // Display the native ad view with a user defined template.
  nativeAd?.let { adValue -> DisplayNativeAdView(adValue) }
}

fun loadNativeAd(context: Context, onAdLoaded: (NativeAd) -> Unit) {
  val adLoader =
    AdLoader.Builder(context, NATIVE_AD_UNIT_ID)
      .forNativeAd { nativeAd -> onAdLoaded(nativeAd) }
      .withAdListener(
        object : AdListener() {
          override fun onAdFailedToLoad(error: LoadAdError) {
            Log.e(TAG, "Native ad failed to load: ${error.message}")
          }

          override fun onAdLoaded() {
            Log.d(TAG, "Native ad was loaded.")
          }

          override fun onAdImpression() {
            Log.d(TAG, "Native ad recorded an impression.")
          }

          override fun onAdClicked() {
            Log.d(TAG, "Native ad was clicked.")
          }
        }
      )
      .build()
  adLoader.loadAd(AdRequest.Builder().build())
}
NativeScreen.kt

Alle Assets für eine bestimmte native Anzeige sollten innerhalb des NativeAdView-Layouts gerendert werden. Das Google Mobile Ads SDK versucht, eine Warnung zu protokollieren, wenn native Assets außerhalb eines Layouts für native Anzeigenaufrufe gerendert werden.

Die Anzeigenanzeigeklassen bieten auch Methoden zum Registrieren der Ansicht, die für jedes einzelne Asset verwendet wird, und eine zum Registrieren des NativeAd-Objekts selbst. Wenn du die Ansichten so registrierst, kann das SDK automatisch Aufgaben wie die folgenden ausführen:

Klicks erfassen
Impressionen werden erfasst, sobald das erste Pixel auf dem Bildschirm sichtbar ist
Das AdChoices-Overlay wird für native Backfill-Creatives eingeblendet. Diese Funktion ist derzeit auf eine ausgewählte Gruppe von Publishern beschränkt.

Datenschutzinfo-Overlay

Ein Datenschutzinfo-Overlay wird vom SDK als Anzeigenansicht hinzugefügt, wenn eine Backfill-Anzeige zurückgegeben wird. Wenn in Ihrer App native Anzeigen als Backfill verwendet werden, lassen Sie in der bevorzugten Ecke des nativen Anzeigen-Views Platz für das automatisch eingefügte AdChoices-Logo. Es muss außerdem gut zu erkennen sein. Wählen Sie daher entsprechende Hintergrundfarben und ‑bilder aus. Weitere Informationen zum Erscheinungsbild und zur Funktion des Overlays finden Sie in den Implementierungsrichtlinien für programmatische native Anzeigen.

Anzeigenkennzeichnung für programmatische native Anzeigen

Wenn Sie programmatisch native Anzeigen ausliefern, müssen Sie eine Anzeigenkennzeichnung einblenden, um anzugeben, dass es sich bei der Ansicht um eine Anzeige handelt. Weitere Informationen finden Sie in unseren Richtlinienhinweisen.

Codebeispiel

So schalten Sie eine native Anzeige:

Erstellen Sie eine Instanz der Klasse NativeAdView.
Für jedes Anzeigen-Asset, das ausgeliefert werden soll:
1. Fügen Sie der Asset-Ansicht das Asset aus dem Anzeigenobjekt hinzu.
2. Registrieren Sie die Asset-Ansicht mit der Klasse NativeAdView.
Registrieren Sie die MediaView, wenn Ihr natives Anzeigenlayout ein großes Medien-Asset enthält.
Registrieren Sie das Anzeigenobjekt mit der Klasse NativeAdView.

Hier ist eine Beispielfunktion, die ein NativeAd anzeigt:

Java

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 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);
}

Kotlin

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 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)
}

Jetpack Compose

@Composable
/** Display a native ad with a user defined template. */
fun DisplayNativeAdView(nativeAd: NativeAd) {
  val context = LocalContext.current
  Box(modifier = Modifier.padding(8.dp).wrapContentHeight(Alignment.Top)) {
    // Call the NativeAdView composable to display the native ad.
    NativeAdView {
      // Inside the NativeAdView composable, display the native ad assets.
      Column(Modifier.align(Alignment.TopStart).wrapContentHeight(Alignment.Top)) {
        // Display the ad attribution.
        NativeAdAttribution(text = context.getString(R.string.attribution))
        Row {
          // If available, display the icon asset.
          nativeAd.icon?.let { icon ->
            NativeAdIconView(Modifier.padding(5.dp)) {
              icon.drawable?.toBitmap()?.let { bitmap ->
                Image(bitmap = bitmap.asImageBitmap(), "Icon")
              }
            }
          }
          Column {
            // If available, display the headline asset.
            nativeAd.headline?.let {
              NativeAdHeadlineView {
                Text(text = it, style = MaterialTheme.typography.headlineLarge)
              }
            }
            // If available, display the star rating asset.
            nativeAd.starRating?.let {
              NativeAdStarRatingView {
                Text(text = "Rated $it", style = MaterialTheme.typography.labelMedium)
              }
            }
          }
        }

        // If available, display the body asset.
        nativeAd.body?.let { NativeAdBodyView { Text(text = it) } }
        // Display the media asset.
        NativeAdMediaView(Modifier.fillMaxWidth().height(500.dp).fillMaxHeight())

        Row(Modifier.align(Alignment.End).padding(5.dp)) {
          // If available, display the price asset.
          nativeAd.price?.let {
            NativeAdPriceView(Modifier.padding(5.dp).align(Alignment.CenterVertically)) {
              Text(text = it)
            }
          }
          // If available, display the store asset.
          nativeAd.store?.let {
            NativeAdStoreView(Modifier.padding(5.dp).align(Alignment.CenterVertically)) {
              Text(text = it)
            }
          }
          // If available, display the call to action asset.
          // Note: The Jetpack Compose button implements a click handler which overrides the native
          // ad click handler, causing issues. Use the NativeAdButton which does not implement a
          // click handler. To handle native ad clicks, use the NativeAd AdListener onAdClicked
          // callback.
          nativeAd.callToAction?.let { callToAction ->
            NativeAdCallToActionView(Modifier.padding(5.dp)) { NativeAdButton(text = callToAction) }
          }
        }
      }
    }
  }
}
NativeScreen.kt

Hier sind die einzelnen Aufgaben:

Layout maximieren

Java

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

Kotlin

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

Mit diesem Code wird ein XML-Layout aufgebläht, das Ansichten zum Anzeigen einer nativen Anzeige enthält, und dann eine Referenz auf die NativeAdView ermittelt. Sie können auch eine vorhandene NativeAdView wiederverwenden, falls in Ihrem Fragment oder Ihrer Aktivität eine vorhanden ist, oder sogar eine Instanz dynamisch erstellen, ohne eine Layoutdatei zu verwenden.

Asset-Ansichten füllen und registrieren

In diesem Codebeispiel wird die Ansicht gefunden, die zum Darstellen des Titels verwendet wird. Der Text wird dann mit dem String-Asset festgelegt, das vom Anzeigenobjekt bereitgestellt wird, und beim NativeAdView-Objekt registriert:
Java
```
TextView headlineView = adView.findViewById<TextView>(R.id.ad_headline);
headlineView.setText(ad.getHeadline());
adView.setHeadlineView(headlineView);
```
Kotlin
```
val headlineView = adView.findViewById<TextView>(R.id.ad_headline)
headlineView.text = ad.headline
adView.headlineView = headlineView
```
Dieser Vorgang zum Suchen der Ansicht, Festlegen ihres Werts und Registrieren bei der Anzeigenansichtsklasse sollte für jedes der vom nativen Anzeigenobjekt bereitgestellten Assets wiederholt werden, das in der App angezeigt wird.

Klicks verarbeiten

Implementieren Sie keine benutzerdefinierten Klick-Handler auf Ansichten über oder innerhalb der nativen Anzeigenansicht. Klicks auf die Assets der Anzeigenansicht werden vom SDK verarbeitet, sofern Sie die Asset-Ansichten wie im vorherigen Abschnitt beschrieben korrekt ausfüllen und registrieren.

Wenn Sie auf Klicks reagieren möchten, implementieren Sie den Google Mobile Ads SDK-Klick-Callback:

Java

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

Kotlin

val adLoader = AdLoader.Builder(this, "/21775744923/example/native")
    // ...
    .withAdListener(object : AdListener() {
        override fun onAdFailedToLoad(adError: LoadAdError) {
            // Handle the failure.
        }
        override fun onAdClicked() {
            // Log the click event or other custom behavior.
        }
    })
    .build()

MediaView registrieren

Wenn Sie im Layout Ihrer nativen Anzeige ein Hauptbildasset einbinden möchten, müssen Sie anstelle von ImageView das Asset MediaView verwenden.

Das MediaView ist ein spezielles View, das zum Darstellen des Hauptmedien-Assets (Video oder Bild) dient.

MediaView kann in einem XML-Layout definiert oder dynamisch erstellt werden. Sie sollte wie jede andere Asset-Ansicht in der Ansichtshierarchie einer NativeAdView platziert werden. Apps, die eine MediaView verwenden, müssen diese bei der NativeAdView registrieren:
Java
```
 // Populate and register the media asset view.
 nativeAdView.setMediaView(nativeAdBinding.adMedia);
```
Kotlin
```
 // Populate and register the media asset view.
 nativeAdView.mediaView = nativeAdBinding.adMedia
```
ImageScaleType

Die Klasse MediaView hat beim Darstellen von Bildern die Property ImageScaleType. Wenn Sie ändern möchten, wie ein Bild in der MediaView skaliert wird, legen Sie den entsprechenden ImageView.ScaleType mit der setImageScaleType()-Methode der MediaView fest:
Java
```
mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);
```
Kotlin
```
mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP
```
MediaContent

Die MediaContent-Klasse enthält die Daten zu den Medieninhalten der nativen Anzeige, die mit der MediaView-Klasse angezeigt werden. Wenn die Property MediaView mediaContent mit einer MediaContent-Instanz festgelegt ist:
- Wenn ein Video-Asset verfügbar ist, wird es gepuffert und in der MediaView wiedergegeben. Ob ein Video-Asset verfügbar ist, kannst du anhand von hasVideoContent() erkennen.
- Wenn die Anzeige kein Video-Asset enthält, wird das mainImage-Asset heruntergeladen und stattdessen in die MediaView eingefügt.
Standardmäßig ist mainImage das erste heruntergeladene Bild-Asset. Wenn setReturnUrlsForImageAssets(true) verwendet wird, ist mainImage null und Sie müssen die Property mainImage auf das manuell heruntergeladene Image festlegen. Dieses Bild wird nur verwendet, wenn kein Video-Asset verfügbar ist.
Natives Anzeigenobjekt registrieren

In diesem letzten Schritt wird das native Anzeigenobjekt in der Ansicht registriert, die für die Anzeige verantwortlich ist.
Java
```
adView.setNativeAd(ad);
```
Kotlin
```
adView.setNativeAd(ad)
```

Anzeige löschen

Wenn Sie die Auslieferung Ihrer nativen Anzeige beendet haben, sollten Sie sie löschen, damit sie ordnungsgemäß vom Garbage Collector erfasst wird.

Java

nativeAd.destroy();

Kotlin

nativeAd.destroy()

Code für native Anzeigen testen

Direkt verkaufte Anzeigen

Wenn Sie direktverkaufte native Anzeigen testen möchten, können Sie diese Ad Manager-Anzeigenblock-ID verwenden:

/21775744923/example/native

Es ist so konfiguriert, dass Beispiel-App-Installations- und Contentanzeigen sowie ein benutzerdefiniertes natives Anzeigenformat mit den folgenden Assets ausgeliefert werden:

Anzeigentitel (Text)
MainImage (Bild)
Bildunterschrift (Text)

Die Vorlagen-ID für das benutzerdefinierte native Anzeigenformat lautet 10063170.

Native Backfill-Anzeigen

Das Ad Exchange-Backfill ist auf eine ausgewählte Gruppe von Publishern beschränkt. Verwenden Sie diesen Ad Manager-Anzeigenblock, um das Verhalten von nativen Backfill-Anzeigen zu testen:

/21775744923/example/native-backfill

Es werden Beispiel-App-Installations- und Contentanzeigen mit dem AdChoices-Overlay ausgeliefert.

Denken Sie daran, Ihren Code vor der Veröffentlichung so zu aktualisieren, dass er auf die tatsächlichen Anzeigenblock- und Vorlagen-IDs verweist.

Beispiele auf GitHub

Vollständige Implementierung von nativen Anzeigen:

Java Kotlin JetpackCompose

Nächste Schritte

Sehen Sie sich die folgenden Themen an:

Datenschutz für Nutzer

Optimierte SDK-Initialisierung und Anzeigenauslieferung (Beta)

Erweiterte native Anzeigen Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Native Anzeige ausliefern

NativeAdView-Klasse definieren

XML-Layout

Jetpack Compose

Geladene native Anzeigen-Unterstützung verarbeiten

Java

Kotlin

Jetpack Compose

Datenschutzinfo-Overlay

Anzeigenkennzeichnung für programmatische native Anzeigen

Codebeispiel

Java

Kotlin

Jetpack Compose

Java

Kotlin

Java

Kotlin

Java

Kotlin

Java

Kotlin

ImageScaleType

Java

Kotlin

MediaContent

Java

Kotlin

Anzeige löschen

Java

Kotlin

Code für native Anzeigen testen

Direkt verkaufte Anzeigen

Native Backfill-Anzeigen

Beispiele auf GitHub

Nächste Schritte

Erweiterte native Anzeigen

`NativeAdView`-Klasse definieren