Перейти к основному содержимому

AdMob

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

Получение API-ключей​

Получение API-ключей включает в себя следующие шаги:

  1. Создание приложения AdMob
  2. Добавление ключей в FlutterFlow

1. Создание приложения AdMob​

Чтобы создать приложение AdMob:

  1. Посетите домашнюю страницу AdMob и зарегистрируйтесь, используя вашу учетную запись Google.
  2. Перейдите в панель управления и нажмите Приложения в левом меню.
  3. Затем нажмите Добавить приложение.
  4. Выберите платформу как Android.
  5. Для вопроса Присутствует ли приложение в поддерживаемом магазине приложений? выберите Да, если ваше приложение опубликовано в Play Store или App Store. Выберите Нет, если ваше приложение все еще находится в разработке.
  6. Нажмите Продолжить.
  7. Введите Название приложения и нажмите Добавить приложение.
  8. Нажмите Готово.
  9. Точно так же создайте еще одно приложение AdMob для приложения iOS.
к сведению

Вы должны создать два приложения AdMob для отображения рекламы как в приложениях Android, так и в iOS.

2. Добавление ключей в FlutterFlow​

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

Чтобы добавить ключи приложения:

  1. Сначала получите ключ приложения, посетив Панель управления AdMob > Выберите приложение > Настройки приложения (левое меню) > Скопируйте идентификатор приложения.
  2. Теперь вернитесь к проекту FlutterFlow и перейдите к Настройки и интеграции > Интеграции > AdMob.
  3. Для отображения диалога согласия GDPR для пользователей из Европейского союза (EU), включите переключатель Показывать диалог согласия GDPR при запуске приложения.
  4. Найдите поле ввода AdMob Android App Key и введите ключ.
  5. Точно так же добавьте AdMob iOS App Key из приложения AdMob для iOS.

Отображение рекламы​

После добавления ключей вы можете найти инструкции для отображения рекламы на следующих страницах:

AdBanner

Виджет AdBanner используется для отображения рекламного баннера внутри вашего приложения. Виджет AdBanner может отображать тексты, изображения и другие мультимедийные элементы, такие как видеореклама.

к сведению

Наш виджет AdBanner использует Admob, что является сетью рекламы от Google.

Отображение AdBanner из AdMob включает следующие шаги:

  1. Добавление виджета AdBanner
  2. Назначение идентификатора Ad Unit
  3. Включение тестовых объявлений
  4. Тестирование рекламы

1. Добавление виджета AdBanner​

Чтобы добавить виджет AdBanner в ваш проект:

  1. Добавьте виджет Column из дерева виджетов или области холста.
  2. Перетащите виджет AdBanner из вкладки Базовые элементы (в панели виджетов) или добавьте его непосредственно из дерева виджетов.
  3. Перейдите к редактору свойств и прокрутите вниз до раздела Размеры баннера Ad и настройте свойства Ширина и Высота.
к сведению

Если оставить поле Ширина пустым, AdBanner займет всю ширину экрана.

2. Назначение идентификатора Ad Unit​

Идентификатор Ad Unit - это уникальный идентификатор, присвоенный каждой рекламе на Admob. Вы можете получить его, создав новую рекламную единицу из своей учетной записи Admob.

Для назначения идентификатора рекламной единицы:

  1. Перейдите в панель управления Admob, нажмите Приложения в левом меню и выберите ваше приложение.
  2. Выберите Рекламные единицы, затем нажмите Добавить рекламную единицу.
  3. Выберите рекламный баннер.
  4. Введите Название рекламной единицы.
  5. Нажмите Создать рекламную единицу.
  6. Скопируйте идентификатор рекламной единицы (второй) и затем нажмите Готово.
  7. Вставьте его в поле ввода Идентификатор рекламной единицы Android.
  8. Точно так же создайте, скопируйте и вставьте рекламную единицу для приложения iOS.

Отображение интерстициальной рекламы​

Для отображения интерстициальной рекламы необходимо использовать действия Загрузить интерстициальную рекламу и Показать интерстициальную рекламу. Вот как это работает:

Загрузка и отображение интерстициальной рекламы

Сначала необходимо загрузить рекламу с помощью действия Загрузить интерстициальную рекламу и отобразить ее с помощью действия Показать интерстициальную рекламу. При отображении рекламы пользователи могут либо открыть ее, либо закрыть. После закрытия рекламы ее нельзя повторно показывать. Поэтому рекомендуется заранее загружать новую рекламу. Новая загруженная реклама будет показана в следующий раз, когда вы вызовете действие Показать интерстициальную рекламу.

warning

*Дайте достаточно времени после вызова Загрузить интерстициальную рекламу перед вызовом Показать интерстициальную рекламу. Загрузка рекламы может занять некоторое время. Поэтому рекомендуется загружать рекламу заранее, прежде чем показывать ее. В противном случае реклама не будет отображаться. Например, если вы хотите показать рекламу при нажатии на виджет, вы должны загрузить рекламу сразу после загрузки страницы.

к сведению

Изучите лучшие практики по добавлению интерстициальной рекламы здесь.

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

Показ интерстициальной рекламы при переходе на следующую страницу