Erweiterte native Anzeigen

Native Anzeige ausliefern

Beim Laden einer nativen Anzeige 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 geschehen. Um die Auslieferung systemdefinierter Anzeigenformate zu erleichtern, bietet das SDK einige nützliche Ressourcen, die unten beschrieben werden.

Klasse NativeAdView

Für das Format NativeAd gibt es die entsprechende Klasse NativeAdView. Diese Klasse ist eine ViewGroup, die Verlage und Webpublisher als Stamm für NativeAd verwenden sollten. Eine einzelne NativeAdView entspricht einer einzelnen nativen Anzeige. Jede Ansicht, die zur Darstellung der Assets dieser Anzeige verwendet wird (z. B. ImageView, der das Screenshot-Asset darstellt), sollte dem Objekt NativeAdView untergeordnet sein.

Die Ansichtshierarchie für eine native Anzeige, in der die Asset-Ansichten mit einem LinearLayout dargestellt werden, 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>


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

In diesem Beispiel wird ein NativeAdView erstellt und mit einem NativeAd gefüllt:

Java

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

Kotlin

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

Alle Assets für eine bestimmte native Anzeige sollten im Layout NativeAdView gerendert werden. Das Google Mobile Ads SDK versucht, eine Warnung zu protokollieren, wenn native Assets außerhalb eines nativen Anzeigenlayouts gerendert werden.

Die Anzeigenansichtsklassen enthalten auch Methoden zum Registrieren der für jedes einzelne Asset verwendeten Ansicht sowie zum Registrieren des NativeAd-Objekts selbst. Wenn die Ansichten auf diese Weise registriert werden, kann das SDK unter anderem die folgenden Aufgaben automatisch verarbeiten:

  • Klicks werden erfasst
  • Impressionen werden erfasst, wenn das erste Pixel auf dem Bildschirm sichtbar ist
  • Datenschutzinfo-Overlay für native Backfill-Creatives anzeigen – 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 Ihre App native Anzeigen-Backfills verwendet, lassen Sie in Ihrer bevorzugten Ecke Ihrer nativen Anzeigenansicht Platz für das automatisch eingefügte Datenschutzinfo-Logo. Das Datenschutzinfo-Overlay muss außerdem gut zu sehen sein. Wählen Sie daher geeignete Hintergrundfarben und Bilder aus. Weitere Informationen zu Darstellung und Funktion des Overlays finden Sie in den Implementierungsrichtlinien für programmatische native Anzeigen.

Anzeigenattribution für programmatische native Anzeigen

Bei der Auslieferung programmatischer nativer Anzeigen muss eine Anzeigenkennzeichnung eingeblendet werden, um darauf hinzuweisen, dass es sich um eine Anzeige handelt. Weitere Informationen finden Sie in unseren Richtlinien.

Codebeispiel

So werden native Anzeigen ausgeliefert:

  1. Erstellen Sie eine Instanz der NativeAdView-Klasse.
  2. Führen Sie für jedes auszuliefernde Anzeigen-Asset folgende Schritte aus:
    1. Füllen Sie die Asset-Ansicht mit dem Asset im Anzeigenobjekt.
    2. Registrieren Sie die Asset-Ansicht mit der Klasse ViewGroup.
  3. Registrieren Sie die MediaView, wenn das Layout Ihrer nativen Anzeige ein großes Media-Asset enthält.
  4. Registrieren Sie das Anzeigenobjekt mit der Klasse ViewGroup.

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

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

