Zaawansowana reklama natywna

Wyświetlanie reklamy natywnej

Po załadowaniu reklamy natywnej pakiet SDK do reklam mobilnych Google wywołuje odbiornik z odpowiednim formatem reklamy. Twoja aplikacja jest wtedy odpowiedzialna za wyświetlenie reklamy, ale nie musi robić tego od razu. Aby ułatwić wyświetlanie formatów reklam zdefiniowanych przez system, pakiet SDK udostępnia przydatne zasoby, opisane poniżej.

NativeAdView zajęcia

W przypadku formatu NativeAd istnieje odpowiednia klasa NativeAdView. Ta klasa to ViewGroup, której wydawcy powinni używać jako głównej klasy dla NativeAd. O pojedyncza wartość NativeAdView odpowiada jednej reklamie natywnej. Każdy widok służący do wyświetlenia komponentów reklamy (ImageView, który zawiera np. zasób zrzutu ekranu) powinien być elementem podrzędnym tagu NativeAdView obiektu.

Hierarchia widoków reklamy natywnej, która używa komponentu LinearLayout do wyświetlania widoków komponentu, 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>
         <!--Add remaining assets such as the image and media view.-->
    </LinearLayout>
</com.google.android.gms.ads.nativead.NativeAdView>

Oto przykład, w którym tworzona jest kolumna NativeAdView i następnie wypełniana wartościami z kolumny NativeAd:

Java

AdLoader.Builder builder = new AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110")
    .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, "ca-app-pub-3940256099942544/2247696110")
    .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)
    }

Pamiętaj, że wszystkie komponenty danej reklamy natywnej powinny być renderowane w komponencie Układ NativeAdView. Pakiet SDK do reklam mobilnych Google próbuje zarejestrować ostrzeżenie, gdy komponenty natywne są renderowane poza układem wyświetlania reklamy natywnej.

Klasy widoku reklamy udostępniają też metody służące do rejestrowania widoku używanego w przypadku każdego zasobu oraz jedną metodę do rejestrowania samego obiektu NativeAd. Rejestrowanie widoków w ten sposób pozwala pakietowi SDK automatycznie wykonywać takie zadania jak:

  • Rejestrowanie kliknięć
  • Rejestrowanie wyświetleń, gdy na ekranie jest widoczny pierwszy piksel
  • Wyświetlanie nakładki AdChoices

Nakładka Informacja

Pakiet SDK dodaje nakładkę AdChoices do każdego widoku reklamy. W preferowanym rogu widoku reklamy natywnej pozostaw miejsce na automatycznie wstawiane logo „Informacja”. Ponadto jest to aby była ona dobrze widoczna, wybierz więc kolory tła odpowiednie obrazy. Więcej informacji o wyglądzie i funkcjach nakładki znajdziesz w opisach pól reklam natywnych.

Informacja o reklamie

Musisz wyświetlić informacje o reklamie, aby wskazać, że wyświetlenie jest reklamą. Więcej informacji znajdziesz w wytycznych do zasad.

Przykładowy kod

Aby wyświetlić reklamę natywną:

  1. Utwórz instancję klasy NativeAdView.
  2. W przypadku każdego komponentu reklamy, który ma się wyświetlać:

    1. Wypełnij widok zasobów komponentem w obiekcie reklamy.
    2. Zarejestruj widok zasobu w klasie NativeAdView.
  3. Zarejestruj MediaView jeśli układ reklamy natywnej zawiera duży zasób multimedialny.

  4. Zarejestruj obiekt reklamy w klasie NativeAdView.

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

