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

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

При загрузке нативного объявления приложение получает объект объявления, содержащий объекты объявления, такие как изображения, текст и видео. За показ объектов объявления в макете нативного объявления отвечает ваше приложение. Чтобы нативные объявления показывались в соответствии с правилами, Google Mobile Ads SDK for React Native предоставляет следующие компоненты:

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

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

Требования

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

Определите компонент просмотра нативного объявления

Компонент NativeAdView – это контейнер верхнего уровня для макета нативного объявления. Этот компонент объединяет все отдельные представления объектов и связывает их с загруженным экземпляром NativeAd.

Если вы обернете объекты в компонент NativeAdView, произойдет следующее:

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

Пометка рекламы и значок "Выбор рекламы"

Пометка рекламы и значок "Выбор рекламы" обязательны в соответствии с требованиями правил для всех нативных объявлений Google.

Если вы поместите макет в NativeAdView, Google Mobile Ads SDK for React Native автоматически отобразит значок "Выбор рекламы" в правом верхнем углу объявления. Чтобы значок показывался, не нужно добавлять специальный код или представления объектов.

Чтобы настроить размещение значка в углу, ознакомьтесь с разделом Расширенные настройки нативных объявлений.

Заполнение и регистрация представлений объектов

Чтобы зарегистрировать просмотры объектов с помощью Google Mobile Ads SDK for React Native, заключите каждый компонент объекта в оболочку NativeAdView.Asset и укажите тип объекта с помощью объекта NativeAdAssetNames. Каждый контейнер NativeAdView.Asset должен содержать один хост-элемент React Native, например Text, Image или View, который принимает свойство nativeID. Подробные сведения о доступных свойствах объектов приведены в описании класса NativeAd.

В таблице ниже перечислены доступные типы объектов, целевые ресурсы и примеры регистрации представлений объектов.

Тип объекта	Описание и примеры
`ADVERTISER`	Целевой ресурс: `NativeAd.advertiser` {/* The advertiser or sponsor name (optional). */} {ad.advertiser && ( <NativeAdView.Asset type={NativeAdAssetNames.ADVERTISER}> <Text>{ad.advertiser}</Text> </NativeAdView.Asset> )}
`BODY`	Целевой ресурс: `NativeAd.body` {/* Detailed description text (optional). */} {ad.body && ( <NativeAdView.Asset type={NativeAdAssetNames.BODY}> <Text>{ad.body}</Text> </NativeAdView.Asset> )}
`CALL_TO_ACTION`	Целевой ресурс: `NativeAd.callToAction` {/* Action button text such as "Install" or "Shop Now" (optional). */} {ad.callToAction && ( <NativeAdView.Asset type={NativeAdAssetNames.CALL_TO_ACTION}> <View> <Text>{ad.callToAction}</Text> </View> </NativeAdView.Asset> )}
`HEADLINE`	Целевой ресурс: `NativeAd.headline` {/* The main title of the ad (required). */} <NativeAdView.Asset type={NativeAdAssetNames.HEADLINE}> <Text>{ad.headline}</Text> </NativeAdView.Asset>
`ICON`	Целевой ресурс: `NativeAd.icon` {/* The advertiser logo or app icon (optional). */} {ad.icon && ( <NativeAdView.Asset type={NativeAdAssetNames.ICON}> <Image source={{uri: ad.icon.uri}} /> </NativeAdView.Asset> )}
`PRICE`	Целевой ресурс: `NativeAd.price` {/* Price string for products or paid apps (optional). */} {ad.price && ( <NativeAdView.Asset type={NativeAdAssetNames.PRICE}> <Text>{ad.price}</Text> </NativeAdView.Asset> )}
`STAR_RATING`	Целевой ресурс: `NativeAd.starRating` {/* App rating score from 0 to 5 (optional). */} {ad.starRating !== undefined && ad.starRating > 0 && ( <NativeAdView.Asset type={NativeAdAssetNames.STAR_RATING}> <Text>★ {ad.starRating.toFixed(1)}</Text> </NativeAdView.Asset> )}
`STORE`	Целевой ресурс: `NativeAd.store` {/* App store source such as "Google Play" or "App Store" (optional). */} {ad.store && ( <NativeAdView.Asset type={NativeAdAssetNames.STORE}> <Text>{ad.store}</Text> </NativeAdView.Asset> )}

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

ad.icon
ad.body
ad.advertiser
ad.price
ad.store
ad.starRating

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

Показывать медиаконтент

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

Как применить режим изменения размера медиаконтента

