Собственные шаблоны

Выберите платформу: Android iOS Flutter

Загрузить собственные шаблоны

Используя нативную рекламу, вы можете настроить её под себя, что обеспечит лучший пользовательский опыт. Более качественный пользовательский опыт может повысить вовлечённость и улучшить общую доходность.

Чтобы максимально эффективно использовать нативную рекламу, важно оформить её так, чтобы она гармонично вписывалась в дизайн вашего приложения. Чтобы помочь вам начать работу, мы создали нативные шаблоны.

Нативные шаблоны — это готовые к использованию представления для ваших нативных объявлений, разработанные для быстрой реализации и лёгкой модификации. С помощью нативных шаблонов вы можете реализовать своё первое нативное объявление всего за несколько минут и быстро настроить его внешний вид без написания большого количества кода. Вы можете разместить эти шаблоны где угодно, например, в представлении Recycler в ленте новостей, в диалоговом окне или в любом другом месте вашего приложения.

Наши собственные шаблоны предоставляются в виде модуля Android Studio, поэтому вы можете легко включить их в свой проект и использовать по своему усмотрению.

Размеры шаблона

Существует два шаблона: малый и средний. Оба используют класс TemplateView и имеют фиксированное соотношение сторон. Они масштабируются, заполняя ширину родительских представлений.

Маленький шаблон

@layout/gnt_small_template_view

Небольшой шаблон идеально подходит для просмотра с переработкой или в тех случаях, когда вам нужно длинное прямоугольное рекламное объявление. Например, его можно использовать для рекламы в ленте.

Средний шаблон

@layout/gnt_medium_template_view

Средний шаблон предназначен для просмотра в половину или три четверти страницы, но его также можно использовать в лентах новостей. Он хорошо подходит для лендингов и страниц-заставок.

Не стесняйтесь экспериментировать с размещением. Конечно, вы также можете изменить исходный код и XML-файлы в соответствии со своими требованиями.

Установка шаблонов нативной рекламы

Чтобы установить собственные шаблоны, просто загрузите zip-файл (с помощью функции клонирования или загрузки на GitHub) и импортируйте модуль в существующий проект Android Studio.

  1. Выберите Файл > Создать > Импортировать модуль .

  2. Выберите папку nativetemplates .

    импорт собственного шаблона

  3. Добавьте следующую строку в файл build.gradle уровня приложения:

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

Использование шаблонов нативной рекламы

Вы можете использовать шаблон в любом XML-файле макета, как и любую другую группу представлений.

добавить шаблон в макет

Использование шаблонов — это двухэтапный процесс:

  1. Во-первых, вам необходимо включить шаблон как часть вашего макета.

    <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. Далее вам необходимо настроить отображение в шаблоне нативной рекламы при его загрузке:

    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());
    

Ключи словаря стилей

Существует два способа стилизации шаблона: с помощью традиционного XML-макета и с помощью объекта NativeTemplateStyle.Builder . Приведённый выше пример кода демонстрирует, как использовать объект NativeTemplateStyle.Builder для установки основного цвета фона, но существует и множество других вариантов. Ниже перечислены все доступные методы конструктора. Конструктор возвращает объект NativeTemplateStyle , который переопределяет любые стили XML-макета. XML-макеты gnt_small_template.xml и gnt_medium_template.xml используют те же параметры стилей Android, с которыми вы уже знакомы.

Методы конструктора для собственного стиля шаблона
withCallToActionTextTypeface Typeface callToActionTextTypeface

Шрифт для призыва к действию.

withCallToActionTextSize float callToActionTextSize

Размер текста призыва к действию.

withCallToActionTypefaceColor int callToActionTypefaceColor

Цвет текста призыва к действию.

withCallToActionBackgroundColor ColorDrawable callToActionBackgroundColor

Цвет фона призыва к действию.

withPrimaryTextTypeface Typeface primaryTextTypeface

Шрифт первой строки текста.

withPrimaryTextSize float primaryTextSize

Размер первой строки текста.

withPrimaryTextTypefaceColor int primaryTextTypefaceColor

Цвет первой строки текста.

withPrimaryTextBackgroundColor ColorDrawable primaryTextBackgroundColor

Цвет фона первой строки текста.

withSecondaryTextTypeface Typeface secondaryTextTypeface

Шрифт второй строки текста.

withSecondaryTextSize float secondaryTextSize

Размер второй строки текста.

withSecondaryTextTypefaceColor int secondaryTextTypefaceColor

Цвет текста второй строки текста.

withSecondaryTextBackgroundColor ColorDrawable secondaryTextBackgroundColor

Цвет фона второй строки текста.

withTertiaryTextTypeface Typeface tertiaryTextTypeface

Шрифт третьей строки текста.

withTertiaryTextSize float tertiaryTextSize

Размер третьей строки текста.

withTertiaryTextTypefaceColor int tertiaryTextTypefaceColor

Цвет текста третьей строки текста.

withTertiaryTextBackgroundColor ColorDrawable tertiaryTextBackgroundColor

Цвет фона третьей строки текста.

withMainBackgroundColor ColorDrawable mainBackgroundColor

Основной цвет фона.

Способствовать

Мы создали нативные шаблоны, которые помогут вам быстро разрабатывать нативную рекламу. Мы будем рады, если вы добавите новые шаблоны или функции в наш репозиторий на GitHub . Отправьте нам запрос на извлечение, и мы рассмотрим его.