Как настроить расширенные встроенные функции

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

  • Элементы управления воспроизведением видео. Настраивайте воспроизведение видео и отслеживайте события жизненного цикла видео.
  • Размещение значка "Выбор рекламы". Настройте размещение значка "Выбор рекламы".
  • Настройки специальных жестов. Настройте жесты пролистывания как действия при нажатии.

В этом руководстве рассказывается, как использовать продвинутые функции нативных объявлений с помощью Google Mobile Ads SDK for React Native.

Требования

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

Управление воспроизведением видео и событиями

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

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

Чтобы настроить поведение видео при запуске, задайте свойство videoOptions объекта NativeAdRequest с помощью объекта VideoOptions.

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

export async function loadNativeVideoAd(
  adUnitId: string,
): Promise<NativeAd | null> {
  try {
    const ad = await NativeAd.load({
      adUnitId,
      videoOptions: {
        // Autoplay video with sound muted.
        startMuted: true,
      },
    });

    // Inspect video metadata if the ad contains video content.
    if (ad.mediaContent.hasVideoContent) {
      console.log('Video duration in seconds:', ad.mediaContent.duration);
      console.log('Video aspect ratio:', ad.mediaContent.aspectRatio);
    }

    return ad;
  } catch (error) {
    const loadError = error as LoadAdError;
    console.error('Failed to load native video ad:', loadError.message);
    return null;
  }
}

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

Дополнительную информацию о свойствах метаданных видео, таких как соотношение сторон, текущее время и продолжительность, можно найти в статье MediaContent.

Как отслеживать события видео

Чтобы отслеживать события жизненного цикла видео, например начало или конец воспроизведения, передайте обратные вызовы событий из интерфейса VideoControllerEventProps в компонент NativeAdMediaView.

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

export function NativeAdWithVideoControls({ad}: {ad: NativeAd}) {
  const mediaViewRef = useRef<NativeAdMediaViewMethods>(null);

  return (
    <NativeAdView ad={ad}>
      {/* Video lifecycle callbacks */}
      <NativeAdMediaView
        ref={mediaViewRef}
        // Called when video playback starts.
        onVideoStart={() => {
          console.log('Video playback started.');
        }}
        // Called when video playback resumes or plays.
        onVideoPlay={() => {
          console.log('Video is playing.');
        }}
        // Called when video playback pauses.
        onVideoPause={() => {
          console.log('Video playback paused.');
        }}
        // Called when video playback completes.
        onVideoEnd={() => {
          console.log('Video playback finished.');
        }}
        // Called when the video mute state changes.
        onVideoMute={(isMuted: boolean) => {
          console.log(`Video mute state changed: ${isMuted}`);
        }}
      />

      {/* Custom playback controls (Ad Manager customControlsRequested only) */}
      <View>
        {/* Plays or resumes the video. */}
        <Button
          title="Play"
          onPress={() => mediaViewRef.current?.playVideo()}
        />
        {/* Pauses video playback. */}
        <Button
          title="Pause"
          onPress={() => mediaViewRef.current?.pauseVideo()}
        />
        {/* Stops video playback and resets the playback position to the beginning. */}
        <Button
          title="Stop"
          onPress={() => mediaViewRef.current?.stopVideo()}
        />
        {/* Mutes or unmutes audio. */}
        <Button
          title="Mute"
          onPress={() => mediaViewRef.current?.setVideoMuted(true)}
        />
        <Button
          title="Unmute"
          onPress={() => mediaViewRef.current?.setVideoMuted(false)}
        />
      </View>
    </NativeAdView>
  );
}

Если вы включили настраиваемые элементы управления, то можете управлять воспроизведением видео, добавив свойство ref типа NativeAdMediaViewMethods в компонент NativeAdMediaView. Тип NativeAdMediaViewMethods является псевдонимом интерфейса VideoControllerMethods, который предоставляет методы playVideo, pauseVideo, stopVideo и setVideoMuted для объекта ref.

Как настроить размещение значка "Выбор рекламы"

Чтобы настроить размещение значка "Выбор рекламы", укажите свойство adChoicesPlacement в объекте NativeAdRequest, используя объект AdChoicesPlacement.

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

export async function loadNativeAdWithAdChoicesPlacement(
  adUnitId: string,
): Promise<NativeAd | null> {
  try {
    const ad = await NativeAd.load({
      adUnitId,
      // Render the AdChoices icon in the top-left corner.
      adChoicesPlacement: AdChoicesPlacement.TOP_LEFT,
    });
    return ad;
  } catch (error) {
    const loadError = error as LoadAdError;
    console.error('Failed to load native ad:', loadError.message);
    return null;
  }
}

В этом примере также возвращается загруженное объявление в случае успеха и регистрируется сообщение об ошибке в случае неудачи.

Как настроить специальные жесты

Чтобы настроить скользящие жесты как действия-клики в нативных объявлениях, используйте свойства customClickGestureDirection и customClickGestureAllowTaps объекта NativeAdRequest.

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

export async function loadNativeAdWithCustomClick(
  adUnitId: string,
): Promise<NativeAd | null> {
  try {
    const ad = await NativeAd.load({
      adUnitId,
      // Require a right swipe gesture for clicks while allowing standard taps.
      customClickGestureDirection: SwipeGestureDirection.RIGHT,
      customClickGestureAllowTaps: true,
    });

    if (ad.isCustomClickGestureEnabled) {
      console.log('Custom click gestures are enabled for this ad.');
    }

    return ad;
  } catch (error) {
    const loadError = error as LoadAdError;
    console.error('Failed to load native ad:', loadError.message);
    return null;
  }
}

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

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

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

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