Чтобы настроить масштабирование изображений в контейнере, примените свойство resizeMode к компоненту NativeAdMediaView:

      {/* Video or image media asset (optional). */}
      <NativeAdMediaView resizeMode={ResizeMode.COVER} />

Доступные значения ResizeMode:

Как задать соотношение сторон медиаконтента

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

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

export async function loadNativeAdWithAspectRatio(
  adUnitId: string,
): Promise<NativeAd | null> {
  try {
    const ad = await NativeAd.load({
      adUnitId,
      aspectRatio: NativeMediaAspectRatio.LANDSCAPE,
    });
    return ad;
  } catch (error) {
    const loadError = error as LoadAdError;
    console.error('Failed to load native ad:', loadError.message);
    return null;
  }
}

Доступные значения NativeMediaAspectRatio:

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

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

В примере ниже в компонент NativeAdView передаются обратные вызовы для событий объявлений, таких как показ или закрытие полноэкранного контента.

export function NativeAdWithEvents({ad}: {ad: NativeAd}) {
  return (
    <NativeAdView
      ad={ad}
      // Called when the user taps the ad.
      onAdClicked={() => {
        console.log('Native ad was clicked.');
      }}
      // Called when an impression is recorded.
      onAdImpression={() => {
        console.log('Native ad recorded an impression.');
      }}
      // Called when the ad presents full-screen content.
      onAdShowedFullScreenContent={() => {
        console.log('Native ad showed full screen content.');
      }}
      // Called when full-screen content is dismissed.
      onAdDismissedFullScreenContent={() => {
        console.log('Native ad dismissed full screen content.');
      }}
      // Called when the ad is estimated to have earned money.
      onAdPaid={(adValue: AdValue) => {
        console.log(
          `Native ad paid: ${adValue.amountMicros} ${adValue.currencyCode}`,
        );
      }}
    />
  );
}

Посмотреть полный пример

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

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

export function NativeAdCard({ad}: {ad: NativeAd}) {
  return (
    <NativeAdView ad={ad}>
      {/* 1. Ad Attribution Badge */}
      <View>
        <Text>Ad</Text>
      </View>

      {/* 2. Header: Icon, Headline, Advertiser, and Star Rating */}
      <View>
        {/* The advertiser logo or app icon (optional). */}
        {ad.icon && (
          <NativeAdView.Asset type={NativeAdAssetNames.ICON}>
            <Image source={{uri: ad.icon.uri}} />
          </NativeAdView.Asset>
        )}

        <View>
          {/* The main title of the ad (required). */}
          <NativeAdView.Asset type={NativeAdAssetNames.HEADLINE}>
            <Text>{ad.headline}</Text>
          </NativeAdView.Asset>

          {/* The advertiser or sponsor name (optional). */}
          {ad.advertiser && (
            <NativeAdView.Asset type={NativeAdAssetNames.ADVERTISER}>
              <Text>{ad.advertiser}</Text>
            </NativeAdView.Asset>
          )}

          {/* App rating score from 0 to 5 (optional). */}
          {ad.starRating !== undefined && ad.starRating > 0 && (
            <NativeAdView.Asset type={NativeAdAssetNames.STAR_RATING}>
              <Text>★ {ad.starRating.toFixed(1)}</Text>
            </NativeAdView.Asset>
          )}
        </View>
      </View>

      {/* 3. Media Content */}
      {/* Video or image media asset (optional). */}
      <NativeAdMediaView resizeMode={ResizeMode.COVER} />

      {/* 4. Body Text */}
      {/* Detailed description text (optional). */}
      {ad.body && (
        <NativeAdView.Asset type={NativeAdAssetNames.BODY}>
          <Text>{ad.body}</Text>
        </NativeAdView.Asset>
      )}

      {/* 5. Footer: Price, Store, and Call To Action */}
      <View>
        {/* Price string for products or paid apps (optional). */}
        {ad.price && (
          <NativeAdView.Asset type={NativeAdAssetNames.PRICE}>
            <Text>{ad.price}</Text>
          </NativeAdView.Asset>
        )}

        {/* App store source such as "Google Play" or "App Store" (optional). */}
        {ad.store && (
          <NativeAdView.Asset type={NativeAdAssetNames.STORE}>
            <Text>{ad.store}</Text>
          </NativeAdView.Asset>
        )}

        {/* Action button text such as "Install" or "Shop Now" (optional). */}
        {ad.callToAction && (
          <NativeAdView.Asset type={NativeAdAssetNames.CALL_TO_ACTION}>
            <View>
              <Text>{ad.callToAction}</Text>
            </View>
          </NativeAdView.Asset>
        )}
      </View>
    </NativeAdView>
  );
}

Медийные нативные объявления Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.