Native Anzeige ausliefern
Wenn eine native Anzeige geladen wird, ruft das Google Mobile Ads SDK den Listener für das entsprechende Anzeigenformat auf. Ihre App ist dann für die Auslieferung der Anzeige verantwortlich. Dies muss jedoch nicht sofort erfolgen. Das SDK bietet einige nützliche Ressourcen, die das Einblenden systemdefinierter Anzeigenformate erleichtern. Sie werden unten beschrieben.
NativeAdView
-Klasse definieren
Definieren Sie eine NativeAdView
-Klasse. Diese Klasse ist eine ViewGroup
-Klasse und der übergeordnete Container für eine NativeAdView
-Klasse. Jede Ansicht für native Anzeigen enthält native Anzeigen-Assets, z. B. das MediaView
- oder das Title
-Ansichtselement, das ein untergeordnetes Element des NativeAdView
-Objekts sein muss.
XML-Layout
Fügen Sie Ihrem Projekt ein 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
Fügen Sie das Modul JetpackComposeDemo/compose-util hinzu, das Hilfsfunktionen zum Erstellen der NativeAdView
und ihrer Assets enthält.
Mit dem compose-util
-Modul eine 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 Anzeigen-Unterstützung verarbeiten
Wenn eine native Anzeige geladen wird, verarbeiten Sie das Callback-Ereignis, maximieren Sie den Darstellungsbereich der nativen Anzeige 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("/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 innerhalb des NativeAdView
-Layouts gerendert werden. Das Google Mobile Ads SDK versucht, eine Warnung zu protokollieren, wenn native Assets außerhalb eines Layouts für native Anzeigenaufrufe gerendert werden.
Die Anzeigenanzeigeklassen bieten auch Methoden zum Registrieren der Ansicht, die für jedes einzelne Asset verwendet wird, und eine zum Registrieren des NativeAd
-Objekts selbst.
Wenn du die Ansichten so registrierst, kann das SDK automatisch Aufgaben wie die folgenden ausführen:
- Klicks erfassen
- Impressionen werden erfasst, sobald das erste Pixel auf dem Bildschirm sichtbar ist
- Das AdChoices-Overlay wird für native Backfill-Creatives eingeblendet. Diese Funktion ist derzeit auf eine ausgewählte Gruppe von Publishern beschränkt.
Datenschutzinfo-Overlay
Ein Datenschutzinfo-Overlay wird vom SDK als Anzeigenansicht hinzugefügt, wenn eine Backfill-Anzeige zurückgegeben wird. Wenn in Ihrer App native Anzeigen als Backfill verwendet werden, lassen Sie in der bevorzugten Ecke des nativen Anzeigen-Views Platz für das automatisch eingefügte AdChoices-Logo. Es muss außerdem gut zu erkennen sein. Wählen Sie daher entsprechende Hintergrundfarben und ‑bilder aus. Weitere Informationen zum Erscheinungsbild und zur Funktion des Overlays finden Sie in den Implementierungsrichtlinien für programmatische native Anzeigen.
Anzeigenkennzeichnung für programmatische native Anzeigen
Wenn Sie programmatisch native Anzeigen ausliefern, müssen Sie eine Anzeigenkennzeichnung einblenden, um anzugeben, dass es sich bei der Ansicht um eine Anzeige handelt. Weitere Informationen finden Sie in unseren Richtlinienhinweisen.
Codebeispiel
So schalten Sie eine native Anzeige:
- Erstellen Sie eine Instanz der Klasse
NativeAdView
. Für jedes Anzeigen-Asset, das ausgeliefert werden soll:
- Fügen Sie der Asset-Ansicht das Asset aus dem Anzeigenobjekt hinzu.
- Registrieren Sie die Asset-Ansicht mit der Klasse
NativeAdView
.
Registrieren Sie das Anzeigenobjekt mit der Klasse
NativeAdView
.
Hier ist eine Beispielfunktion, die ein NativeAd
anzeigt:
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 the Google Mobile Ads 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 the Google Mobile Ads 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;
}
Hier sind die einzelnen Aufgaben:
Layout maximieren
Kotlin
// Remove all old ad views when loading a new native ad. binding.nativeViewContainer.removeAllViews() // Inflate the native ad view and add it to the view hierarchy. val nativeAdBinding = NativeAdBinding.inflate(layoutInflater) binding.nativeViewContainer.addView(nativeAdBinding.root)
Java
// Remove all old ad views when loading a new native ad. binding.nativeViewContainer.removeAllViews(); // Inflate the native ad view and add it to the view hierarchy. NativeAdBinding nativeAdBinding = NativeAdBinding.inflate(getLayoutInflater()); binding.nativeViewContainer.addView(nativeAdBinding.getRoot());
Mit diesem Code wird ein XML-Layout aufgebläht, das Ansichten zum Anzeigen einer nativen Anzeige enthält, und dann eine Referenz auf die
NativeAdView
ermittelt. Sie können auch eine vorhandeneNativeAdView
wiederverwenden, falls in Ihrem Fragment oder Ihrer Aktivität eine vorhanden ist, oder sogar eine Instanz dynamisch erstellen, ohne eine Layoutdatei zu verwenden.Asset-Ansichten füllen und registrieren
In diesem Codebeispiel wird die Ansicht gefunden, die zum Darstellen des Titels verwendet wird. Der Text wird dann mit dem String-Asset festgelegt, das vom Anzeigenobjekt bereitgestellt wird, und beim
NativeAdView
-Objekt registriert:Kotlin
nativeAdView.headlineView = nativeAdBinding.adHeadline nativeAdBinding.adHeadline.text = nativeAd.headline nativeAdBinding.adHeadline.visibility = getAssetViewVisibility(nativeAd.headline)
Java
nativeAdView.setHeadlineView(nativeAdBinding.adHeadline); nativeAdBinding.adHeadline.setText(nativeAd.getHeadline()); nativeAdBinding.adHeadline.setVisibility(getAssetViewVisibility(nativeAd.getHeadline()));
Dieser Vorgang zum Suchen der Ansicht, Festlegen ihres Werts und Registrieren bei der Anzeigenansichtsklasse sollte für jedes der vom nativen Anzeigenobjekt bereitgestellten Assets wiederholt werden, das in der App angezeigt wird.
Klicks verarbeiten
Implementieren Sie keine benutzerdefinierten Klick-Handler auf Ansichten über oder innerhalb der nativen Anzeigenansicht. Klicks auf die Assets der Anzeigenansicht werden vom SDK verarbeitet, sofern Sie die Asset-Ansichten wie im vorherigen Abschnitt beschrieben korrekt ausfüllen und registrieren.
Wenn Sie auf Klicks reagieren möchten, implementieren Sie den Google Mobile Ads SDK-Klick-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."); } }); }
MediaView registrieren
Wenn Sie im Layout Ihrer nativen Anzeige ein Hauptbildasset einbinden möchten, müssen Sie anstelle von
ImageView
das AssetMediaView
verwenden.Kotlin
// Get the media asset view. val mediaView = nativeAdBinding.adMedia
Java
// Get the media asset view. MediaView mediaView = nativeAdBinding.adMedia;
ImageScaleType
Die Klasse
MediaView
hat beim Darstellen von Bildern die PropertyImageScaleType
. Wenn Sie ändern möchten, wie ein Bild in derMediaView
skaliert wird, legen Sie den entsprechendenImageView.ScaleType
mit dersetImageScaleType()
-Methode derMediaView
fest:Kotlin
nativeAdViewBinding.mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP
Java
nativeAdViewBinding.mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);
MediaContent
Die
MediaContent
-Klasse enthält die Daten zu den Medieninhalten der nativen Anzeige, die mit derMediaView
-Klasse angezeigt werden. Wenn die PropertyMediaView
mediaContent
mit einerMediaContent
-Instanz festgelegt ist:Wenn ein Video-Asset verfügbar ist, wird es gepuffert und in der
MediaView
wiedergegeben. Ob ein Video-Asset verfügbar ist, kannst du anhand vonhasVideoContent()
erkennen.Wenn die Anzeige kein Video-Asset enthält, wird das
mainImage
-Asset heruntergeladen und stattdessen in dieMediaView
eingefügt.
Wenn
disableImageDownloading(true)
verwendet wird, istmainImage
null
und Sie müssen die PropertymainImage
auf das manuell heruntergeladene Bild festlegen. Dieses Bild wird nur verwendet, wenn kein Video-Asset verfügbar ist.Natives Anzeigenobjekt registrieren
In diesem letzten Schritt wird das native Anzeigenobjekt zusammen mit der Ansicht für das Medieninhalts-Asset in der Ansicht registriert, die für die Anzeige verantwortlich ist.
Kotlin
// Inform the Google Mobile Ads SDK that you have finished populating // the native ad views with this native ad and media content asset. nativeAdView.registerNativeAd(nativeAd, mediaView)
Java
// Inform the Google Mobile Ads SDK that you have finished populating // the native ad views with this native ad and media content asset. nativeAdView.registerNativeAd(nativeAd, mediaView);
Anzeige löschen
Wenn Sie die Auslieferung Ihrer nativen Anzeige beendet haben, sollten Sie sie löschen, damit sie ordnungsgemäß vom Garbage Collector erfasst wird.
Kotlin
nativeAd.destroy()
Java
nativeAd.destroy();
Code für native Anzeigen testen
Direkt verkaufte Anzeigen
Wenn Sie direktverkaufte native Anzeigen testen möchten, können Sie diese Ad Manager-Anzeigenblock-ID verwenden:
/21775744923/example/native
Es ist so konfiguriert, dass Beispiel-App-Installations- und Contentanzeigen sowie ein benutzerdefiniertes natives Anzeigenformat mit den folgenden Assets ausgeliefert werden:
- Anzeigentitel (Text)
- MainImage (Bild)
- Bildunterschrift (Text)
Die Vorlagen-ID für das benutzerdefinierte native Anzeigenformat lautet 10063170
.
Native Backfill-Anzeigen
Das Ad Exchange-Backfill ist auf eine ausgewählte Gruppe von Publishern beschränkt. Verwenden Sie diesen Ad Manager-Anzeigenblock, um das Verhalten von nativen Backfill-Anzeigen zu testen:
/21775744923/example/native-backfill
Es werden Beispiel-App-Installations- und Contentanzeigen mit dem AdChoices-Overlay ausgeliefert.
Denken Sie daran, Ihren Code vor der Veröffentlichung so zu aktualisieren, dass er auf die tatsächlichen Anzeigenblock- und Vorlagen-IDs verweist.
Nächste Schritte
Sehen Sie sich die folgenden Themen an:
Beispiel
Laden Sie die Beispiel-App herunter und führen Sie sie aus. Sie veranschaulicht die Verwendung des Next Gen Google Mobile Ads SDK.