Как загрузить одно объявление при запуске приложения

Объявления при запуске приложения показываются, когда пользователь открывает приложение или возвращается к нему. Пользователь может закрыть такое объявление в любой момент. Чтобы монетизировать экран загрузки приложения, используйте объявления при запуске приложения. Подробные сведения об этом можно найти в статье о

Руководство по объявлениям при запуске приложения

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

Требования

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

Android 

ca-app-pub-3940256099942544/9257395921

iOS 

ca-app-pub-3940256099942544/5575463023

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

Чтобы загрузить объявление при запуске приложения, вызовите метод load.

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

export async function loadAppOpenAd(
  adUnitId: string,
): Promise<AppOpenAd | null> {
  try {
    const ad = await AppOpenAd.load({adUnitId});
    return ad;
  } catch (error) {
    const loadError = error as LoadAdError;
    console.error('Failed to load app open ad:', loadError.message);
    return null;
  }
}

Как отслеживать события объявлений

Прежде чем показывать объявление, настройте прослушиватель adEventCallback для загруженного экземпляра AppOpenAd. Этот прослушиватель получает обратные вызовы событий жизненного цикла объявления, например когда объявление показывается на экране или пользователь нажимает на него. Доступные обратные вызовы перечислены в AdEventCallback.

В следующем примере обратные вызовы настроены на прослушивание событий объявлений:

export function registerAdEvents(ad: AppOpenAd) {
  ad.adEventCallback = {
    // Called when the ad is presented on screen.
    onAdShowedFullScreenContent: () => {
      console.log('App open ad showed full screen content.');
    },
    // Called when the ad is closed by the user.
    onAdDismissedFullScreenContent: () => {
      console.log('App open ad dismissed full screen content.');
      ad.destroy();
    },
    // Called when presentation fails.
    onAdFailedToShowFullScreenContent: (error) => {
      console.error('Failed to show app open ad:', error);
      ad.destroy();
    },
    // Called when an impression is recorded.
    onAdImpression: () => {
      console.log('App open ad recorded an impression.');
    },
    // Called when the user taps the ad.
    onAdClicked: () => {
      console.log('App open ad was clicked.');
    },
    // Called when the ad is estimated to have earned money.
    onAdPaid: (adValue) => {
      console.log(
        `App open ad paid: ${adValue.amountMicros} ${adValue.currencyCode}`,
      );
    },
  };
}

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

Показ объявления

Чтобы показать объявление при запуске приложения, вызовите метод show:

export function showAppOpenAd(ad: AppOpenAd) {
  ad.show();
}

Как управлять объявлениями с помощью менеджера на уровне приложения

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

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

export class SingleLoadAppOpenAdManager {
  private ad: AppOpenAd | null = null;
  private loadTime = 0;
  private isShowingAd = false;

  async loadAd(adUnitId: string) {
    // Avoid re-loading if an ad is already loaded or showing.
    if (this.ad) {
      return;
    }
    try {
      this.ad = await AppOpenAd.load({adUnitId});
      this.loadTime = Date.now();
      this.ad.adEventCallback = {
        onAdDismissedFullScreenContent: () => {
          this.ad?.destroy();
          this.ad = null;
          this.isShowingAd = false;
          // Preload the next ad for future foreground transitions.
          this.loadAd(adUnitId);
        },
        onAdFailedToShowFullScreenContent: () => {
          // An ad object that fails to present is consumed and cannot be reused.
          // Clean up native resources and preload a new ad for future events.
          this.ad?.destroy();
          this.ad = null;
          this.isShowingAd = false;
          this.loadAd(adUnitId);
        },
      };
    } catch (error) {
      console.error('Failed to load app open ad:', error);
    }
  }

  showAdIfAvailable() {
    if (!this.ad || !this.isAdAvailable()) {
      console.warn(
        'App open ad cannot be shown: ad is not loaded or has expired.',
      );
      return;
    }
    if (this.isShowingAd) {
      console.warn('App open ad cannot be shown: an ad is already displaying.');
      return;
    }

    this.ad.show();
    this.isShowingAd = true;
  }

  isAdAvailable(): boolean {
    // App Open ads expire after 4 hours per Google Mobile Ads policy.
    const FOUR_HOURS_IN_MS = 4 * 60 * 60 * 1000;
    return this.ad !== null && Date.now() - this.loadTime < FOUR_HOURS_IN_MS;
  }
}

Менеджер на уровне приложения позволяет:

  • Состояние объявления не должно зависеть от навигации по экрану и жизненных циклов компонентов.
  • Отслеживайте статус показа объявлений по событиям в потоке нативной рекламы.
  • Обрабатывайте переходы приложения на передний план, чтобы избежать повторного показа объявлений.
  • Предварительно загружайте объявления в фоновом режиме, чтобы они были доступны при запуске приложения.
  • Чтобы не показывать просроченные объявления, проверяйте, не истек ли четырехчасовой срок их хранения.
  • Объедините загрузку, показ и очистку рекламных ресурсов.

Как отслеживать события перехода приложения в активный режим

Чтобы показывать медийные объявления, когда приложение возвращается на передний план, используйте модуль AppState для отслеживания изменений состояния приложения в корневом каталоге, например в файле App.tsx. Выполните следующие действия:

  1. Зарегистрируйте прослушиватель AppState для события 'change'.
  2. Когда состояние переходит в 'active', вызовите метод showAdIfAvailable для экземпляра менеджера рекламы.

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

export function setupAppOpenAdForegroundListener(adManager: {
  showAdIfAvailable: () => void;
}): NativeEventSubscription {
  return AppState.addEventListener('change', (nextAppState: AppStateStatus) => {
    if (nextAppState === 'active') {
      adManager.showAdIfAvailable();
    }
  });
}

Узнайте о холодных запусках и экранах загрузки

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

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

Как настроить тестовый экран

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

В примере ниже объявление при запуске приложения интегрируется в компонент React Native с помощью хука очистки useEffect. Если компонент будет демонтирован до показа объявления, этот хук освободит нативные ресурсы.

export function AppOpenSingleLoadScreen() {
  const [ad, setAd] = useState<AppOpenAd | null>(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [status, setStatus] = useState<string>('Idle');

  useEffect(() => {
    return () => {
      ad?.destroy();
    };
  }, [ad]);

  const handleLoad = async () => {
    setStatus('Loading App Open ad...');
    const loadedAd = await loadAppOpenAd(APP_OPEN_AD_UNIT_ID);
    if (loadedAd) {
      registerAdEvents(loadedAd);
      const onDismiss =
        loadedAd.adEventCallback?.onAdDismissedFullScreenContent;
      loadedAd.adEventCallback = {
        ...loadedAd.adEventCallback,
        onAdDismissedFullScreenContent: () => {
          onDismiss?.();
          setStatus('Ad dismissed.');
        },
      };
      setAd((prevAd) => {
        prevAd?.destroy();
        return loadedAd;
      });
      setIsLoaded(true);
      setStatus('App Open ad loaded!');
    } else {
      setStatus('Failed to load App Open ad.');
    }
  };

  const handleShow = () => {
    if (ad) {
      showAppOpenAd(ad);
      setIsLoaded(false);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>App Open Ad</Text>
      <Text style={styles.status}>Status: {status}</Text>
      <View style={styles.buttonGroup}>
        <Button title="Load Ad" onPress={handleLoad} />
        <View style={styles.spacerSmall} />
        <Button title="Show Ad" onPress={handleShow} disabled={!isLoaded} />
      </View>
    </View>
  );
}

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

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