Google은 AI 기술을 사용하여 콘텐츠를 사용자의 기본 언어로 번역합니다. AI 번역에는 오류가 있을 수 있습니다.

네이티브 광고 표시

네이티브 광고가 로드되면 앱에서 광고 이미지, 텍스트, 동영상과 같은 광고 확장 소재가 포함된 광고 객체를 수신합니다. 앱은 네이티브 광고 뷰 레이아웃에 광고 확장 소재를 표시해야 합니다. 네이티브 광고를 규정에 맞게 표시하기 위해 Google Mobile Ads SDK for React Native는 다음 구성요소를 제공합니다.

정책을 준수하는 방식으로 네이티브 광고를 표시하는 방법에 관한 자세한 내용은 네이티브 광고 고급형을 사용하는 네이티브 광고를 참고하세요.

이 페이지에서는 Google Mobile Ads SDK for React Native를 사용하여 네이티브 광고 확장 소재를 렌더링하고, 미디어 콘텐츠를 구성하고, 광고 이벤트를 처리하는 방법을 설명합니다.

기본 요건

계속하기 전에 다음을 수행하세요.

네이티브 광고 뷰 구성요소 정의

NativeAdView 구성요소는 네이티브 광고 레이아웃의 최상위 컨테이너입니다. 이 구성요소는 모든 개별 애셋 뷰를 래핑하고 애셋 뷰를 로드된 NativeAd 인스턴스에 바인딩합니다.

NativeAdView 구성요소로 애셋을 래핑하면 다음이 수행됩니다.

광고가 화면에 표시되면 노출수를 기록합니다.
사용자가 양방향 확장 소재를 탭할 때 클릭을 기록하고 탐색을 처리합니다.
AdChoices 오버레이를 표시하고 배치합니다.

광고 표시 및 AdChoices

광고 표시 및 AdChoices 오버레이는 모든 Google 네이티브 광고 구현에 적용되는 필수 정책 요구사항입니다.

레이아웃을 NativeAdView로 래핑하면 Google Mobile Ads SDK for React Native는 기본적으로 광고 뷰의 오른쪽 상단에 AdChoices 아이콘을 자동으로 렌더링합니다. 아이콘을 표시하기 위해 맞춤 코드나 확장 소재 뷰를 추가할 필요는 없습니다.

아이콘의 모서리 배치를 맞춤설정하려면 고급 네이티브 기능 설정을 참고하세요.

확장 소재 뷰 채우기 및 등록하기

Google Mobile Ads SDK for React Native로 확장 소재 뷰를 등록하려면 각 확장 소재 구성요소를 NativeAdView.Asset 래퍼로 래핑하고 NativeAdAssetNames 객체를 사용하여 확장 소재 유형을 지정합니다. 각 NativeAdView.Asset 래퍼에는 nativeID 속성을 허용하는 단일 React Native 호스트 요소(예: Text, Image, View)가 포함되어야 합니다. 사용 가능한 애셋 속성에 대한 자세한 내용은 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

광고에서 선택적 확장 소재를 생략하는 경우 앱에 빈 UI 요소가 표시되지 않아야 합니다.

미디어 콘텐츠 표시

NativeAdMediaView 구성요소는 동영상 및 이미지와 같은 광고의 시각적 확장 소재를 렌더링합니다. 광고에 동영상 콘텐츠가 포함된 경우 미디어 뷰가 동영상을 버퍼링하고 재생합니다. 광고에 이미지 콘텐츠만 포함된 경우 미디어 뷰는 기본 이미지를 대신 렌더링합니다.

미디어 크기 조절 모드 적용

미디어 뷰 컨테이너에서 이미지의 크기 조절 방식을 제어하려면 NativeAdMediaView 구성요소에 resizeMode 속성을 적용하세요.

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

사용 가능한 ResizeMode 값은 다음과 같습니다.

미디어 가로세로 비율 설정

미디어 뷰 레이아웃의 가로세로 비율과 일치하는 광고 소재를 요청하려면 NativeAdRequest 인스턴스에서 aspectRatio 속성을 지정하세요.

다음 예에서는 가로 모드 미디어 가로세로 비율의 네이티브 광고를 요청하고, 성공 시 로드된 광고를 반환하고, 실패 시 오류 메시지를 로깅합니다.

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}`,
        );
      }}
    />
  );
}

전체 예시 보기

이 섹션에서는 재사용 가능한 네이티브 광고 카드 구성요소를 빌드하는 전체 예시를 다룹니다.

다음 예에서는 광고 표시 배지를 표시하고, 개별 네이티브 광고 확장 소재를 조건부로 렌더링 및 등록하고, NativeAdMediaView 구성요소로 미디어 콘텐츠를 렌더링하는 NativeAdCard 구성요소를 정의합니다.

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>
  );
}

네이티브 광고 표시 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.