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

Dla formatu NativeAd istnieje odpowiedni NativeAdView. zajęcia. Te zajęcia są ViewGroup który wydawcy powinni używać jako źródła dla obiektu 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 korzystającej z tagu LinearLayout wyświetlenie jego 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, który tworzy NativeAdView oraz wpisuje w nim NativeAd:

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

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 komponenty danej reklamy natywnej powinny być renderowane w komponencie Układ: 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świetlenia reklamy udostępniają też metody rejestrowania wyświetlenia używanego do poszczególnych zasobów, a drugi do zarejestrowania samego obiektu NativeAd. Rejestrowanie widoków w ten sposób pozwala pakietowi SDK automatycznie wykonywać takie zadania jak:

• Rejestrowanie kliknięć
• Rejestrowanie wyświetleń po pojawieniu się na ekranie pierwszego piksela
• Wyświetlanie nakładki Informacja

Nakładka Informacja

Pakiet SDK dodaje nakładkę AdChoices do każdego widoku reklamy. Pozostaw miejsce w preferowany róg wyświetlenie reklamy natywnej z automatycznie wstawianym logo Informacja. Ponadto jest to aby była ona dobrze widoczna, wybierz więc kolory tła odpowiednie obrazy. Więcej informacji na temat wyglądu nakładki funkcji, patrz pole Reklamy natywne .

Atrybucja reklam

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. Dla każdego komponentu reklamy do wyświetlenia:
   1. Wypełnij widok zasobów komponentem w obiekcie reklamy.
   2. Zarejestruj widok zasobu w klasie ViewGroup.
3. Zarejestruj MediaView jeśli układ reklamy natywnej zawiera duży zasób multimedialny.
4. Zarejestruj obiekt reklamy w klasie ViewGroup.

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

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

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:

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ż ponownie wykorzystać istniejący element NativeAdView, jeśli występuje on we fragmencie lub aktywności albo nawet dynamiczne tworzenie instancji bez użycia pliku układu.

2. Wypełnianie i rejestrowanie wyświetleń zasobó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
   

   Ten proces lokalizowania widoku, ustawiania jego wartości i rejestrowania go w klasę wyświetlenia reklamy należy powtórzyć dla każdego zasobu przesłanego przez metodę obiekt reklamy natywnej, który będzie wyświetlany w aplikacji.

3. Obsługa kliknięć

   Nie stosuj żadnych niestandardowych modułów obsługi kliknięć w widokach ani w wyświetlenie reklamy natywnej. Aby samodzielnie obserwować zdarzenia kliknięcia, użyj reklamy detektor.

   Kliknięcia komponentów z wyświetleniem reklamy są obsługiwane przez pakiet SDK, o ile udało Ci się prawidłowo jak wypełniać i rejestrować wyświetlenia zasobów w sposób omówiony w poprzedniej sekcji.

   Oto przykład, w którym do obserwowania zdarzeń kliknięcia używamy adListenera:

   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, 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, "ca-app-pub-3940256099942544/2247696110")
       ...
       .withAdListener(object : AdListener() {
           override fun onAdFailedToLoad(adError: LoadAdError) {
               // Handle the failure by logging, altering the UI, and so on.
           }
       })
       .build()
   

4. Rejestrowanie obiektu MediaView

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

   MediaView to specjalny obiekt View przeznaczony do wyświetlania głównego zasobu multimedialnego, wideo lub graficzne.

   MediaView można zdefiniować w układzie XML lub utworzyć dynamicznie. it należy umieścić w hierarchii widoku elementu NativeAdView, tak jak inny widok zasobów. Aplikacje używające pola MediaView muszą być zarejestrowane 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 multimediów musi zawierać treści. Aby to zrobić, użyj metody getMediaContent(), która umożliwia pobranie treści multimedialnych, które można przekazać do tagu MediaView. Oto fragment kodu, który ustawia treści multimedialne widok:

   Java

   mediaView.setMediaContent(nativeAd.getMediaContent());
   

   Kotlin

   mediaView.mediaContent = nativeAd.mediaContent
   

   ImageScaleType

   Klasa MediaView ma podczas wyświetlania właściwość ImageScaleType obrazów. Jeśli chcesz zmienić sposób skalowania obrazu w MediaView, ustaw odpowiednie ImageView.ScaleType za pomocą funkcji setImageScaleType() metoda MediaView:

   Java

   mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);
   

   Kotlin

   mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP
   

   MediaContent

   Klasa MediaContent zawiera dane związane z treściami multimedialnymi reklama natywna, która jest wyświetlana za pomocą klasy MediaView. Gdy właściwość MediaView mediaContent jest ustawiona w przypadku instancji 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, jest pobierany komponent mainImage i umieszczane w elemencie 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 Obraz będzie używany tylko wtedy, gdy nie ma dostępnych zasobów wideo.

5. Rejestrowanie obiektu reklamy natywnej

   Ten ostatni krok powoduje zarejestrowanie obiektu reklamy natywnej z widokiem, który odpowiedzialny za jego wyświetlenie:

   Java

   adView.setNativeAd(ad);
   

   Kotlin

   adView.setNativeAd(ad)
   

Zniszcz reklamę

Po zakończeniu wyświetlania reklamy natywnej należy ją zniszczyć, aby czy śmieci są pobierane prawidłowo.

nativeAd.destroy();

nativeAd.destroy()

Przykłady w GitHubie

Przykład kompletnej implementacji reklam natywnych:

Java Kotlin

Dalsze kroki

Zapoznaj się z tymi tematami:

• Prywatność użytkowników
• Zoptymalizowane inicjowanie i wczytywanie reklam SDK (wersja beta)