Erweiterte native Anzeigen

Native Anzeige anzeigen

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, muss dies aber nicht sofort tun. Das SDK bietet einige nützliche Ressourcen, die das Einblenden systemdefinierter Anzeigenformate erleichtern. Sie werden unten beschrieben.

Wichtiger Hinweis: Weitere Informationen zu nativen Anzeigen finden Sie in unserem Playbook für native Anzeigen. Weitere Informationen zum Rendern nativer Anzeigen finden Sie in den Richtlinien für native Anzeigen.

Klasse NativeAdView

Für das NativeAd-Format gibt es die entsprechende Klasse NativeAdView. Diese Klasse ist eine ViewGroup, die Verlage und Webpublisher als Stamm für NativeAd verwenden sollten. Ein einzelnes NativeAdView entspricht einer einzelnen nativen Anzeige. Jede Ansicht, die zum Darstellen der Assets dieser Anzeige verwendet wird (z. B. die ImageView, in der das Screenshot-Asset angezeigt wird), sollte ein untergeordnetes Element des NativeAdView-Objekts sein.

Die Ansichtshierarchie für eine native Anzeige, die ein LinearLayout zur Darstellung ihrer Asset-Ansichten verwendet, könnte so aussehen:

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

Hier ein Beispiel, in dem ein NativeAdView erstellt und mit einem NativeAd ausgefüllt wird:

Java

AdLoader.Builder builder = new AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110")
    .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, "ca-app-pub-3940256099942544/2247696110")
    .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)
    }

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 Anzeigenansichtsklassen enthalten auch Methoden zum Registrieren der für jedes einzelne Asset verwendeten Ansicht sowie eine Methode zum Registrieren des NativeAd-Objekts selbst. Wenn Sie die Ansichten auf diese Weise registrieren, 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 Datenschutzinfo-Overlay anzeigen

Datenschutzinfo-Overlay

Dem Anzeigenaufruf wird vom SDK ein Datenschutzinfo-Overlay hinzugefügt. Lassen Sie in der gewünschten Ecke des nativen Anzeigen-Views Platz für das automatisch eingefügte Datenschutzinfo-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 unter Beschreibungen der Felder für native Anzeigen.

Anzeigenkennzeichnung

Sie müssen eine Anzeigenkennzeichnung anzeigen, um anzugeben, dass es sich bei dem Aufruf um eine Anzeige handelt. Weitere Informationen finden Sie in unseren Richtlinien.

Codebeispiel

So schalten Sie eine native Anzeige:

1. Erstellen Sie eine Instanz der Klasse NativeAdView.

2. Für jedes Anzeigen-Asset, das ausgeliefert werden soll:

   1. Fülle die Asset-Ansicht mit dem Asset im Anzeigenobjekt.
   2. Registrieren Sie die Asset-Ansicht mit der Klasse NativeAdView.

3. Registrieren Sie die MediaView, wenn Ihr natives Anzeigenlayout ein großes Medien-Asset enthält.

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

Hier sind die einzelnen Aufgaben:

1. Layout vergrößern

   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.

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

3. Klicks verarbeiten

   Implementieren Sie keine benutzerdefinierten Klick-Handler auf Ansichten über oder innerhalb der nativen Anzeigenansicht. Klicks auf die Anzeigenaufruf-Assets werden vom SDK verarbeitet, sofern Sie die Asset-Aufrufe 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, "ca-app-pub-3940256099942544/2247696110")
       // ...
       .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, "ca-app-pub-3940256099942544/2247696110")
       // ...
       .withAdListener(object : AdListener() {
           override fun onAdFailedToLoad(adError: LoadAdError) {
               // Handle the failure.
           }
           override fun onAdClicked() {
               // Log the click event or other custom behavior.
           }
       })
       .build()
   

4. MediaView registrieren

   Sie müssen das MediaView-Asset anstelle des ImageView-Assets verwenden, wenn Sie ein Hauptbild-Asset in das Layout Ihrer nativen Anzeige einschließen möchten.

   Das MediaView ist ein spezielles View-Element, das zum Anzeigen des Hauptmedien-Assets (Video oder Bild) entwickelt wurde.

   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 Klasse MediaContent enthält die Daten, die sich auf den Medieninhalt der nativen Anzeige beziehen, die mithilfe der Klasse MediaView angezeigt werden. Wenn das Attribut MediaView mediaContent mit einer MediaContent-Instanz festgelegt ist:

   • Wenn ein Video-Asset verfügbar ist, wird es zwischengespeichert und innerhalb der MediaView abgespielt. 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 Bild festlegen. Dieses Bild wird nur verwendet, wenn kein Video-Asset verfügbar ist.

5. Natives Anzeigenobjekt registrieren

   In diesem letzten Schritt wird das native Anzeigenobjekt bei der Ansicht registriert, die für die Auslieferung zuständig 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()

Beispiele auf GitHub

Vollständige Implementierung von nativen Anzeigen:

Java Kotlin

Nächste Schritte

Erkunden Sie die folgenden Themen:

• Datenschutz für Nutzer

• Optimierte SDK-Initialisierung und Anzeigenauslieferung (Beta)