Нативные шаблоны в Dart

Нативные шаблоны – это представления нативной рекламы с полным кодом, предназначенные для быстрого внедрения и простоты модификации. Благодаря собственным шаблонам плагин предоставляет вам готовые макеты для Android и iOS, и вы можете настроить стиль собственных ресурсов с помощью API Dart.

В этом руководстве показано, как использовать API Dart для стилизации представлений базовой платформы и отображения рекламы.

Предварительные условия

  • Флаттер 2.4.0 или выше.

Всегда тестируйте с помощью тестовых объявлений

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

  • /21775744923/example/native

Тестовые рекламные блоки настроены на возврат тестовых объявлений по каждому запросу, поэтому вы можете использовать их в своих приложениях при кодировании, тестировании и отладке — просто не забудьте заменить их собственными идентификаторами рекламных блоков перед публикацией приложения.

Загрузить объявление

В следующем примере нативное объявление загружается с использованием нативного шаблона medium размера:

class NativeExampleState extends State<NativeExample> {
  NativeAd? nativeAd;
  bool _nativeAdIsLoaded = false;

 // TODO: replace this test ad unit with your own ad unit.
 final _adUnitId = '/21775744923/example/native';

  /// Loads a native ad.
  void loadAd() {
    _nativeAd = NativeAd(
        adUnitId: _adUnitId,
        listener: NativeAdListener(
          onAdLoaded: (ad) {
            debugPrint('$NativeAd loaded.');
            setState(() {
              _nativeAdIsLoaded = true;
            });
          },
          onAdFailedToLoad: (ad, error) {
            // Dispose the ad here to free resources.
            debugPrint('$NativeAd failed to load: $error');
            ad.dispose();
          },
        ),
        request: const AdManagerAdRequest(),
        // Styling
        nativeTemplateStyle: NativeTemplateStyle(
            // Required: Choose a template.
            templateType: TemplateType.medium,
            // Optional: Customize the ad's style.
            mainBackgroundColor: Colors.purple,
            cornerRadius: 10.0,
            callToActionTextStyle: NativeTemplateTextStyle(
                textColor: Colors.cyan,
                backgroundColor: Colors.red,
                style: NativeTemplateFontStyle.monospace,
                size: 16.0),
            primaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.red,
                backgroundColor: Colors.cyan,
                style: NativeTemplateFontStyle.italic,
                size: 16.0),
            secondaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.green,
                backgroundColor: Colors.black,
                style: NativeTemplateFontStyle.bold,
                size: 16.0),
            tertiaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.brown,
                backgroundColor: Colors.amber,
                style: NativeTemplateFontStyle.normal,
                size: 16.0)))
      ..load();
  }
}

См. NativeTemplateStyle и NativeTemplateTextStyle для доступных параметров стиля.

Настроить объявление

При настройке нативного объявления с использованием нативных шаблонов конфигурация пользовательского интерфейса вашего объявления будет храниться в классе NativeTemplateStyle , что позволит вам стилизовать все нативное объявление с помощью кода Dart.

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

Шаблоны собственных объявлений Flutter бывают двух типов: TemplateType.small и TemplateType.medium . Небольшой шаблон идеально подходит для TableView или GridView , для рекламы в ленте или везде, где вам нужно тонкое прямоугольное представление рекламы. Средний шаблон рассчитан на просмотр от половины до трех четвертей страницы, что идеально подходит для целевых страниц или заставок.

Маленький

Андроид
iOS
Середина

Андроид
iOS

События с нативной рекламой

Чтобы получать уведомления о событиях, связанных с взаимодействием с собственными объявлениями, используйте свойство listener объявления. Затем реализуйте NativeAdListener для получения обратных вызовов рекламных событий.

class NativeExampleState extends State<NativeExample> {
  NativeAd? _nativeAd;
  bool _nativeAdIsLoaded = false;

 // TODO: replace this test ad unit with your own ad unit.
 final _adUnitId = '/21775744923/example/native';

  /// Loads a native ad.
  void loadAd() {
    _nativeAd = NativeAd(
        adUnitId: _adUnitId,
        listener: NativeAdListener(
          onAdLoaded: (ad) {
            print('$NativeAd loaded.');
            setState(() {
              _nativeAdIsLoaded = true;
            });
          },
          onAdFailedToLoad: (ad, error) {
            // Dispose the ad here to free resources.
            print('$NativeAd failedToLoad: $error');
            ad.dispose();
          },
          // Called when a click is recorded for a NativeAd.
          onAdClicked: (ad) {},
          // Called when an impression occurs on the ad.
          onAdImpression: (ad) {},
          // Called when an ad removes an overlay that covers the screen.
          onAdClosed: (ad) {},
          // Called when an ad opens an overlay that covers the screen.
          onAdOpened: (ad) {},
          // For iOS only. Called before dismissing a full screen view
          onAdWillDismissScreen: (ad) {},
          // Called when an ad receives revenue value.
          onPaidEvent: (ad, valueMicros, precision, currencyCode) {},
        ),
        request: const AdManagerAdRequest(),
        // Styling
        nativeTemplateStyle: NativeTemplateStyle(
            // Required: Choose a template.
            templateType: TemplateType.medium,
            // Optional: Customize the ad's style.
            mainBackgroundColor: Colors.purple,
            cornerRadius: 10.0,
            callToActionTextStyle: NativeTemplateTextStyle(
                textColor: Colors.cyan,
                backgroundColor: Colors.red,
                style: NativeTemplateFontStyle.monospace,
                size: 16.0),
            primaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.red,
                backgroundColor: Colors.cyan,
                style: NativeTemplateFontStyle.italic,
                size: 16.0),
            secondaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.green,
                backgroundColor: Colors.black,
                style: NativeTemplateFontStyle.bold,
                size: 16.0),
            tertiaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.brown,
                backgroundColor: Colors.amber,
                style: NativeTemplateFontStyle.normal,
                size: 16.0)))
      ..load();
  }
}

Медийное объявление

Чтобы отобразить NativeAd в качестве виджета, вы должны создать экземпляр AdWidget с поддерживаемым объявлением после вызова метода load() . Вы можете создать виджет перед вызовом load() , но load() необходимо вызывать перед добавлением его в дерево виджетов.

AdWidget наследует класс Flutter Widget и может использоваться как любой другой виджет. В iOS убедитесь, что вы поместили виджет в контейнер с указанной шириной и высотой. В противном случае ваше объявление может не отображаться.

// Small template
final adContainer = ConstrainedBox(
  constraints: const BoxConstraints(
    minWidth: 320, // minimum recommended width
    minHeight: 90, // minimum recommended height
    maxWidth: 400,
    maxHeight: 200,
  ),
  child: AdWidget(ad: _nativeAd!),
);

// Medium template
final adContainer = ConstrainedBox(
  constraints: const BoxConstraints(
    minWidth: 320, // minimum recommended width
    minHeight: 320, // minimum recommended height
    maxWidth: 400,
    maxHeight: 400,
  ),
  child: AdWidget(ad: _nativeAd!),
);

Удалить объявление

NativeAd необходимо избавиться, когда доступ к нему больше не нужен. Лучше всего вызывать метод dispose() после удаления AdWidget , связанного с нативным объявлением, из дерева виджетов и в обратном вызове AdListener.onAdFailedToLoad() .