Native Anzeigen

Wenn eine native Anzeige geladen wird, ruft das Google Mobile Ads SDK (Beta) den Listener für das entsprechende Anzeigenformat auf. Ihre App ist dann für die Auslieferung der Anzeige verantwortlich, muss dies aber nicht unbedingt sofort tun. Um die Anzeige von systemdefinierten Anzeigenformaten zu vereinfachen, bietet das SDK einige nützliche Ressourcen, wie unten beschrieben.

NativeAdView-Klasse definieren

Definieren Sie eine NativeAdView-Klasse. Diese Klasse ist eine ViewGroup-Klasse und der Container der obersten Ebene für eine NativeAdView-Klasse. Jeder Darstellungsbereich für native Anzeigen enthält Assets für native Anzeigen, z. B. das MediaView- oder das Title-View-Element, 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 ein, das Hilfsprogramme zum Erstellen der NativeAdView und ihrer Assets enthält.

Erstellen Sie mit dem compose-util-Modul eine 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.
        }
    }

Geladene native Anzeige verarbeiten

Wenn eine native Anzeige geladen wird, müssen Sie das Callback-Ereignis verarbeiten, die Ansicht der nativen Anzeige aufblähen und sie der Ansichtshierarchie hinzufügen:

Kotlin

// Build an ad request with native ad options to customize the ad.
val adTypes = listOf(NativeAd.NativeAdType.NATIVE)
val adRequest = NativeAdRequest
  .Builder("ca-app-pub-3940256099942544/2247696110", 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("ca-app-pub-3940256099942544/2247696110", 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 im NativeAdView-Layout gerendert werden. Das Google Mobile Ads SDK (Beta) versucht, eine Warnung zu protokollieren, wenn native Assets außerhalb des Layouts einer Ansicht für native Anzeigen gerendert werden.

Die Anzeigenansichtsklassen bieten auch Methoden zum Registrieren der Ansicht, die für jedes einzelne Asset verwendet wird, und eine zum Registrieren des NativeAd-Objekts selbst. Durch die Registrierung der Ansichten auf diese Weise kann das SDK Aufgaben wie die folgenden automatisch ausführen:

  • Klicks auf Aufzeichnungen
  • Impressionen erfassen, wenn das erste Pixel auf dem Bildschirm zu sehen ist
  • Datenschutzinfo-Overlay einblenden

Native Anzeige ausliefern

Das folgende Beispiel zeigt, wie eine native Anzeige ausgeliefert wird:

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 Google Mobile Ads SDK (beta) 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 Google Mobile Ads SDK (beta) 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;
}

Datenschutzinfo-Overlay

Das SDK fügt jeder Anzeigenansicht ein Datenschutzinfo-Overlay hinzu. Lassen Sie in der bevorzugten Ecke Ihrer Ansicht für native Anzeigen 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 Aussehen und zur Funktion des Overlays finden Sie unter Feldbeschreibungen für native Anzeigen.

Anzeigenkennzeichnung

Sie müssen eine Anzeigenkennzeichnung einblenden, um darauf hinzuweisen, dass es sich bei der Anzeige um Werbung handelt. Weitere Informationen

Klicks verarbeiten

Implementieren Sie keine benutzerdefinierten Klick-Handler für Ansichten über oder innerhalb der Ansicht für native Anzeigen. Klicks auf die Assets der Anzeigenansicht werden vom SDK verarbeitet, sofern Sie die Asset-Ansichten richtig einfügen und registrieren.

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

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

ImageScaleType

Die Klasse MediaView hat beim Anzeigen von Bildern die Property ImageScaleType. Wenn Sie ändern möchten, wie ein Bild im MediaView skaliert wird, legen Sie den entsprechenden ImageView.ScaleType mit der Methode setImageScaleType() des MediaView fest:

Kotlin

nativeAdViewBinding.mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP

Java

nativeAdViewBinding.mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);

MediaContent

Die Klasse MediaContent enthält die Daten zum Media-Inhalt der nativen Anzeige, die mit 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 gepuffert und innerhalb des MediaView abgespielt. Ob ein Video-Asset verfügbar ist, können Sie anhand von hasVideoContent() erkennen.

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

Anzeige zerstören

Nachdem Sie eine native Anzeige ausgeliefert haben, müssen Sie sie zerstören. Im folgenden Beispiel wird eine native Anzeige zerstört:

Kotlin

nativeAd.destroy()

Java

nativeAd.destroy();

Nächste Schritte

Sehen Sie sich die folgenden Themen an:

Beispiel

Laden Sie die Beispiel-App herunter und führen Sie sie aus, um die Verwendung des Google Mobile Ads SDK (Beta) zu demonstrieren.