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

Szablony natywne

Za pomocą reklam natywnych możesz dostosowywać reklamy, aby były bardziej atrakcyjne dla użytkowników. Większa wygoda użytkowników może zwiększyć ich zaangażowanie i ogólny zysk.

Aby w pełni wykorzystać możliwości reklam natywnych, musisz dostosować układy reklam tak, by wyglądały jak naturalne rozszerzenie aplikacji. Na początek stworzyliśmy szablony natywne.

Szablony natywne to widoki z pełnym zakresem kodu dla reklam natywnych, które umożliwiają szybką implementację i łatwą modyfikację. Dzięki szablonom natywnym możesz wdrożyć pierwszą reklamę natywną w ciągu kilku minut i szybko dostosować jej wygląd i styl bez konieczności pisania kodu. Możesz umieścić te szablony w dowolnym miejscu, np. w widoku RecyclerView w kanale wiadomości, w oknie lub w dowolnym miejscu w aplikacji.

Nasze szablony natywne są dostarczane jako moduł Android Studio, dzięki czemu można je łatwo dodawać do projektu i używać w dowolny sposób.

Rozmiary szablonów

Dostępne są 2 szablony: mały i średni. Oba używają klasy TemplateView i obie mają stały współczynnik proporcji. Będą skalowane tak, by wypełnić szerokość widoku nadrzędnego.

Mały szablon

@layout/gnt_small_template_view

Mały szablon doskonale sprawdza się w przypadku widoków danych recyklingowych i gdy potrzebujesz długiego prostokątnego widoku reklamy. Możesz użyć go na przykład w przypadku reklam In-Feed.

Średni szablon

@layout/gnt_medium_template_view

Szablon medium jest przeznaczony do wyświetlania na poziomie od pół do 3 kwartałów, ale może też być używany w plikach danych. Jest odpowiedni w przypadku stron docelowych lub stron powitalnych.

Możesz eksperymentować z miejscami docelowymi. Oczywiście możesz też zmienić kod źródłowy i pliki XML na swoje potrzeby.

Instalowanie szablonów reklam natywnych

Aby zainstalować szablony natywne, po prostu pobierz plik ZIP (za pomocą opcji Klonuj lub pobierz w GitHubie) i zaimportuj moduł do istniejącego projektu Android Studio.

Wybierz Plik > Nowy > Importuj moduł.
Wybierz folder nativetemplates.

Dodaj ten wiersz do pliku build.gradle na poziomie aplikacji:

dependencies {
        ...
        implementation project(':nativetemplates')
        ...
}

Korzystanie z szablonów reklam natywnych

Szablonu możesz użyć w dowolnym pliku XML układu, tak jak w przypadku każdej innej grupy widoków.

dodaj szablon do układu

Korzystanie z szablonów składa się z 2 etapów:

Najpierw musisz uwzględnić szablon jako część układu.

<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity"
   tools:showIn="@layout/activity_main" >

<!--  This is your template view -->
<com.google.android.ads.nativetemplates.TemplateView
   android:id="@+id/my_template"
   <!-- this attribute determines which template is used. The other option is
    @layout/gnt_medium_template_view -->
   app:gnt_template_type="@layout/gnt_small_template_view"
   android:layout_width="match_parent"
   android:layout_height="match_parent" />

...
</LinearLayout>

Następnie musisz przypisać do szablonu reklamę natywną w trakcie wczytywania:

MobileAds.initialize(this);
AdLoader adLoader = new AdLoader.Builder(this, "/6499/example/native")
    .forNativeAd(new NativeAd.OnNativeAdLoadedListener() {
        @Override
        public void onNativeAdLoaded(NativeAd nativeAd) {
            NativeTemplateStyle styles = new
              NativeTemplateStyle.Builder().withMainBackgroundColor(background).build();
            TemplateView template = findViewById(R.id.my_template);
            template.setStyles(styles);
            template.setNativeAd(nativeAd);
        }
     })
     .build();

adLoader.loadAd(new AdManagerAdRequest.Builder().build());

Klawisze słownika stylów

Możesz nadać szablonowi styl na 2 sposoby: za pomocą tradycyjnego układu XML lub obiektu NativeTemplateStyle.Builder. Powyższy przykładowy kod demonstruje, jak za pomocą obiektu NativeTemplateStyle.Builder ustawić główny kolor tła, ale dostępnych jest też wiele innych opcji. Oto wszystkie dostępne metody tworzenia. Kreator zwraca obiekt NativeTemplateStyle, który zastępuje wszystkie style układu XML. Układy XML gnt_small_template.xml i gnt_medium_template.xml korzystają z tych samych parametrów stylu Androida, które znasz.

Metody budowania stylu szablonu natywnego
`withCallToActionTextTypeface`	`Typeface callToActionTextTypeface` Krój czcionki wezwania do działania.
`withCallToActionTextSize`	`float callToActionTextSize` Rozmiar tekstu wezwania do działania.
`withCallToActionTypefaceColor`	`int callToActionTypefaceColor` Kolor tekstu wezwania do działania.
`withCallToActionBackgroundColor`	`ColorDrawable callToActionBackgroundColor` Kolor tła wezwania do działania.
`withPrimaryTextTypeface`	`Typeface primaryTextTypeface` Krój czcionki pierwszego wiersza tekstu.
`withPrimaryTextSize`	`float primaryTextSize` Rozmiar pierwszego wiersza tekstu.
`withPrimaryTextTypefaceColor`	`int primaryTextTypefaceColor` Kolor pierwszego wiersza tekstu.
`withPrimaryTextBackgroundColor`	`ColorDrawable primaryTextBackgroundColor` Kolor tła pierwszego wiersza tekstu.
`withSecondaryTextTypeface`	`Typeface secondaryTextTypeface` Krój czcionki drugiego wiersza tekstu.
`withSecondaryTextSize`	`float secondaryTextSize` Rozmiar drugiego wiersza tekstu.
`withSecondaryTextTypefaceColor`	`int secondaryTextTypefaceColor` Kolor tekstu w drugim wierszu.
`withSecondaryTextBackgroundColor`	`ColorDrawable secondaryTextBackgroundColor` Kolor tła drugiego wiersza tekstu.
`withTertiaryTextTypeface`	`Typeface tertiaryTextTypeface` Krój czcionki trzeciego wiersza tekstu.
`withTertiaryTextSize`	`float tertiaryTextSize` Rozmiar trzeciego wiersza tekstu.
`withTertiaryTextTypefaceColor`	`int tertiaryTextTypefaceColor` Kolor trzeciego wiersza tekstu.
`withTertiaryTextBackgroundColor`	`ColorDrawable tertiaryTextBackgroundColor` Kolor tła trzeciego wiersza tekstu.
`withMainBackgroundColor`	`ColorDrawable mainBackgroundColor` Główny kolor tła.

Publikuj

Opracowaliśmy szablony natywne, by szybko tworzyć reklamy natywne. Dodając nowe szablony lub funkcje do naszego repozytorium GitHub, zapraszamy do dzielenia się nimi. Wystarczy, że wyślesz do nas prośbę.