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

Native Anzeige ausliefern

Plattform auswählen: Android (Beta)

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, wie unten beschrieben.

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

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

Wenn eine native Anzeige geladen wird, verarbeiten Sie den Callback, erweitern Sie die native Anzeigenansicht und fügen Sie sie 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 im Layout NativeAdView gerendert werden. GMA Next-Gen SDK versucht, eine Warnung zu protokollieren, wenn native Assets außerhalb des Layouts einer nativen Anzeigenansicht gerendert werden.

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

Klicks erfassen
Impressionen erfassen, wenn das erste Pixel auf dem Bildschirm sichtbar ist
Datenschutzinfo-Overlay für native Backfill Creatives anzeigen – derzeit nur für eine ausgewählte Gruppe von Publishern verfügbar

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 als Anzeigenansicht hinzugefügt, wenn eine Backfill-Anzeige zurückgegeben wird. Wenn Ihre App native Backfill-Anzeigen verwendet, lassen Sie in der gewünschten Ecke der nativen Anzeigenansicht 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 in den Implementierungsrichtlinien für programmatische native Anzeigen.

Anzeigenattribution für programmatische native Anzeigen

Wenn Sie programmatische native Anzeigen ausliefern, müssen Sie eine Anzeigenattribution 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 der nativen Anzeigenansicht. Klicks auf die Assets der Anzeigenansicht 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 die Property ImageScaleType. Wenn Sie ändern möchten, wie ein Bild in MediaView skaliert wird, legen Sie den entsprechenden ImageView.ScaleType mit der Methode setImageScaleType() von 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 Property mediaContent von MediaView mit einer MediaContent-Instanz festgelegt wird, gilt Folgendes:

Wenn ein Video-Asset verfügbar ist, wird es gepuffert und in 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 MediaView platziert.

Anzeige entfernen

Nachdem Sie eine native Anzeige ausgeliefert haben, entfernen Sie sie. Im folgenden Beispiel wird eine native Anzeige entfernt:

Kotlin

nativeAd.destroy()

Java

nativeAd.destroy();

Code für native Anzeigen testen

Direkt verkaufte Anzeigen

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

/21775744923/example/native

Sie ist so konfiguriert, dass Beispiel-App-Installationsanzeigen und Contentanzeigen sowie ein benutzerdefiniertes natives Anzeigenformat mit den folgenden Assets ausgeliefert werden:

Anzeigentitel (Text)
Hauptbild (Bild)
Bildunterschrift (Text)

Die Vorlagen-ID für das benutzerdefinierte native Anzeigenformat ist 10063170.

Native Backfill-Anzeigen

Ad Exchange-Backfill ist auf eine ausgewählte Gruppe von Publishern beschränkt. Wenn Sie das Verhalten von nativen Backfill-Anzeigen testen möchten, verwenden Sie diesen Ad Manager-Anzeigenblock:

/21775744923/example/native-backfill

Er liefert Beispiel-App-Installationsanzeigen und Contentanzeigen aus, die das Datenschutzinfo-Overlay enthalten.

Denken Sie daran, Ihren Code zu aktualisieren, damit er auf Ihre tatsächlichen Anzeigenblock- und Vorlagen-IDs verweist, bevor Sie ihn veröffentlichen.

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 Anzeige ausliefern Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Klasse NativeAdView definieren

XML-Layout

Jetpack Compose

Geladene native Anzeige verarbeiten

Kotlin

Java

Native Anzeige ausliefern

Kotlin

Java

Datenschutzinfo-Overlay

Anzeigenattribution für programmatische native Anzeigen

Klicks verarbeiten

Kotlin

Java

ImageScaleType

Kotlin

Java

MediaContent

Anzeige entfernen

Kotlin

Java

Code für native Anzeigen testen

Direkt verkaufte Anzeigen

Native Backfill-Anzeigen

Nächste Schritte

Beispiel

Native Anzeige ausliefern

Klasse `NativeAdView` definieren