Native Anzeige ausliefern
Beim Laden einer nativen Anzeige 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 geschehen. Um die Auslieferung systemdefinierter Anzeigenformate zu erleichtern, bietet das SDK einige nützliche Ressourcen, die unten beschrieben werden.
Klasse NativeAdView
Für das Format NativeAd
gibt es die entsprechende Klasse NativeAdView
. Diese Klasse ist eine ViewGroup
, die Verlage und Webpublisher als Stamm für NativeAd
verwenden sollten. Eine einzelne NativeAdView
entspricht einer einzelnen nativen Anzeige.
Jede Ansicht, die zur Darstellung der Assets dieser Anzeige verwendet wird (z. B. ImageView
, der das Screenshot-Asset darstellt), sollte dem Objekt NativeAdView
untergeordnet sein.
Die Ansichtshierarchie für eine native Anzeige, in der die Asset-Ansichten mit einem 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>
// Other assets such as image or media view, call to action, etc follow.
...
</LinearLayout>
</com.google.android.gms.ads.nativead.NativeAdView>
In diesem Beispiel wird ein NativeAdView
erstellt und mit einem NativeAd
gefüllt:
Java
AdLoader.Builder builder = new AdLoader.Builder(this, "AD_UNIT_ID")
.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 text, images and the native ad, etc into the ad
// view.
populateNativeAdView(nativeAd, adView);
frameLayout.removeAllViews();
frameLayout.addView(adView);
}
});
Kotlin
val builder = AdLoader.Builder(this, "AD_UNIT_ID")
.forNativeAd { nativeAd ->
// 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 text, images and the native ad, etc into the ad
// view.
populateNativeAdView(nativeAd, adView)
// Assumes you have a placeholder FrameLayout in your View layout
// (with id ad_frame) where the ad is to be placed.
ad_frame.removeAllViews()
ad_frame.addView(adView)
}
Alle Assets für eine bestimmte native Anzeige sollten im Layout NativeAdView
gerendert werden. Das Google Mobile Ads SDK versucht, eine Warnung zu protokollieren, wenn native Assets außerhalb eines nativen Anzeigenlayouts gerendert werden.
Die Anzeigenansichtsklassen enthalten auch Methoden zum Registrieren der für jedes einzelne Asset verwendeten Ansicht sowie zum Registrieren des NativeAd
-Objekts selbst.
Wenn die Ansichten auf diese Weise registriert werden, kann das SDK unter anderem die folgenden Aufgaben automatisch verarbeiten:
- Klicks werden erfasst
- Impressionen werden erfasst, wenn das erste Pixel auf dem Bildschirm sichtbar ist
- Datenschutzinfo-Overlay für native Backfill-Creatives anzeigen – 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 Ihre App native Anzeigen-Backfills verwendet, lassen Sie in Ihrer bevorzugten Ecke Ihrer nativen Anzeigenansicht Platz für das automatisch eingefügte Datenschutzinfo-Logo. Das Datenschutzinfo-Overlay muss außerdem gut zu sehen sein. Wählen Sie daher geeignete Hintergrundfarben und Bilder aus. Weitere Informationen zu Darstellung und Funktion des Overlays finden Sie in den Implementierungsrichtlinien für programmatische native Anzeigen.
Anzeigenattribution für programmatische native Anzeigen
Bei der Auslieferung programmatischer nativer Anzeigen muss eine Anzeigenkennzeichnung eingeblendet werden, um darauf hinzuweisen, dass es sich um eine Anzeige handelt. Weitere Informationen finden Sie in unseren Richtlinien.
Codebeispiel
So werden native Anzeigen ausgeliefert:
- Erstellen Sie eine Instanz der
NativeAdView
-Klasse. - Führen Sie für jedes auszuliefernde Anzeigen-Asset folgende Schritte aus:
- Füllen Sie die Asset-Ansicht mit dem Asset im Anzeigenobjekt.
- Registrieren Sie die Asset-Ansicht mit der Klasse
ViewGroup
.
- Registrieren Sie die
MediaView
, wenn das Layout Ihrer nativen Anzeige ein großes Media-Asset enthält. - Registrieren Sie das Anzeigenobjekt mit der Klasse
ViewGroup
.
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 above 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 above 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 die einzelnen Aufgaben:
Layout erweitern
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 aufgebläht, das Ansichten zum Ausliefern einer nativen Anzeige enthält, und sucht dann nach einem Verweis auf die
NativeAdView
. Sie können auch ein vorhandenesNativeAdView
wiederverwenden, wenn dieses in Ihrem Fragment oder in Ihrer Aktivität vorhanden ist, oder Sie können sogar eine Instanz dynamisch ohne Layoutdatei erstellen.Asset-Ansichten ausfüllen und registrieren
Mit diesem Beispielcode wird die Ansicht zur Darstellung des Anzeigentitels ermittelt, der Text mithilfe des vom Anzeigenobjekt bereitgestellten String-Assets festgelegt 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
Die Suche nach der Ansicht, das Festlegen ihres Werts und das Registrieren der Ansicht in der Anzeigenansichtsklasse sollte für jedes Asset wiederholt werden, das vom nativen Anzeigenobjekt in der App bereitgestellt wird.
Klicks verarbeiten
Implementieren Sie keine benutzerdefinierten Klick-Handler für Ansichten über oder innerhalb der nativen Anzeigenansicht. Wenn Sie Klickereignisse selbst beobachten möchten, verwenden Sie den Anzeigen-Listener.
Klicks auf die Anzeigenaufruf-Assets werden vom SDK verarbeitet, sofern Sie die Asset-Ansichten wie im vorherigen Abschnitt beschrieben korrekt ausfüllen und registrieren.
Im folgenden Beispiel wird ein Anzeigen-Listener verwendet, um Klickereignisse zu beobachten:
Java
AdLoader adLoader = new AdLoader.Builder(context, "/6499/example/native") ... .withAdListener(new AdListener() { @Override public void onAdFailedToLoad(LoadAdError adError) { // Handle the failure by logging, altering the UI, and so on. } @Override public void onAdClicked() { // Log the click event or other custom behavior. } }) .build();
Kotlin
val adLoader = AdLoader.Builder(this, "/6499/example/native") ... .withAdListener(object : AdListener() { override fun onAdFailedToLoad(adError: LoadAdError) { // Handle the failure by logging, altering the UI, and so on. } }) .build()
MediaView registrieren
Wenn Sie in das Layout der nativen Anzeige ein Hauptbild-Asset einbinden möchten, müssen Sie das Asset
MediaView
anstelle des AssetsImageView
verwenden.Das
MediaView
ist ein speziellesView
-Element, mit dem das Haupt-Media-Asset (Video oder Bild) angezeigt wird.MediaView
kann in einem XML-Layout definiert oder dynamisch erstellt werden. Sie sollte wie jede andere Asset-Ansicht innerhalb der Ansichtshierarchie einesNativeAdView
platziert werden. Anwendungen, die einMediaView
verwenden, müssen diesen bei derNativeAdView
registrieren:Java
MediaView mediaView = adView.findViewById(R.id.ad_media); adView.setMediaView(mediaView);
Kotlin
adView.mediaView = adView.findViewById<MediaView>(R.id.ad_media)
Wie bei allen Asset-Ansichten muss der Inhalt der Medienansicht dargestellt werden. Dazu werden mit der Methode
getMediaContent()
Medieninhalte abgerufen, die an eineMediaView
übergeben werden können. Hier sehen Sie ein Code-Snippet, das den Medieninhalt für die Medienansicht festlegt:Java
mediaView.setMediaContent(nativeAd.getMediaContent());
Kotlin
mediaView.mediaContent = nativeAd.mediaContent
ImageScaleType
Die Klasse
MediaView
hat beim Anzeigen von Bildern das AttributImageScaleType
. Wenn Sie die Skalierung eines Bildes inMediaView
ändern möchten, legen Sie mit der MethodesetImageScaleType()
vonMediaView
die entsprechendeImageView.ScaleType
fest:Java
mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);
Kotlin
mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP
MediaContent
Die Klasse
MediaContent
enthält die Daten, die sich auf den Medieninhalt der nativen Anzeige beziehen, der mithilfe der KlasseMediaView
angezeigt wird. Wenn das AttributMediaView
mediaContent
mit einerMediaContent
-Instanz festgelegt ist:Wenn ein Video-Asset verfügbar ist, wird es gepuffert und beginnt mit der Wiedergabe im
MediaView
. Wenn Sie wissen möchten, ob ein Video-Asset verfügbar ist, sehen Sie sichhasVideoContent()
an.Wenn die Anzeige kein Video-Asset enthält, wird das
mainImage
-Asset heruntergeladen und stattdessen innerhalb vonMediaView
platziert.
Standardmäßig ist
mainImage
das erste heruntergeladene Bild-Asset. WennsetReturnUrlsForImageAssets(true)
verwendet wird, hatmainImage
den Wertnull
und Sie müssen das AttributmainImage
auf das manuell heruntergeladene Bild festlegen. Dieses Bild wird nur verwendet, wenn kein Video-Asset verfügbar ist.Objekt der nativen Anzeige registrieren
In diesem letzten Schritt wird das native Anzeigenobjekt bei der Ansicht registriert, die für die Auslieferung verantwortlich ist:
Java
adView.setNativeAd(ad);
Kotlin
adView.setNativeAd(ad)
Anzeige löschen
Wenn Ihre native Anzeige nicht mehr ausgeliefert ist, sollten Sie sie vernichten, damit die Anzeige ordnungsgemäß automatisch bereinigt wird.
Java
nativeAd.destroy();
.inflate(R.layout.ad_layout_file, parent);
Kotlin
nativeAd.destroy()
Nativen Anzeigencode testen
Direkt verkaufte Anzeigen
Wenn Sie testen möchten, wie direkt verkaufte native Anzeigen aussehen, können Sie diese Ad Manager-Anzeigenblock-ID verwenden:
/6499/example/native
Es ist so konfiguriert, dass Beispielanzeigen für App-Installationen 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
Der Ad Exchange-Backfill ist derzeit auf eine ausgewählte Gruppe von Publishern beschränkt. Mit diesem Ad Manager-Anzeigenblock können Sie das Verhalten nativer Backfill-Anzeigen testen:
/6499/example/native-backfill
Hier werden Beispiele für App-Installations- und Contentanzeigen mit dem Datenschutzinfo-Overlay ausgeliefert.
Denken Sie daran, Ihren Code vor der Auslieferung so zu aktualisieren, dass er auf die tatsächlichen Anzeigenblock- und Vorlagen-IDs verweist.
Beispiele auf GitHub
Beispiel für die vollständige Implementierung nativer Anzeigen:
Weitere Informationen
Sehen Sie sich die folgenden Themen an: