Native Anzeigen

Plattform auswählen: Android iOS Android (Legacy)

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.

Wichtiger Hinweis: Weitere Informationen zu nativen Anzeigen finden Sie in unserem Playbook zu nativen Anzeigen. Lesen Sie außerdem die Richtlinien und Informationen zu nativen Anzeigen um zu erfahren, wie Sie Ihre nativen Anzeigen rendern.

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

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 die native Anzeigenansicht ein 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("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 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 aufzeichnen
• Impressionen aufzeichnen, wenn das erste Pixel auf dem Bildschirm sichtbar ist
• Datenschutzinfo-Overlay anzeigen

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

Hinweis: Wenn Sie Ihre native Anzeige ohne eine MediaView-Instanz rendern möchten, übergeben Sie den Wert null für den Parameter für die Medienansicht, wenn Sie die Methode registerNativeAd() aufrufen.

Datenschutzinfo-Overlay

Ein Datenschutzinfo-Overlay wird vom SDK zu jedem Anzeigenaufruf hinzugefügt. Lassen Sie in der gewünschten Ecke Ihrer 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 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 mediaContent-Property 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.

Creative-Zusammenfassung hinzufügen

Warnung: Der Zugriff auf diese Funktion ist eingeschränkt. Wenden Sie sich an Ihren Account Manager, um Zugriff anzufordern.

In Konversations- und KI-Chatanwendungen bietet GMA Next-Gen SDK ein Creative Zusammenfassungs-Asset (creativeSummary) für das Anzeigen-Creative. Sie können Anzeigen mit einer Einführungsnachricht in die Chatabläufe Ihrer App einbinden.

Textansicht zum Layout hinzufügen

Fügen Sie ein TextView für das Creative-Zusammenfassungs-Asset im Layout des NativeAdView-Containers hinzu:

<TextView
    android:id="@+id/ad_creative_summary"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="13sp" />

Ansicht ausfüllen und registrieren

Füllen Sie das TextView mit creativeSummary aus und registrieren Sie es mit der creativeSummaryView Property für Ihr NativeAdView Objekt. Durch die Registrierung der Ansicht wird das automatische Click-Tracking für das Creative-Zusammenfassungs-Asset aktiviert.

Hinweis: Für die APIs creativeSummary und creativeSummaryView ist die Annotation @OptIn(ExperimentalApi::class) erforderlich.

Kotlin

private fun populateCreativeSummary(
  nativeAd: NativeAd,
  nativeAdBinding: NativeAdBinding,
  nativeAdView: NativeAdView,
) {
  val summary = nativeAd.creativeSummary
  if (summary == null) {
    nativeAdBinding.adCreativeSummary.visibility = View.GONE
    return
  }

  nativeAdBinding.adCreativeSummary.text = summary
  nativeAdBinding.adCreativeSummary.visibility = View.VISIBLE
  nativeAdView.creativeSummaryView = nativeAdBinding.adCreativeSummary
}

Java

private void populateCreativeSummary(
    NativeAd nativeAd, NativeAdBinding nativeAdBinding, NativeAdView nativeAdView) {
  String summary = nativeAd.getCreativeSummary();
  if (summary == null) {
    nativeAdBinding.adCreativeSummary.setVisibility(View.GONE);
    return;
  }

  nativeAdBinding.adCreativeSummary.setText(summary);
  nativeAdBinding.adCreativeSummary.setVisibility(View.VISIBLE);
  nativeAdView.setCreativeSummaryView(nativeAdBinding.adCreativeSummary);
}

Click-Tracking und geänderter Text

• Direktes Rendering: Wenn Sie den genauen creativeSummary String rendern, der vom SDK bereitgestellt wird, registrieren Sie ihn für die creativeSummaryView Property im NativeAdView Container, um die Click-Verarbeitung durch das SDK zu aktivieren.
• Geänderte Einführungen:Wenn Ihre App den Text der Creative-Zusammenfassung ändert, zusammenfasst oder benutzerdefinierten Konversationstext anhängt, platzieren Sie den geänderten Text außerhalb des NativeAdView-Containers.

Anzeige löschen

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

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.