Hier die einzelnen Aufgaben:

  1. Layout erweitern

    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 Ausliefern einer nativen Anzeige enthält, und sucht dann nach einem Verweis auf die NativeAdView. Sie können auch ein vorhandenes NativeAdView wiederverwenden, wenn dieses in Ihrem Fragment oder in Ihrer Aktivität vorhanden ist, oder Sie können sogar eine Instanz dynamisch ohne Layoutdatei erstellen.

  2. Asset-Ansichten ausfüllen und registrieren

    Mit diesem Beispielcode wird die Ansicht zur Darstellung des Anzeigentitels ermittelt, der Text mithilfe des vom Anzeigenobjekt bereitgestellten String-Assets festgelegt 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
    

    Die Suche nach der Ansicht, das Festlegen ihres Werts und das Registrieren der Ansicht in der Anzeigenansichtsklasse sollte für jedes Asset wiederholt werden, das vom nativen Anzeigenobjekt in der App bereitgestellt wird.

  3. Klicks verarbeiten

    Implementieren Sie keine benutzerdefinierten Klick-Handler für Ansichten über oder innerhalb der nativen Anzeigenansicht. Wenn Sie Klickereignisse selbst beobachten möchten, verwenden Sie den Anzeigen-Listener.

    Klicks auf die Anzeigenaufruf-Assets werden vom SDK verarbeitet, sofern Sie die Asset-Ansichten wie im vorherigen Abschnitt beschrieben korrekt ausfüllen und registrieren.

    Im folgenden Beispiel wird ein Anzeigen-Listener verwendet, um Klickereignisse zu beobachten:

    Java

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

    Kotlin

    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 registrieren

    Wenn Sie in das Layout der nativen Anzeige ein Hauptbild-Asset einbinden möchten, müssen Sie das Asset MediaView anstelle des Assets ImageView verwenden.

    Das MediaView ist ein spezielles View-Element, mit dem das Haupt-Media-Asset (Video oder Bild) angezeigt wird.

    MediaView kann in einem XML-Layout definiert oder dynamisch erstellt werden. Sie sollte wie jede andere Asset-Ansicht innerhalb der Ansichtshierarchie eines NativeAdView platziert werden. Anwendungen, die ein MediaView verwenden, müssen diesen bei der NativeAdView registrieren:

    Java

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

    Kotlin

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

    Wie bei allen Asset-Ansichten muss der Inhalt der Medienansicht dargestellt werden. Dazu werden mit der Methode getMediaContent() Medieninhalte abgerufen, die an eine MediaView übergeben werden können. Hier sehen Sie ein Code-Snippet, das den Medieninhalt für die Medienansicht festlegt:

    Java

    mediaView.setMediaContent(nativeAd.getMediaContent());
    

    Kotlin

    mediaView.mediaContent = nativeAd.mediaContent
    

    ImageScaleType

    Die Klasse MediaView hat beim Anzeigen von Bildern das Attribut ImageScaleType. Wenn Sie die Skalierung eines Bildes in MediaView ändern möchten, legen Sie mit der Methode setImageScaleType() von MediaView die entsprechende ImageView.ScaleType 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, der mithilfe der Klasse MediaView angezeigt wird. Wenn das Attribut MediaView mediaContent mit einer MediaContent-Instanz festgelegt ist:

    • Wenn ein Video-Asset verfügbar ist, wird es gepuffert und beginnt mit der Wiedergabe im MediaView. Wenn Sie wissen möchten, ob ein Video-Asset verfügbar ist, sehen Sie sich hasVideoContent() an.

    • Wenn die Anzeige kein Video-Asset enthält, wird das mainImage-Asset heruntergeladen und stattdessen innerhalb von MediaView platziert.

    Standardmäßig ist mainImage das erste heruntergeladene Bild-Asset. Wenn setReturnUrlsForImageAssets(true) verwendet wird, hat mainImage den Wert null und Sie müssen das Attribut mainImage auf das manuell heruntergeladene Bild festlegen. Dieses Bild wird nur verwendet, wenn kein Video-Asset verfügbar ist.

  5. Objekt der nativen Anzeige registrieren

    In diesem letzten Schritt wird das native Anzeigenobjekt bei der Ansicht registriert, die für die Auslieferung verantwortlich ist:

    Java

    adView.setNativeAd(ad);
    

    Kotlin

    adView.setNativeAd(ad)
    

Anzeige löschen

Wenn Ihre native Anzeige nicht mehr ausgeliefert ist, sollten Sie sie vernichten, damit die Anzeige ordnungsgemäß automatisch bereinigt wird.

Java

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

Kotlin

nativeAd.destroy()

Nativen Anzeigencode testen

Direkt verkaufte Anzeigen

Wenn Sie testen möchten, wie direkt verkaufte native Anzeigen aussehen, können Sie diese Ad Manager-Anzeigenblock-ID verwenden:

/6499/example/native

Es ist so konfiguriert, dass Beispielanzeigen für App-Installationen 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

Der Ad Exchange-Backfill ist derzeit auf eine ausgewählte Gruppe von Publishern beschränkt. Mit diesem Ad Manager-Anzeigenblock können Sie das Verhalten nativer Backfill-Anzeigen testen:

/6499/example/native-backfill

Hier werden Beispiele für App-Installations- und Contentanzeigen mit dem Datenschutzinfo-Overlay ausgeliefert.

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

Beispiele auf GitHub

Beispiel für die vollständige Implementierung nativer Anzeigen:

Java Kotlin

Weitere Informationen

Sehen Sie sich die folgenden Themen an: