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 włączyć wyświetlanie 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
:
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 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 dla każdego zasobu oraz jedną do rejestrowania samego obiektu NativeAd
.
Rejestrowanie widoków w ten sposób umożliwia pakietowi SDK automatyczne wykonywanie zadań
Na przykład:
- Rejestrowanie kliknięć
- Rejestrowanie wyświetleń po pojawieniu się na ekranie pierwszego piksela
- Wyświetlanie nakładki Informacja na potrzeby zapasowych reklam natywnych kreacje – obecnie jest ona dostępna tylko dla wybranej grupy wydawców.
Nakładka Informacja
Pakiet SDK dodaje nakładkę Informacja jako wyświetlenie reklamy, gdy . Jeśli Twoja aplikacja korzysta z wypełniania reklam natywnych, w preferowanym rogu widoku reklamy natywnej pozostaw miejsce na automatycznie wstawiane logo AdChoices. Ponadto jest to ważne jest, aby była ona dobrze widoczna, więc wybierz tło kolorów i obrazów. Więcej informacji o wygląd i funkcjonalność, zapoznaj się z artykułem o implementacji automatycznych reklam natywnych wytycznych.
Atrybucja automatycznych reklam natywnych
Podczas wyświetlania reklam natywnych w ramach programowania reklamowego musisz wyświetlić oznaczenie reklamy, aby wskazać, że wyświetlana treść jest reklamą. Więcej informacji znajdziesz w naszych zasadach wytycznych.
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 zasobów komponentem w obiekcie reklamy.
- Zarejestruj widok zasobu w klasie
ViewGroup
.
- Zarejestruj
MediaView
jeśli układ reklamy natywnej zawiera duży zasób multimedialny. - Zarejestruj obiekt reklamy w klasie
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:
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 elementNativeAdView
, jeśli występuje on we fragmencie lub aktywności albo nawet dynamiczne tworzenie instancji bez użycia pliku układu.Wypełnianie i rejestrowanie wyświetleń 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
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.
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 użycia reklamy detektor, zdarzenia kliknięcia:
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()
Rejestrowanie obiektu MediaView
Musisz użyć
MediaView
zamiastImageView
jeśli chcesz uwzględnić główny zasób graficzny w układzie reklamy natywnej reklama.MediaView
to specjalny obiektView
przeznaczony do wyświetlania głównego zasobu multimedialnego, wideo lub graficzne.MediaView
można definiować w układzie XML lub tworzyć dynamicznie. it należy umieścić w hierarchii widoku elementuNativeAdView
, tak jak inny widok zasobów. Aplikacje korzystające z funkcjiMediaView
muszą zarejestrować ją w usługachNativeAdView
: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. Służy do tego funkcja
getMediaContent()
to metoda pobierania treści multimedialnych, które można przekazać doMediaView
. 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 wMediaView
, ustaw odpowiednieImageView.ScaleType
za pomocą funkcjisetImageScaleType()
metodaMediaView
: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ą klasyMediaView
. Gdy WłaściwośćmediaContent
MediaView
jest skonfigurowana z wystąpieniemMediaContent
:Jeśli zasób wideo jest dostępny, jest buforowany i rozpoczyna się odtwarzanie w ramach
MediaView
. Aby dowiedzieć się, czy dany komponent wideo jest dostępny,hasVideoContent()
Jeśli reklama nie zawiera komponentu wideo, komponent
mainImage
jest pobierany i umieszczany w komponencieMediaView
.
Domyślnie jako pierwszy pobrany komponent z obrazem jest
mainImage
. Jeśli Używana jest właściwośćsetReturnUrlsForImageAssets(true)
,mainImage
tonull
i musisz ustaw właściwośćmainImage
na obraz pobrany ręcznie. Pamiętaj, że to Obraz będzie używany tylko wtedy, gdy nie ma dostępnych zasobów wideo.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.
Java
nativeAd.destroy();
Kotlin
nativeAd.destroy()
Przetestuj kod reklamy natywnej
Reklamy sprzedawane bezpośrednio
Jeśli chcesz zobaczyć, jak działają reklamy natywne sprzedawane bezpośrednio, możesz utworzyć wykorzystanie tego identyfikatora jednostki reklamowej Ad Managera:
/21775744923/example/native
Jest skonfigurowany tak, aby wyświetlać przykładowe reklamy promujące instalacje aplikacji i reklamy z treścią, a także niestandardowy format reklamy natywnej z tymi zasobami:
- Nagłówek (tekst)
- Główny obraz (obraz)
- Podpis (tekst)
Identyfikator szablonu niestandardowego formatu reklamy natywnej to 10063170
.
Natywne reklamy zastępcze
Reklamy zapasowe Ad Exchange są obecnie dostępne tylko dla wybranej grupy wydawców. Do Aby przetestować działanie natywnych reklam zapasowych, użyj tej jednostki reklamowej Ad Managera:
/21775744923/example/native-backfill
Wyświetla przykładowe reklamy promujące instalacje aplikacji i reklamy z treścią, które zawierają etykietę Informacja nakładkę.
Pamiętaj o zaktualizowaniu kodu, by odwoływał się do rzeczywistych identyfikatorów jednostki reklamowej i szablonu. przed transmisją na żywo.
Przykłady w GitHubie
Przykład kompletnej implementacji reklam natywnych:
Dalsze kroki
Zapoznaj się z tymi tematami: