Erweiterte native Anzeigen

Native Anzeige ausliefern

Wenn eine native Anzeige geladen wird, ruft das Google Mobile Ads SDK den Listener für den das entsprechende Anzeigenformat. Ihre App ist dann für die Auslieferung der Anzeige verantwortlich, aber nicht unbedingt sofort. Um die Darstellung von systemdefinierte Anzeigenformate vereinfacht, bietet das SDK einige nützliche Ressourcen, wie beschrieben.

Klasse NativeAdView

Für das NativeAd-Format gibt es den entsprechenden NativeAdView . Dieser Kurs ist ein ViewGroup das Publisher als Stamm für NativeAd verwenden sollten. A einzelne NativeAdView entspricht einer einzelnen nativen Anzeige. Jede Ansicht, die zum Einblenden der Assets dieser Anzeige verwendet wird (die ImageView, in der die Screenshot-Asset) sollte ein untergeordnetes Element von NativeAdView sein. -Objekt enthält.

Die Ansichtshierarchie für eine native Anzeige, für die ein LinearLayout Asset-Ansichten anzuzeigen, könnte wie folgt 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>

Hier ist ein Beispiel, mit dem ein NativeAdView und füllt es mit einem NativeAd:

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 müssen im NativeAdView-Layout. Das Google Mobile Ads SDK protokolliert eine Warnung, wenn native Assets werden außerhalb des Ansichtslayouts einer nativen Anzeige gerendert.

Die Anzeigenansichtsklassen bieten auch Methoden zum Registrieren der Ansicht, die für jedes einzelne Asset und eine zum Registrieren des NativeAd-Objekts selbst. Wenn die Ansichten auf diese Weise registriert werden, kann das SDK Aufgaben automatisch verarbeiten. Beispiele:

  • Klicks werden erfasst
  • Impressionen erfassen, wenn das erste Pixel auf dem Bildschirm sichtbar ist
  • Datenschutzinfo-Overlay anzeigen für nativen Backfill Creatives – 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. Wenn Sie für Ihre App native Anzeigen-Backfill einsetzen, lassen Sie Platz in der bevorzugten Ecke native Anzeigenansicht für das automatisch eingefügte Datenschutzinfo-Logo. Außerdem ist es Es ist wichtig, dass das Datenschutzinfo-Overlay gut zu sehen ist. Wählen Sie daher einen Hintergrund aus. Farben und Bilder angemessen. Weitere Informationen zur Funktion Darstellung und Funktion finden Sie im Artikel zur Implementierung von programmatischen nativen Anzeigen .

Anzeigenkennzeichnung für programmatische native Anzeigen

Wenn Sie programmatische native Anzeigen ausliefern, müssen Sie eine Anzeigenkennzeichnung zeigen, dass es sich bei der Ansicht um Werbung handelt. Weitere Informationen finden Sie in unseren Richtlinien. .

Codebeispiel

