Native Anzeigen

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 unbedingt sofort tun. Damit systemdefinierte Anzeigenformate leichter dargestellt werden können, bietet das SDK einige nützliche Ressourcen, die im Folgenden beschrieben werden.

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 Ansicht einer nativen Anzeige enthält native Anzeigen-Assets, z. B. das Ansichtselement MediaView oder Title, die untergeordnete Elemente des NativeAdView-Objekts sein müssen.

XML-Layout

Fügen Sie Ihrem Projekt eine 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

  1. Fügen Sie den Ordner JetpackCompose Utilities ein. Dieser Ordner enthält Hilfsprogramme zum Erstellen des NativeAdView-Objekts und der Assets.

NativeAdView verfassen:

  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, füllen Sie die Ansicht der nativen Anzeige 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 müssen im NativeAdView-Layout 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 Anzeigenansichten bieten auch Methoden, mit denen die für jedes einzelne Asset verwendete Ansicht registriert wird, sowie eine Methode, mit der das NativeAd-Objekt selbst registriert wird. Wenn Sie die Ansichten auf diese Weise registrieren, kann das SDK automatisch Aufgaben wie die folgenden ausführen:

  • Klicks aufzeichnen
  • Impressionen werden erfasst, wenn das erste Pixel auf dem Bildschirm sichtbar ist.
  • Datenschutzinfo-Overlay einblenden

Native Anzeige einblenden

Das folgende Beispiel zeigt, wie eine native Anzeige präsentiert 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;
}

Datenschutzinfo-Overlay

Das SDK fügt jeder Anzeigenansicht ein Datenschutzinfo-Overlay hinzu. Lassen Sie in der bevorzugten Ecke der Ansicht Ihrer nativen Anzeige 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 Feldbeschreibungen für native Anzeigen.

Anzeigenkennzeichnung

Sie müssen eine Anzeigenkennzeichnung einblenden, um darauf hinzuweisen, dass es sich um eine Anzeige handelt. Weitere Informationen findest du in unseren Richtlinien.

Klicks verarbeiten

Implementieren Sie keine benutzerdefinierten Klick-Handler für Ansichten über oder innerhalb der nativen Anzeigenansicht. Klicks auf die Anzeigenansichts-Assets werden vom SDK verarbeitet, sofern Sie die Asset-Ansichten korrekt ausfüllen und registrieren.

Implementieren Sie den Klick-Callback GMA Next-Gen SDK, um auf Klicks zu warten:

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 das Attribut ImageScaleType. Wenn Sie die Skalierung eines Bildes im MediaView ändern möchten, 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 zu den Medieninhalten 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 im MediaView abgespielt. Ob ein Video-Asset verfügbar ist, können Sie anhand von hasVideoContent() feststellen.

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

Creative-Zusammenfassung hinzufügen

In konversationellen und KI-Chat-Anwendungen stellt GMA Next-Gen SDK ein Creative-Zusammenfassungs-Asset (creativeSummary) für das Anzeigen-Creative bereit. Sie können Anzeigen mit einer einleitenden Nachricht in die Chatabläufe Ihrer App einbinden.

Textansicht zum Layout hinzufügen

Fügen Sie in Ihrem NativeAdView-Container-Layout ein TextView für das Creative-Zusammenfassungs-Asset hinzu:

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

Ansicht füllen und registrieren

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

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

Klick-Tracking und geänderter Text

  • Direktes Rendering: Wenn Sie den genauen creativeSummary-String rendern, der vom SDK bereitgestellt wird, registrieren Sie ihn im NativeAdView-Container in der creativeSummaryView-Property, um die SDK-Klickverarbeitung zu aktivieren.
  • Geänderte Einleitungen: Wenn Ihre App den benutzerdefinierten Konversationstext in der Creative-Zusammenfassung ändert, zusammenfasst oder ergänzt, platzieren Sie den geänderten Text außerhalb des NativeAdView-Containers.

Anzeige zerstören

Nachdem Sie eine native Anzeige eingeblendet haben, müssen Sie sie löschen. 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, die die Verwendung des GMA Next-Gen SDK veranschaulicht, und führen Sie sie aus.