Как задавать стиль макетов объявлений с помощью нативных шаблонов

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

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

Требования

Прежде чем продолжить, сделайте следующее:

  • Flutter 2.4.0 или более поздней версии.

Всегда используйте тестовые объявления

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

Android

ca-app-pub-3940256099942544/2247696110

iOS

ca-app-pub-3940256099942544/3986624511

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

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

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

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

 // TODO: replace this test ad unit with your own ad unit.
 final String _adUnitId = Platform.isAndroid
      ? 'ca-app-pub-3940256099942544/2247696110'
      : 'ca-app-pub-3940256099942544/3986624511';

  /// 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 AdRequest(),
        // 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, объявлений в фиде и других мест, где требуется узкий прямоугольный рекламный блок. Средний шаблон занимает от половины до трех четвертей страницы и идеально подходит для целевых и заставочных страниц.

Маленький

Android
iOS
Средний

Android
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 String _adUnitId = Platform.isAndroid
      ? 'ca-app-pub-3940256099942544/2247696110'
      : 'ca-app-pub-3940256099942544/3986624511';

  /// 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 AdRequest(),
        // 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 наследует класс Widget Flutter и может использоваться как любой другой виджет. На устройствах 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().

Дальнейшие действия

Полный пример на GitHub

Полный пример можно посмотреть в демоверсии API.