So stellen Sie eine native Anzeige bereit:

  1. Erstellen Sie eine Instanz der Klasse NativeAdView.
  2. Für jedes anzuzeigende Anzeigen-Asset: <ph type="x-smartling-placeholder">
      </ph>
    1. Füllen Sie die Asset-Ansicht mit dem Asset im Anzeigenobjekt.
    2. Registrieren Sie die Assetansicht mit der Klasse ViewGroup.
  3. Registrieren Sie die MediaView Das Layout der nativen Anzeige umfasst ein großes Media-Asset.
  4. 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 sind die einzelnen Aufgaben:

  1. Layout vergrößern

    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
    

    Dieser Code bläht ein XML-Layout auf, das Ansichten zum Anzeigen einer nativen Anzeige und finden dann einen Verweis auf NativeAdView. Sie können auch Sie können eine vorhandene NativeAdView wiederverwenden, wenn sie in Ihrem Fragment oder Ihrer Aktivität vorhanden ist, oder eine Instanz dynamisch ohne Verwendung einer Layoutdatei erstellen.

  2. Asset-Ansichten ausfüllen und registrieren

    Mit diesem Beispielcode wird die Ansicht ermittelt, die zum Anzeigen der Überschrift verwendet wird, und legt den Text fest. unter Verwendung des vom Anzeigenobjekt bereitgestellten String-Assets und registriert es mit dem Objekt NativeAdView:

    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 Prozess des Suchens der Ansicht, Festlegen ihres Werts und Registrieren mit sollte die Anzeigenansichtsklasse für jedes der vom natives Anzeigenobjekt, das in der App zu sehen ist.

  3. Umgang mit Klicks

    Implementieren Sie keine benutzerdefinierten Klick-Handler bei Ansichten über oder innerhalb des Aufruf einer nativen Anzeige. Wenn Sie Klickereignisse selbst beobachten möchten, verwenden Sie die Anzeige Listener.

    Klicks auf die Anzeigenaufruf-Assets werden vom SDK verarbeitet, sofern Sie Asset-Ansichten erstellen und registrieren, wie im vorherigen Abschnitt beschrieben.

    In diesem Beispiel wird eine Anzeige Listener Click-Events:

    Java

    AdLoader adLoader = new AdLoader.Builder(context, "/21775744923/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, "/21775744923/example/native")
        ...
        .withAdListener(object : AdListener() {
            override fun onAdFailedToLoad(adError: LoadAdError) {
                // Handle the failure by logging, altering the UI, and so on.
            }
        })
        .build()
    
  4. MediaView registrieren

    Sie müssen das MediaView Asset anstelle des ImageView -Asset, wenn Sie ein Haupt-Bild-Asset in das Layout für Ihre native Anzeige.

    Das MediaView ist ein spezielles View-Element zum Anzeigen des primären Media-Assets, entweder ein Video oder ein Bild.

    MediaView kann in einem XML-Layout definiert oder dynamisch konstruiert werden. Es sollte innerhalb der Ansichtshierarchie eines NativeAdView platziert werden, andere Asset-Ansicht. Apps, die MediaView verwenden, müssen diese beim NativeAdView:

    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 Assetansichten muss auch bei der Mediaansicht der Inhalt dargestellt werden. Dies erfolgt mithilfe der getMediaContent() Medieninhalte abzurufen, die an einen MediaView Hier sehen Sie ein Code-Snippet, mit dem die Medieninhalte für die Medien festgelegt werden. Ansicht:

    Java

    mediaView.setMediaContent(nativeAd.getMediaContent());
    

    Kotlin

    mediaView.mediaContent = nativeAd.mediaContent
    

    ImageScaleType

    Die MediaView-Klasse hat beim Anzeigen ein ImageScaleType-Attribut. Bilder. Wenn Sie ändern möchten, wie ein Bild im MediaView skaliert wird, legen Sie Folgendes fest: Den entsprechenden ImageView.ScaleType unter Verwendung von setImageScaleType() von MediaView:

    Java

    mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);
    

    Kotlin

    mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP
    

    MediaContent

    Die Klasse MediaContent enthält die Daten zu den Medieninhalten der native Anzeige, die mithilfe der Klasse MediaView ausgeliefert wird. Wenn der Parameter Das Attribut MediaView mediaContent wird mit einer MediaContent-Instanz festgelegt:

    • Ist ein Video-Asset verfügbar, wird es zwischengespeichert und im MediaView Sie können feststellen, ob ein Video-Asset verfügbar ist, indem Sie hasVideoContent()

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

    Standardmäßig ist mainImage das erste heruntergeladene Bild-Asset. Wenn setReturnUrlsForImageAssets(true) wird verwendet, mainImage ist null und Sie müssen Legen Sie für die Eigenschaft mainImage das manuell heruntergeladene Bild fest. Beachten Sie, dass dies Bild wird nur verwendet, wenn kein Video-Asset verfügbar ist.

  5. Natives Anzeigenobjekt registrieren

    In diesem letzten Schritt wird das native Anzeigenobjekt mit der Ansicht registriert, für die Anzeige verantwortlich:

    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 die Anzeige ordnungsgemäß bereinigt wird.

Java

nativeAd.destroy();

Kotlin

nativeAd.destroy()

Nativen Anzeigencode testen

Direkt verkaufte Anzeigen

Wenn Sie ausprobieren möchten, wie direkt verkaufte native Anzeigen sind, Verwendung dieser Ad Manager-Anzeigenblock-ID:

/21775744923/example/native

Dieses Tag ist so konfiguriert, dass App-Installations- und Contentanzeigen als Beispiel benutzerdefiniertes natives Anzeigenformat mit den folgenden Assets:

  • 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 nur für eine ausgewählte Gruppe von Publishern verfügbar. Bis Testen Sie das Verhalten nativer Backfill-Anzeigen, verwenden Sie diesen Ad Manager-Anzeigenblock:

/21775744923/example/native-backfill

Damit werden Beispielanzeigen zur App-Installation und Contentanzeigen ausgeliefert, die das Datenschutzinfo-Symbol enthalten. -Overlay.

Denken Sie daran, den Code so zu aktualisieren, dass er auf die tatsächlichen Anzeigenblock- und Vorlagen-IDs verweist. bevor sie live gehen.

Beispiele auf GitHub

Beispiel für vollständige Implementierung nativer Anzeigen:

Java Kotlin

Nächste Schritte

Erkunden Sie die folgenden Themen: