Ta strona została przetłumaczona przez Cloud Translation API.

Zaawansowane reklamy natywne

Wyświetl reklamę natywną

Po wczytaniu reklamy natywnej pakiet SDK do reklam mobilnych Google wywołuje odbiornik odpowiedniego formatu reklamy. To Twoja aplikacja odpowiada za wyświetlenie reklamy, choć nie musi to robić od razu. Aby ułatwić wyświetlanie formatów reklam zdefiniowanych przez system, pakiet SDK udostępnia przydatne zasoby, które opisaliśmy poniżej.

`NativeAdView` zajęcia

Dla formatu NativeAd istnieje odpowiadająca jej klasa NativeAdView. Jest to klasa ViewGroup, której wydawcy powinni używać jako katalogu głównego NativeAd. Pojedynczy element NativeAdView odpowiada jednej reklamie natywnej. Widok służący do wyświetlania zasobów reklamy (np. element ImageView, który wyświetla zasób zrzutu ekranu) powinien być elementem podrzędnym obiektu NativeAdView.

Hierarchia widoków danych reklamy natywnej, która korzysta z elementu LinearLayout do wyświetlania widoków zasobów, może wyglądać tak:

<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>

Oto przykład, w którym można utworzyć kolumnę NativeAdView i dodać do niej 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)
    }

Pamiętaj, że wszystkie zasoby danej reklamy natywnej powinny być renderowane w układzie NativeAdView. Pakiet SDK do reklam mobilnych Google próbuje zarejestrować ostrzeżenie, gdy zasoby natywne są renderowane poza układem widoku reklamy natywnej.

Klasy wyświetleń reklamy udostępniają też metody rejestracji wyświetleń dla poszczególnych zasobów oraz metody rejestrowania samego obiektu NativeAd. Ten sposób rejestrowania widoków pozwala SDK automatycznie obsługiwać takie zadania jak:

Rejestrowanie kliknięć
Rejestruje wyświetlenia, gdy na ekranie widoczny jest pierwszy piksel
Wyświetlanie nakładki Informacja w przypadku zapasowych kreacji natywnych – obecnie tylko dla wybranej grupy wydawców

Nakładka Informacja

Nakładka Informacja jest dodawana przez pakiet SDK jako wyświetlenie reklamy w przypadku zwrócenia reklamy zapasowej. Jeśli aplikacja korzysta z reklam zapasowych reklam natywnych, zostaw miejsce w preferowanym rogu widoku reklamy natywnej na automatycznie wstawiane logo Informacja. Zadbaj też, aby nakładka Informacja była dobrze widoczna, więc wybierz odpowiednie kolory tła i obrazy. Więcej informacji o wyglądzie i funkcji nakładki znajdziesz we wskazówkach dotyczących implementacji automatycznych reklam natywnych.

Atrybucja automatycznych reklam natywnych

W przypadku wyświetlania automatycznych reklam natywnych musisz podać atrybucję reklamy, aby wskazać, że wyświetlenie jest związane z reklamą. Więcej informacji znajdziesz w naszych zasadach.

Przykładowy kod

Aby wyświetlić reklamę natywną:

Utwórz instancję klasy NativeAdView.
W przypadku każdego komponentu reklamy, który ma być wyświetlany:
1. Wypełnij widok komponentu tym komponentem z obiektu reklamy.
2. Zarejestruj widok zasobów w klasie ViewGroup.
Zarejestruj MediaView, jeśli układ reklamy natywnej zawiera duży zasób multimedialny.
Zarejestruj obiekt reklamy za pomocą klasy ViewGroup.

Oto przykładowa funkcja, która wyświetla NativeAd:

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

Oto poszczególne zadania:

Wzbogacanie układu

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

Ten kod nadmiaru układ XML, który zawiera widoki do wyświetlenia reklamy natywnej, a następnie lokalizuje odniesienie do elementu NativeAdView. Pamiętaj, że możesz też ponownie użyć istniejącej klasy NativeAdView, jeśli występuje ona we fragmencie lub aktywności, albo nawet utworzyć instancję dynamicznie bez użycia pliku układu.

Wypełnianie i rejestrowanie wyświetleń zasobów

