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, muss dies aber nicht sofort tun. Das SDK bietet einige nützliche Ressourcen, die das Einblenden systemdefinierter Anzeigenformate erleichtern. Sie werden unten beschrieben.
Klasse NativeAdView
Für das NativeAd
-Format gibt es die entsprechende Klasse NativeAdView
. Diese Klasse ist eine ViewGroup
, die Verlage und Webpublisher als Stamm für NativeAd
verwenden sollten. Ein einzelnes NativeAdView
entspricht einer einzelnen nativen Anzeige.
Jede Ansicht, die zum Darstellen der Assets dieser Anzeige verwendet wird (z. B. die ImageView
, in der das Screenshot-Asset angezeigt wird), sollte ein untergeordnetes Element des NativeAdView
-Objekts sein.
Die Ansichtshierarchie für eine native Anzeige, in der Asset-Ansichten mithilfe eines LinearLayout
dargestellt werden, könnte so aussehen:
<com.google.android.gms.ads.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.gms.ads.nativead.NativeAdView>
Hier ein Beispiel, in dem ein NativeAdView
erstellt und mit einem NativeAd
ausgefüllt wird:
Java
AdLoader.Builder builder = new AdLoader.Builder(this, "/21775744923/example/native")
.forNativeAd(new NativeAd.OnNativeAdLoadedListener() {
@Override
public void onNativeAdLoaded(NativeAd nativeAd) {
// Assumes you have a placeholder FrameLayout in your View layout
// (with ID fl_adplaceholder) where the ad is to be placed.
FrameLayout frameLayout =
findViewById(R.id.fl_adplaceholder);
// Assumes that your ad layout is in a file call native_ad_layout.xml
// in the res/layout folder
NativeAdView adView = (NativeAdView) getLayoutInflater()
.inflate(R.layout.native_ad_layout, null);
// This method sets the assets into the ad view.
populateNativeAdView(nativeAd, adView);
frameLayout.removeAllViews();
frameLayout.addView(adView);
}
});
Kotlin
val builder = AdLoader.Builder(this, "/21775744923/example/native")
.forNativeAd { nativeAd ->
// Assumes you have a placeholder FrameLayout in your View layout
// (with ID fl_adplaceholder) where the ad is to be placed.
val frameLayout: FrameLayout = findViewById(R.id.fl_adplaceholder)
// Assumes that your ad layout is in a file call native_ad_layout.xml
// in the res/layout folder
val adView = layoutInflater
.inflate(R.layout.native_ad_layout, null) as NativeAdView
// This method sets the assets into the ad view.
populateNativeAdView(nativeAd, adView)
frameLayout.removeAllViews()
frameLayout.addView(adView)
}
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 Anzeigenansichtsklassen bieten auch Methoden zum Registrieren der Ansicht, die für jedes einzelne Asset verwendet wird, und eine zum Registrieren des NativeAd
-Objekts selbst.
Wenn die Ansichten auf diese Weise registriert werden, kann das SDK unter anderem folgende Aufgaben automatisch verarbeiten:
- Klicks werden erfasst
- 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. Außerdem muss das Datenschutzinfo-Overlay sichtbar sein. Wählen Sie daher geeignete 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 Richtlinien für Richtlinienrichtlinien.
Codebeispiel
So stellen Sie eine native Anzeige bereit:
- Erstellen Sie eine Instanz der Klasse
NativeAdView
. Für jedes Anzeigen-Asset, das ausgeliefert werden soll:
- Fülle die Asset-Ansicht mit dem Asset im Anzeigenobjekt.
- Registrieren Sie die Asset-Ansicht mit der Klasse
NativeAdView
.
Registrieren Sie die
MediaView
, wenn Ihr natives Anzeigenlayout ein großes Medien-Asset enthält.Registrieren Sie das Anzeigenobjekt mit der Klasse
NativeAdView
.
Hier ist eine Beispielfunktion, die ein NativeAd
anzeigt:
Java
private void displayNativeAd(ViewGroup parent, NativeAd ad) {
// Inflate a layout and add it to the parent ViewGroup.
LayoutInflater inflater = (LayoutInflater) parent.getContext()
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
NativeAdView adView = (NativeAdView) inflater
.inflate(R.layout.ad_layout_file, parent);
// Locate the view that will hold the headline, set its text, and call the
// NativeAdView's setHeadlineView method to register it.
TextView headlineView = adView.findViewById<TextView>(R.id.ad_headline);
headlineView.setText(ad.getHeadline());
adView.setHeadlineView(headlineView);
// Repeat the process for the other assets in the NativeAd
// using additional view objects (Buttons, ImageViews, etc).
// If the app is using a MediaView, it should be
// instantiated and passed to setMediaView. This view is a little different
// in that the asset is populated automatically, so there's one less step.
MediaView mediaView = (MediaView) adView.findViewById(R.id.ad_media);
adView.setMediaView(mediaView);
// Call the NativeAdView's setNativeAd method to register the
// NativeAdObject.
adView.setNativeAd(ad);
// Ensure that the parent view doesn't already contain an ad view.
parent.removeAllViews();
// Place the AdView into the parent.
parent.addView(adView);
}
Kotlin
fun displayNativeAd(parent: ViewGroup, ad: NativeAd) {
// Inflate a layout and add it to the parent ViewGroup.
val inflater = parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE)
as LayoutInflater
val adView = inflater.inflate(R.layout.ad_layout_file, parent) as NativeAdView
// Locate the view that will hold the headline, set its text, and use the
// NativeAdView's headlineView property to register it.
val headlineView = adView.findViewById<TextView>(R.id.ad_headline)
headlineView.text = ad.headline
adView.headlineView = headlineView
// Repeat the process for the other assets in the NativeAd using
// additional view objects (Buttons, ImageViews, etc).
val mediaView = adView.findViewById<MediaView>(R.id.ad_media)
adView.mediaView = mediaView
// Call the NativeAdView's setNativeAd method to register the
// NativeAdObject.
adView.setNativeAd(ad)
// Ensure that the parent view doesn't already contain an ad view.
parent.removeAllViews()
// Place the AdView into the parent.
parent.addView(adView)
}
Hier sind die einzelnen Aufgaben:
Layout maximieren
Java
LayoutInflater inflater = (LayoutInflater) parent.getContext() .getSystemService(Context.LAYOUT_INFLATER_SERVICE); NativeAdView adView = (NativeAdView) inflater .inflate(R.layout.ad_layout_file, parent);
Kotlin
val inflater = parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater val adView = inflater.inflate(R.layout.ad_layout_file, parent) as NativeAdView
Mit diesem Code wird ein XML-Layout erweitert, das Ansichten zum Darstellen einer nativen Anzeige enthält und dann einen Verweis 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:Java
TextView headlineView = adView.findViewById<TextView>(R.id.ad_headline); headlineView.setText(ad.getHeadline()); adView.setHeadlineView(headlineView);
Kotlin
val headlineView = adView.findViewById<TextView>(R.id.ad_headline) headlineView.text = ad.headline adView.headlineView = headlineView
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 Anzeigenaufruf-Assets werden vom SDK verarbeitet, sofern Sie die Asset-Aufrufe 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:
Java
AdLoader adLoader = new AdLoader.Builder(context, "/21775744923/example/native") // ... .withAdListener(new AdListener() { @Override public void onAdFailedToLoad(LoadAdError adError) { // Handle the failure by logging. } @Override public void onAdClicked() { // Log the click event or other custom behavior. } }) .build();
Kotlin
val adLoader = AdLoader.Builder(this, "/21775744923/example/native") // ... .withAdListener(object : AdListener() { override fun onAdFailedToLoad(adError: LoadAdError) { // Handle the failure. } override fun onAdClicked() { // Log the click event or other custom behavior. } }) .build()
MediaView registrieren
Sie müssen das
MediaView
-Asset anstelle desImageView
-Assets verwenden, wenn Sie ein Hauptbild-Asset in das Layout Ihrer nativen Anzeige einschließen möchten.Das
MediaView
ist ein speziellesView
, das zum Darstellen des Hauptmedien-Assets (Video oder Bild) dient.MediaView
kann in einem XML-Layout definiert oder dynamisch erstellt werden. Sie sollte wie jede andere Asset-Ansicht in der Ansichtshierarchie einerNativeAdView
platziert werden. Apps, die eineMediaView
verwenden, müssen diese bei derNativeAdView
registrieren:Java
// Populate and register the media asset view. nativeAdView.setMediaView(nativeAdBinding.adMedia);
Kotlin
// Populate and register the media asset view. nativeAdView.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:Java
mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);
Kotlin
mediaView.imageScaleType = 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 das AttributMediaView
mediaContent
mit einerMediaContent
-Instanz festgelegt ist:Wenn ein Video-Asset verfügbar ist, wird es zwischengespeichert und innerhalb der
MediaView
abgespielt. 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.
Standardmäßig ist
mainImage
das erste heruntergeladene Bild-Asset. WennsetReturnUrlsForImageAssets(true)
verwendet wird, istmainImage
null
und Sie müssen das AttributmainImage
auf das manuell heruntergeladene Image festlegen. Dieses Bild wird nur verwendet, wenn kein Video-Asset verfügbar ist.Natives Anzeigenobjekt registrieren
In diesem letzten Schritt wird das native Anzeigenobjekt in der Ansicht registriert, die für die Anzeige verantwortlich ist.
Java
adView.setNativeAd(ad);
Kotlin
adView.setNativeAd(ad)
Anzeige löschen
Wenn Ihre native Anzeige nicht mehr ausgeliefert wird, sollten Sie sie zerstören, damit sie ordnungsgemäß automatisch bereinigt wird.
Java
nativeAd.destroy();
Kotlin
nativeAd.destroy()
Code für native Anzeigen testen
Direkt verkaufte Anzeigen
Wenn Sie testen möchten, wie direkt verkaufte native Anzeigen sind, können Sie diese Anzeigenblock-ID in Ad Manager 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 nativer 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.
Beispiele auf GitHub
Beispiel für vollständige Implementierung nativer Anzeigen:
Nächste Schritte
Sehen Sie sich die folgenden Themen an: