Native Anzeigen

Plattform auswählen: Android (Beta) Neu ausgewählt 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. Jeder Darstellungsbereich für native Anzeigen enthält Assets für native Anzeigen, z. B. 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

  1. 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 das Callback-Ereignis, blenden Sie den Darstellungsbereich für native Anzeigen ein 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("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 Layout NativeAdView gerendert werden. GMA Next-Gen SDK versucht, eine Warnung zu protokollieren, wenn native Assets außerhalb eines Layouts für native Anzeigen gerendert werden.

Die Klassen für Darstellungsbereiche für Anzeigen 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 aufzeichnen
  • Impressionen aufzeichnen, wenn das erste Pixel auf dem Bildschirm sichtbar ist
  • 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

Jeder Darstellungsbereich für Anzeigen wird vom SDK mit einem Datenschutzinfo-Overlay versehen. Lassen Sie in der gewünschten Ecke des Darstellungsbereichs 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 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 Darstellungsbereichs für native Anzeigen. Klicks auf die Assets des Darstellungsbereichs für Anzeigen werden vom SDK verarbeitet, solange Sie die Asset-Ansichten korrekt ausfüllen und registrieren.

Wenn Sie auf Klicks reagieren möchten, implementieren Sie das 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:

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

Beispiel

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