Oto poszczególne zadania:

  1. Powiększanie 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 rozszerza układ XML, który zawiera widoki do wyświetlania reklamę, a następnie znajdź odwołanie do pliku NativeAdView. Pamiętaj, że możesz też użyć istniejącego elementu NativeAdView, jeśli jest on obecny w Twoim fragmencie lub aktywności, a nawet utworzyć instancję dynamicznie bez użycia pliku układu.

  2. Wypełnianie i rejestrowanie widoków komponentów

    Ten przykładowy kod lokalizuje widok służący do wyświetlania nagłówka, ustawia jego tekst używając zasobu tekstowego dostarczonego przez obiekt reklamy i rejestruje go w funkcji NativeAdView obiekt:

    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 znajdowania widoku, ustawiania jego wartości i rejestrowania go w klasie widoku reklamy należy powtórzyć w przypadku każdego komponentu dostarczonego przez obiekt reklamy natywnej, który ma być wyświetlany przez aplikację.

  3. Obsługa kliknięć

    Nie implementuj żadnych niestandardowych metod obsługi kliknięć w żadnym widoku, który obejmuje lub zawiera widok reklamy natywnej. Kliknięcia komponentów widoku reklamy są obsługiwane przez pakiet SDK, o ile prawidłowo wypełnisz i zarejestrujesz widoki komponentów zgodnie z opisem w poprzedniej sekcji.

    Aby monitorować kliknięcia, zaimplementuj wywołanie zwrotne kliknięcia z pakietu SDK do reklam mobilnych Google:

    Java

    AdLoader adLoader = new AdLoader.Builder(context, "ca-app-pub-3940256099942544/2247696110")
        // ...
        .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, "ca-app-pub-3940256099942544/2247696110")
        // ...
        .withAdListener(object : AdListener() {
            override fun onAdFailedToLoad(adError: LoadAdError) {
                // Handle the failure.
            }
            override fun onAdClicked() {
                // Log the click event or other custom behavior.
            }
        })
        .build()
    
  4. Rejestrowanie obiektu MediaView

    Musisz użyć MediaView zamiast ImageView jeśli chcesz uwzględnić główny zasób graficzny w układzie reklamy natywnej reklama.

    MediaView to specjalny View, który wyświetla główny komponent multimedialny (film lub obraz).

    MediaView można zdefiniować w układzie XML lub utworzyć dynamicznie. Należy go umieścić w hierarchii widoku NativeAdView, tak jak każdy inny widok zasobu. Aplikacje używające pola MediaView muszą być zarejestrowane w NativeAdView:

    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

    Klasa MediaView ma właściwość ImageScaleType, gdy wyświetla obrazy. Jeśli chcesz zmienić sposób skalowania obrazu w MediaView, ustaw odpowiednią wartość ImageView.ScaleType za pomocą metody setImageScaleType() elementu MediaView:

    Java

    mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);
    

    Kotlin

    mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP
    

    MediaContent

    Klasa MediaContent zawiera dane dotyczące multimediów reklamy natywnej, które są wyświetlane za pomocą klasy MediaView. Gdy Właściwość mediaContent MediaView jest skonfigurowana z wystąpieniem MediaContent:

    • Jeśli zasób wideo jest dostępny, jest buforowany i rozpoczyna się odtwarzanie w ramach MediaView. Aby sprawdzić, czy zasób wideo jest dostępny, sprawdź hasVideoContent().

    • Jeśli reklama nie zawiera komponentu wideo, komponent mainImage jest pobierany i umieszczany w komponencie MediaView.

    Domyślnie jako pierwszy pobrany komponent z obrazem jest mainImage. Jeśli używasz atrybutu setReturnUrlsForImageAssets(true), a wartość atrybutu mainImage to null, musisz ustawić właściwość mainImage na ręcznie pobrany obraz. Pamiętaj, że to zdjęcie będzie używane tylko wtedy, gdy nie będzie dostępnego komponentu wideo.

  5. Zarejestruj obiekt reklamy natywnej

    W tym ostatnim kroku rejestrujesz obiekt reklamy natywnej w widoku odpowiedzialnym za jego wyświetlanie.

    Java

    adView.setNativeAd(ad);
    

    Kotlin

    adView.setNativeAd(ad)
    

Zniszcz reklamę

Po zakończeniu wyświetlania reklamy natywnej należy ją zniszczyć, aby została prawidłowo zebrana przez garbage collectora.

Java

nativeAd.destroy();

Kotlin

nativeAd.destroy()

Przykłady w GitHub

Przykład kompletnej implementacji reklam natywnych:

Java Kotlin

Dalsze kroki

Zapoznaj się z tymi tematami: