Szablony natywne

Pobieranie szablonów natywnych

Ważna informacja: zanim przejdziesz dalej, dowiedz się, jak wczytać natywny komponent aplikacji. Więcej informacji o reklamach natywnych znajdziesz w Przewodniku po reklamach natywnych.

Dzięki reklamom natywnym możesz dostosowywać reklamy, co przekłada się na lepsze wrażenia użytkowników. Lepsze wrażenia użytkowników mogą zwiększyć ich zaangażowanie i ogólne zyski.

Aby w pełni korzystać z możliwości reklam natywnych, zadbaj o to, aby ich układy wyglądały jak naturalne przedłużenie Twojej aplikacji. Aby Ci to ułatwić, przygotowaliśmy szablony natywne.

Szablony natywne to widoki reklam natywnych z kompletnym kodem, które zostały zaprojektowane z myślą o szybkiej implementacji i łatwej modyfikacji. Dzięki szablonom natywności możesz wdrożyć pierwszą reklamę natywną w zaledwie kilka minut i szybko dostosować jej wygląd i wygląd bez konieczności pisania dużej ilości kodu. Możesz umieścić te szablony w dowolnym miejscu w aplikacji, np. w widoku kosza używanym w kanałach wiadomości, w dialogu lub gdziekolwiek indziej.

Uwaga: jeśli chcesz zaprojektować własne natywne układy od podstaw, sięgnij po dokumentację Natywna zaawansowana.

Nasze natywne szablony są udostępniane jako moduł Android Studio, dzięki czemu łatwo można je uwzględnić w projekcie i użyć w dowolny sposób.

Rozmiary szablonów

Dostępne są 2 szablony: mały i średni. Oba formaty używają klasy TemplateView i mają stały format obrazu. Zostaną one dopasowane do szerokości widoku nadrzędnego.

Mały szablon

@layout/gnt_small_template_view

Mały szablon jest idealny do wyświetlania reklam w recyklerze lub w każdej sytuacji, gdy potrzebujesz długiego prostokątnego widoku reklamy. Możesz go na przykład używać do reklam In-Feed.

Szablon Medium

@layout/gnt_medium_template_view

Szablon medium jest przeznaczony do wyświetlania od połowy do 3/4 strony, ale można go też używać w plikach danych. Nadaje się do stron docelowych lub stron ładowania.

Możesz eksperymentować z miejscem docelowym. Oczywiście możesz też zmienić kod źródłowy i pliki XML zgodnie ze swoimi wymaganiami.

Instalowanie szablonów reklam natywnych

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

1. Kliknij Plik > Nowy > Importuj moduł.

2. Wybierz folder nativetemplates.

   

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

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

Korzystanie z szablonów reklam natywnych

Możesz użyć szablonu w dowolnym pliku XML układu, tak jak w przypadku dowolnej innej grupy widoków.

Korzystanie z szablonów to 2 etapy:

1. Najpierw musisz uwzględnić szablon w ramach 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>
   

2. Następnie, gdy szablon wczyta reklamę natywną, musisz mu ją przekazać:

   MobileAds.initialize(this);
   AdLoader adLoader = new AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110")
       .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 AdRequest.Builder().build());
   

Klucze słownika stylów

Stylowanie szablonu można wykonać na 2 sposoby: za pomocą tradycyjnego kodu XML układu lub za pomocą obiektu NativeTemplateStyle.Builder. Powyższy przykład kodu pokazuje, jak użyć obiektu NativeTemplateStyle.Builder do ustawienia głównego koloru tła, ale jest też wiele innych opcji. Oto wszystkie dostępne metody konstruktora. Generator zwraca obiekt NativeTemplateStyle, który zastępuje dowolne stylizacje układu XML. Układy XML gnt_small_template.xml i gnt_medium_template.xml używają tych samych parametrów stylizacji Androida, które już znasz.

Metody kreatora w przypadku stylu natywnego szablonu
withCallToActionTextTypeface	Typeface callToActionTextTypeface Rodzaj 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 Czcionka pierwszego wiersza tekstu.
withPrimaryTextSize	float primaryTextSize Rozmiar pierwszej linii tekstu.
withPrimaryTextTypefaceColor	int primaryTextTypefaceColor Kolor pierwszej linii tekstu.
withPrimaryTextBackgroundColor	ColorDrawable primaryTextBackgroundColor Kolor tła pierwszej linii tekstu.
withSecondaryTextTypeface	Typeface secondaryTextTypeface Rodzaj czcionki w 2. wierszu tekstu.
withSecondaryTextSize	float secondaryTextSize Rozmiar drugiej linii tekstu.
withSecondaryTextTypefaceColor	int secondaryTextTypefaceColor Kolor tekstu w 2. wierszu.
withSecondaryTextBackgroundColor	ColorDrawable secondaryTextBackgroundColor Kolor tła drugiego wiersza tekstu.
withTertiaryTextTypeface	Typeface tertiaryTextTypeface Rodzaj czcionki w 3. rzędzie tekstu.
withTertiaryTextSize	float tertiaryTextSize Rozmiar trzeciego wiersza tekstu.
withTertiaryTextTypefaceColor	int tertiaryTextTypefaceColor Kolor tekstu w 3. wierszu.
withTertiaryTextBackgroundColor	ColorDrawable tertiaryTextBackgroundColor Kolor tła trzeciego wiersza tekstu.
withMainBackgroundColor	ColorDrawable mainBackgroundColor Główny kolor tła.

Publikuj

Aby ułatwić Ci szybkie tworzenie reklam natywnych, opracowaliśmy szablony natywne. Zachęcamy do dodawania nowych szablonów i funkcji do repozytorium GitHub. Wyślij nam prośbę o pobranie danych, a my ją sprawdzimy.