Określanie stylu układów reklam za pomocą szablonów natywnych

Wybierz platformę: Android iOS Flutter

Pobieranie szablonów reklam natywnych

Za pomocą reklam natywnych możesz dostosowywać swoje reklamy, co przekłada się na lepsze wrażenia użytkowników. Lepsze wrażenia użytkowników mogą zwiększyć zaangażowanie i poprawić ogólne zyski.

Aby w pełni wykorzystać potencjał reklam natywnych, warto dostosować układy reklam tak, by stanowiły naturalne rozszerzenie aplikacji. Aby ułatwić Ci rozpoczęcie pracy, utworzyliśmy szablony reklam natywnych.

Szablony reklam natywnych to gotowe widoki kodu reklam natywnych, które zostały zaprojektowane z myślą o szybkiej implementacji i łatwej modyfikacji. Dzięki szablonom reklam natywnych możesz wdrożyć pierwszą taką reklamę w ciągu kilku minut i szybko dostosować jej wygląd bez konieczności pisania dużej ilości kodu. Możesz umieścić te szablony w dowolnym miejscu, np. w widoku recyklera używanym w kanale wiadomości, w oknie dialogowym lub w innym miejscu w aplikacji.

Nasze szablony natywne są udostępniane jako moduł Android Studio, dzięki czemu można je łatwo uwzględnić w projekcie 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 mają stały format obrazu. Zostaną przeskalowane tak, aby wypełnić szerokość widoków nadrzędnych.

Mały szablon

@layout/gnt_small_template_view

Mały szablon jest idealny w przypadku widoków recyklera lub gdy potrzebujesz długiego prostokątnego wyświetlenia reklamy. Możesz go na przykład używać w przypadku reklam In-Feed.

Średni szablon

@layout/gnt_medium_template_view

Średni szablon powinien zajmować od połowy do trzech czwartych wyświetlenia strony, ale można go też używać w kanałach. Nadaje się do stron docelowych i stron powitalnych.

Możesz eksperymentować z umiejscowieniem. Możesz też oczywiście zmienić kod źródłowy i pliki XML, aby dostosować je do swoich potrzeb.

Instalowanie szablonów reklam natywnych

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

  1. Wybierz Plik > Nowy > Importuj moduł.

  2. Wybierz folder nativetemplates.

    importowanie szablonu natywnego,

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

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

Korzystanie z szablonów reklam natywnych

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

dodawanie szablonu do układu,

Korzystanie z szablonów to proces dwuetapowy:

  1. 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>
    
  2. Następnie musisz przekazać szablonowi reklamę natywną, gdy się ona wczyta:

    MobileAds.initialize(this);
    AdLoader adLoader = new AdLoader.Builder(this, "/21775744923/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());
    

Klucze słownika stylów

Szablon możesz stylizować na 2 sposoby: za pomocą tradycyjnego układu XML i 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 dostępnych jest też wiele innych opcji. Oto wszystkie dostępne metody tworzenia. Tworzenie zwraca obiekt NativeTemplateStyle, który zastępuje wszystkie style 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 tworzenia stylu szablonu natywnego
withCallToActionTextTypeface Typeface callToActionTextTypeface

Krój pisma 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 pisma 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 pisma drugiego wiersza tekstu.

withSecondaryTextSize float secondaryTextSize

Rozmiar drugiego wiersza tekstu.

withSecondaryTextTypefaceColor int secondaryTextTypefaceColor

Kolor tekstu drugiego wiersza tekstu.

withSecondaryTextBackgroundColor ColorDrawable secondaryTextBackgroundColor

Kolor tła drugiego wiersza tekstu.

withTertiaryTextTypeface Typeface tertiaryTextTypeface

Krój pisma trzeciego wiersza tekstu.

withTertiaryTextSize float tertiaryTextSize

Rozmiar trzeciego wiersza tekstu.

withTertiaryTextTypefaceColor int tertiaryTextTypefaceColor

Kolor tekstu trzeciego wiersza tekstu.

withTertiaryTextBackgroundColor ColorDrawable tertiaryTextBackgroundColor

Kolor tła trzeciego wiersza tekstu.

withMainBackgroundColor ColorDrawable mainBackgroundColor

Główny kolor tła.

Publikuj

Przygotowaliśmy szablony reklam natywnych, aby pomóc Ci szybko tworzyć takie reklamy. Zachęcamy do dodawania nowych szablonów i funkcji w naszym repozytorium GitHub. Wyślij nam żądanie pull, a chętnie się z nimi zapoznamy.