Ten przykładowy kod znajduje widok używany do wyświetlania nagłówka, ustawia jego tekst za pomocą zasobu tekstowego dostarczonego przez obiekt reklamy i rejestruje go w obiekcie 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
```
Proces lokalizowania widoku, ustawiania jego wartości i rejestrowania go w klasie widoku reklamy należy powtórzyć w przypadku każdego zasobu dostarczonych przez obiekt reklamy natywnej, który wyświetla aplikacja.

Obsługa kliknięć

Nie wdrażaj żadnych niestandardowych modułów obsługi kliknięć w żadnych widokach w obrębie widoku reklamy natywnej lub w jego obrębie. Aby samodzielnie obserwować zdarzenia kliknięć, skorzystaj z odbiornika reklam.

Pakiet SDK obsługuje kliknięcia komponentów widoku reklamy, o ile prawidłowo wypełnisz i zarejestrujesz wyświetlenia komponentu, jak omówiliśmy w poprzedniej sekcji.

Oto przykład użycia odbiornika reklam do obserwowania zdarzeń kliknięcia:

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()

Rejestrowanie obiektu MediaView

Jeśli w układzie reklamy natywnej chcesz uwzględnić główny zasób graficzny, musisz użyć MediaView zasobu zamiast ImageView.

MediaView to specjalny element View, który służy do wyświetlania głównego zasobu multimedialnego: filmu lub obrazu.

MediaView może być zdefiniowany w układzie XML lub skonstruowany dynamicznie. Powinien znajdować się w hierarchii widoków elementu NativeAdView, tak jak każdy inny widok zasobów. Aplikacje korzystające z elementu MediaView muszą zarejestrować go w NativeAdView:
Java
```
MediaView mediaView = adView.findViewById(R.id.ad_media);
adView.setMediaView(mediaView);
```
Kotlin
```
adView.mediaView = adView.findViewById<MediaView>(R.id.ad_media)
```
Tak jak w przypadku wszystkich wyświetleń zasobów widok mediów musi zawierać uzupełnioną treść. Służy do tego metoda getMediaContent(), która pozwala pobierać treści multimedialne, które można przekazać do MediaView. Oto fragment kodu określający zawartość multimediów w widoku multimediów:
Java
```
mediaView.setMediaContent(nativeAd.getMediaContent());
```
Kotlin
```
mediaView.mediaContent = nativeAd.mediaContent
```
ImageScaleType

Klasa MediaView ma właściwość ImageScaleType do wyświetlania obrazów. Jeśli chcesz zmienić sposób skalowania obrazu w komponencie MediaView, ustaw odpowiednią wartość ImageView.ScaleType za pomocą metody setImageScaleType() obiektu MediaView:
Java
```
mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);
```
Kotlin
```
mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP
```
MediaContent

Klasa MediaContent zawiera dane związane z zawartością multimedialną reklamy natywnej, które są wyświetlane za pomocą klasy MediaView. Gdy właściwość MediaView mediaContent jest ustawiona na wystąpienie MediaContent:
- Jeśli zasób wideo jest dostępny, jest on buforowany i odtwarzany w elemencie MediaView. Aby sprawdzić, czy komponent wideo jest dostępny, sprawdź hasVideoContent().
- Jeśli reklama nie zawiera komponentu wideo, zasób mainImage jest pobierany i umieszczany w elemencie MediaView.
Domyślnie pierwszym pobranym komponentem z obrazem jest mainImage. Jeśli używasz setReturnUrlsForImageAssets(true), mainImage to null. Jako właściwość mainImage musisz ustawić ręcznie pobrany obraz. Pamiętaj, że ten obraz będzie używany tylko wtedy, gdy nie będzie dostępny komponent wideo.
Rejestrowanie obiektu reklamy natywnej

Ostatni krok powoduje zarejestrowanie obiektu reklamy natywnej w widoku, który odpowiada za jego wyświetlenie:
Java
```
adView.setNativeAd(ad);
```
Kotlin
```
adView.setNativeAd(ad)
```

Zniszcz reklamę

Po zakończeniu wyświetlania reklamy natywnej musisz ją zniszczyć, aby prawidłowo zbierała śmieci.

Java

nativeAd.destroy();
        .inflate(R.layout.ad_layout_file, parent);

Kotlin

nativeAd.destroy()

Przetestuj kod reklamy natywnej

Reklamy sprzedawane bezpośrednio

Jeśli chcesz sprawdzić, jak działają reklamy natywne sprzedawane bezpośrednio, możesz użyć tego identyfikatora jednostki reklamowej Ad Managera:

/6499/example/native

Jest skonfigurowana tak, aby wyświetlać przykładowe reklamy promujące instalacje aplikacji i reklamy z treścią oraz niestandardowy format reklamy natywnej z tymi zasobami:

Nagłówek (text)
MainImage (obraz)
Podpis (tekst)

Identyfikator szablonu niestandardowego formatu reklamy natywnej to 10063170.

Natywne reklamy zapasowe

Reklamy zapasowe Ad Exchange są obecnie dostępne tylko dla wybranej grupy wydawców. Aby sprawdzić działanie natywnych reklam zapasowych, użyj tej jednostki reklamowej Ad Managera:

/6499/example/native-backfill

Wyświetla przykładowe reklamy promujące instalacje aplikacji i reklamy z treścią z nakładką Informacja.

Pamiętaj, aby przed opublikowaniem treści zaktualizować kod, aby odwoływał się do rzeczywistych identyfikatorów jednostek reklamowych i szablonów.

Przykłady w GitHubie

Przykład pełnej implementacji reklam natywnych:

Java Kotlin

Dalsze kroki

Przejrzyj te tematy:

Zaawansowane reklamy natywne

Wyświetl reklamę natywną

NativeAdView zajęcia

Java

Kotlin

Nakładka Informacja

Atrybucja automatycznych reklam natywnych

Przykładowy kod

Java

Kotlin

Java

Kotlin

Java

Kotlin

Java

Kotlin

Java

Kotlin

Java

Kotlin

ImageScaleType

Java

Kotlin

MediaContent

Java

Kotlin

Zniszcz reklamę

Java

Kotlin

Przetestuj kod reklamy natywnej

Reklamy sprzedawane bezpośrednio

Natywne reklamy zapasowe

Przykłady w GitHubie

Dalsze kroki

`NativeAdView` zajęcia