Native Anzeigen

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

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:

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

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:

  1. Erstellen Sie eine Instanz der Klasse NativeAdView.
  2. 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.
  3. Registrieren Sie das Anzeigenobjekt mit der Klasse NativeAdView.

Hier ist eine Beispielfunktion, die ein NativeAd anzeigt:

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

Hier sind die einzelnen Aufgaben:

  1. Layout maximieren

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

    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:

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

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

    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.");
           }
       });
     }
    
  4. MediaView registrieren

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

    Kotlin

    // Get the media asset view.
    val mediaView = nativeAdBinding.adMedia
    

    Java

    // Get the media asset view.
    MediaView 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:

    Kotlin

    nativeAdViewBinding.mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP
    

    Java

    nativeAdViewBinding.mediaView.setImageScaleType(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.

    Wenn disableImageDownloading(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 zusammen mit der Ansicht für das Medieninhalts-Asset in der Ansicht registriert, die für die Anzeige verantwortlich ist.

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

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.

Kotlin

nativeAd.destroy()

Java

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.

Nächste Schritte

Sehen Sie sich die folgenden Themen an:

Beispiel

Laden Sie die Beispiel-App herunter und führen Sie sie aus. Sie veranschaulicht die Verwendung des Next Gen Google Mobile Ads SDK.