Teilen Sie uns Ihr Feedback zum GMA Next-Gen SDK im #gma-next-gen-sdk des Google Advertising and Measurement Community-Servers mit.

Native Anzeigen

Plattform auswählen: Android

Android iOS

Wenn eine native Anzeige geladen wird, ruft GMA Next-Gen 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. Um die Auslieferung von vom System definierten Anzeigenformaten zu erleichtern, bietet das SDK einige nützliche Ressourcen, die unten beschrieben werden.

Die Klasse `NativeAdView` definieren

Definieren Sie eine NativeAdView-Klasse. Diese Klasse ist eine ViewGroup Klasse und der Container der obersten Ebene für eine NativeAdView Klasse. Jede native Anzeigenansicht enthält native Anzeigen-Assets wie das Ansichtselement MediaView oder das Ansichtselement Title, die untergeordnete Elemente des NativeAdView-Objekts sein müssen.

XML-Layout

Fügen Sie Ihrem Projekt eine XML-Datei 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 den JetpackCompose Utilities Ordner hinzu. Dieser Ordner enthält Hilfsprogramme zum Erstellen des NativeAdView-Objekts und von Assets.

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

Mit der geladenen nativen Anzeige umgehen

Wenn eine native Anzeige geladen wird, verarbeiten Sie das Callback-Ereignis, führen Sie die Layout-Inflation für die native Anzeigenansicht durch und fügen Sie sie der Hierarchieansicht hinzu:

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

Beachten Sie, dass alle Assets für eine bestimmte native Anzeige im Layout NativeAdView gerendert werden sollten. GMA Next-Gen SDK versucht, eine Warnung zu protokollieren, wenn native Assets außerhalb eines Layouts für native Anzeigenaufrufe gerendert werden.

Die Klassen für Anzeigenaufrufe bieten auch Methoden zum Registrieren der Ansicht, die für jedes einzelne Asset verwendet wird, und eine Methode 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 erfassen
Impressionen erfassen, wenn das erste Pixel auf dem Bildschirm sichtbar ist
Das Datenschutzinfo-Overlay anzeigen

Native Anzeige ausliefern

Das folgende Beispiel zeigt, wie Sie eine native Anzeige ausliefern:

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 GMA Next-Gen 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 GMA Next-Gen 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;
}

Datenschutzinfo-Overlay

Ein Datenschutzinfo-Overlay wird vom SDK zu jedem Anzeigenaufruf hinzugefügt. Lassen Sie in der gewünschten Ecke der nativen Anzeigenansicht Platz für das automatisch eingefügte Datenschutzinfo-Logo. Es ist außerdem wichtig, dass das Datenschutzinfo-Overlay zu sehen ist. Wählen Sie daher entsprechende Hintergrundfarben und ‑bilder aus. Weitere Informationen zum Aussehen und zur Funktion des Overlays finden Sie unter Beschreibungen der Felder für native Anzeigen.

Anzeigenkennzeichnung

Sie müssen eine Anzeigenkennzeichnung einblenden, um anzugeben, dass es sich bei der Ansicht um eine Anzeige handelt. Weitere Informationen finden Sie in unseren Richtlinien.

Klicks verarbeiten

Implementieren Sie keine benutzerdefinierten Click-Handler für Ansichten über oder innerhalb des nativen Anzeigenaufrufs. Klicks auf die Assets der Anzeigenaufrufe werden vom SDK verarbeitet, solange Sie die Asset-Ansichten korrekt ausfüllen und registrieren.

Wenn Sie auf Klicks reagieren möchten, implementieren Sie den GMA Next-Gen SDK Click-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.");
      }
  });
}

ImageScaleType

Die Klasse MediaView hat beim Anzeigen von Bildern eine ImageScaleType-Property. Wenn Sie ändern möchten, wie ein Bild in der MediaView skaliert wird, legen Sie den entsprechenden ImageView.ScaleType mit der Methode setImageScaleType() der 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 zu den Medieninhalten der nativen Anzeige, die mit der Klasse MediaView angezeigt werden. Wenn die mediaContent-Property von MediaView mit einer MediaContent-Instanz festgelegt wird:

Wenn ein Video-Asset verfügbar ist, wird es gepuffert und in der MediaView abgespielt. Sie können mit hasVideoContent() prüfen, ob ein Video-Asset verfügbar ist.
Wenn die Anzeige kein Video-Asset enthält, wird stattdessen das Asset mainImage heruntergeladen und in der MediaView platziert.

Anzeige löschen

Nachdem Sie eine native Anzeige ausgeliefert haben, löschen Sie sie. Im folgenden Beispiel wird eine native Anzeige gelöscht:

Kotlin

nativeAd.destroy()

Java

nativeAd.destroy();

Nächste Schritte

Sehen Sie sich die folgenden Themen an:

Datenschutz für Nutzer

Beispiel

Laden Sie die Beispiel-App herunter und führen Sie sie aus, um die Verwendung des GMA Next-Gen SDK zu sehen.

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

Die Klasse NativeAdView definieren

XML-Layout

Jetpack Compose

Mit der geladenen nativen Anzeige umgehen

Kotlin

Java

Native Anzeige ausliefern

Kotlin

Java

Datenschutzinfo-Overlay

Anzeigenkennzeichnung

Klicks verarbeiten

Kotlin

Java

ImageScaleType

Kotlin

Java

MediaContent

Anzeige löschen

Kotlin

Java

Nächste Schritte

Beispiel

Native Anzeigen

Die Klasse `NativeAdView` definieren