Wyświetlanie reklamy natywnej
Gdy wczytuje się reklama natywna, pakiet SDK do reklam mobilnych Google wywołuje odpowiedni format 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.
Zajęcia: NativeAdView
W przypadku formatu NativeAd
istnieje odpowiednia klasa NativeAdView
. Ta klasa to ViewGroup
, której wydawcy powinni używać jako głównej klasy dla NativeAd
. Pojedynczy NativeAdView
odpowiada jednej reklamie natywnej.
Każdy widok używany do wyświetlania komponentów reklamy (np. ImageView
, który wyświetla komponent zrzutu ekranu) powinien być elementem podrzędnym obiektu NativeAdView
.
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 ramach układu 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”. Ważne jest też, aby nakładka Informacja była dobrze widoczna, dlatego należy odpowiednio dobrać kolory tła i obrazy. Więcej informacji o wyglądzie i funkcjach nakładki znajdziesz w opisach pól reklam natywnych.
Atrybucja reklam
Musisz wyświetlić oznaczenie reklamy, aby wskazać, że wyświetlenie jest reklamą. Więcej informacji znajdziesz w wytycznych dotyczących zasad.
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:
- Wypełnij widok komponentu komponentem w obiekcie reklamy.
- Zarejestruj widok zasobu w klasie
NativeAdView
.
Zarejestruj
MediaView
, jeśli układ reklamy natywnej zawiera duży zasób multimedialny.Zarejestruj obiekt reklamy w klasie
NativeAdView
.
Oto przykładowa funkcja, która wyświetla wartość 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:
Rozwijanie 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 napełnia układ XML, który zawiera widoki do wyświetlania reklamy natywnej, a następnie wyszukuje odwołanie do
NativeAdView
. Pamiętaj, że możesz też użyć istniejącego elementuNativeAdView
, jeśli jest on obecny w Twoim fragmencie lub aktywności, a nawet utworzyć instancję dynamicznie bez użycia pliku układu.Wypełnianie i rejestrowanie widoków zasobów
Ten przykładowy kod wyszukuje widok używany do wyświetlania nagłówka, ustawia jego tekst za pomocą komponentu ciągu znaków 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 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ę.
Obsługa kliknięć
Nie implementuj żadnych niestandardowych metod obsługi kliknięć w żadnym widoku nakładającym się na widok reklamy natywnej lub w jego obrębie. 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 wykrywać kliknięcia, zaimplementuj funkcję zwracaną po kliknięciu w pakiecie 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()
Zarejestruj obiekt MediaView
Jeśli w układzie reklamy natywnej chcesz uwzględnić główny zasób obrazu, zamiast zasobu
ImageView
musisz użyć zasobuMediaView
.MediaView
to specjalnyView
, 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 widokuNativeAdView
, tak jak każdy inny widok zasobu. Aplikacje korzystające z funkcjiMediaView
muszą zarejestrować ją w usługachNativeAdView
: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 wMediaView
, ustaw odpowiednią wartośćImageView.ScaleType
za pomocą metodysetImageScaleType()
elementuMediaView
: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ą klasyMediaView
. Gdy właściwośćMediaView
mediaContent
jest ustawiona w przypadku instancjiMediaContent
: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 komponencieMediaView
.
Domyślnie
mainImage
to pierwszy pobrany komponent z obrazem. Jeśli używasz zasadysetReturnUrlsForImageAssets(true)
, wartośćmainImage
tonull
, a właściwośćmainImage
musisz ustawić 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.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 pełnej implementacji reklam natywnych:
Dalsze kroki
Zapoznaj się z tymi tematami: