Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

네이티브 광고 표시

네이티브 광고가 로드되면 GMA Next-Gen SDK가 해당 광고 형식의 리스너를 호출합니다. 그러면 앱에서 광고를 표시해야 하지만 반드시 즉시 표시할 필요는 없습니다. 시스템 정의 광고 형식을 보다 쉽게 표시할 수 있도록 아래와 같은 유용한 리소스를 SDK에서 제공합니다.

`NativeAdView` 클래스 정의

NativeAdView 클래스를 정의합니다. 이 클래스는 ViewGroup 클래스이며 NativeAdView 클래스의 최상위 컨테이너입니다. 각 네이티브 광고 뷰에는 MediaView 뷰 요소 또는 Title 뷰 요소와 같은 네이티브 광고 확장 소재가 포함되며, 이는 NativeAdView 객체의 하위 요소여야 합니다.

XML 레이아웃

프로젝트에 XML NativeAdView를 추가합니다.

<com.google.android.libraries.ads.mobile.sdk.nativead.NativeAdView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <LinearLayout
    android:orientation="vertical">
        <LinearLayout
        android:orientation="horizontal">
          <ImageView
          android:id="@+id/ad_app_icon" />
          <TextView
            android:id="@+id/ad_headline" />
        </LinearLayout>
        <!--Add remaining assets such as the image and media view.-->
    </LinearLayout>
</com.google.android.libraries.ads.mobile.sdk.nativead.NativeAdView>

Jetpack Compose

JetpackCompose Utilities 폴더를 포함합니다. 이 폴더에는 NativeAdView 객체와 확장 소재를 구성하는 도우미가 포함되어 있습니다.

NativeAdView를 구성합니다.

  import com.google.android.gms.compose_util.NativeAdAttribution
  import com.google.android.gms.compose_util.NativeAdView

  @Composable
  /** Display a native ad with a user defined template. */
  fun DisplayNativeAdView(nativeAd: NativeAd) {
      NativeAdView {
          // Display the ad attribution.
          NativeAdAttribution(text = context.getString("Ad"))
          // Add remaining assets such as the image and media view.
        }
    }

로드된 네이티브 광고 처리

네이티브 광고가 로드되면 콜백 이벤트를 처리하고 네이티브 광고 뷰를 확장하고 이 뷰를 뷰 계층 구조에 추가합니다.

Kotlin

// Build an ad request with native ad options to customize the ad.
val adTypes = listOf(NativeAd.NativeAdType.NATIVE)
val adRequest = NativeAdRequest
  .Builder("/21775744923/example/native", adTypes)
  .build()

val adCallback =
  object : NativeAdLoaderCallback {
    override fun onNativeAdLoaded(nativeAd: NativeAd) {
      activity?.runOnUiThread {

        val nativeAdBinding = NativeAdBinding.inflate(layoutInflater)
        val adView = nativeAdBinding.root
        val frameLayout = myActivityLayout.nativeAdPlaceholder

        // Populate and register the native ad asset views.
        displayNativeAd(nativeAd, nativeAdBinding)

        // Remove all old ad views and add the new native ad
        // view to the view hierarchy.
        frameLayout.removeAllViews()
        frameLayout.addView(adView)
      }
    }
  }

// Load the native ad with our request and callback.
NativeAdLoader.load(adRequest, adCallback)

자바

// Build an ad request with native ad options to customize the ad.
List<NativeAd.NativeAdType> adTypes = Arrays.asList(NativeAd.NativeAdType.NATIVE);
NativeAdRequest adRequest = new NativeAdRequest
                                .Builder("/21775744923/example/native", adTypes)
                                .build();

NativeAdLoaderCallback adCallback = new NativeAdLoaderCallback() {
    @Override
    public void onNativeAdLoaded(NativeAd nativeAd) {
      if (getActivity() != null) {
        getActivity()
          .runOnUiThread(() -> {
            // Inflate the native ad view and add it to the view hierarchy.
            NativeAdBinding nativeAdBinding = NativeAdBinding.inflate(getLayoutInflater());
            NativeAdView adView = (NativeAdView) nativeAdBinding.getRoot();
            FrameLayout frameLayout = myActivityLayout.nativeAdPlaceholder;

            // Populate and register the native ad asset views.
            displayNativeAd(nativeAd, nativeAdBinding);

            // Remove all old ad views and add the new native ad
            // view to the view hierarchy.
            frameLayout.removeAllViews();
            frameLayout.addView(adView);
        });
      }
    }
};

// Load the native ad with our request and callback.
NativeAdLoader.load(adRequest, adCallback);

네이티브 광고의 모든 확장 소재는 NativeAdView 레이아웃 내에서 렌더링해야 합니다. GMA Next-Gen SDK 네이티브 확장 소재가 네이티브 광고 뷰 레이아웃 외부에 렌더링되면 경고를 로그하려고 시도합니다.

광고 뷰 클래스는 각 개별 확장 소재에 사용되는 뷰를 등록하는 데 사용되는 메서드와 NativeAd 객체 자체를 등록하는 메서드도 제공합니다. 이러한 방식으로 뷰를 등록하면 SDK에서 다음과 같은 작업을 자동으로 처리할 수 있습니다.

클릭 기록
첫 번째 픽셀이 화면에 표시될 때 노출수 기록
네이티브 백필 광고 소재의 AdChoices 오버레이 표시(현재 일부 게시자로 제한됨)

네이티브 광고 표시

다음 예에서는 네이티브 광고를 표시하는 방법을 보여줍니다.

Kotlin

private fun displayNativeAd(nativeAd: NativeAd, nativeAdBinding : NativeAdBinding) {
  // Set the native ad view elements.
  val nativeAdView = nativeAdBinding.root
  nativeAdView.advertiserView = nativeAdBinding.adAdvertiser
  nativeAdView.bodyView = nativeAdBinding.adBody
  nativeAdView.callToActionView = nativeAdBinding.adCallToAction
  nativeAdView.headlineView = nativeAdBinding.adHeadline
  nativeAdView.iconView = nativeAdBinding.adAppIcon
  nativeAdView.priceView = nativeAdBinding.adPrice
  nativeAdView.starRatingView = nativeAdBinding.adStars
  nativeAdView.storeView = nativeAdBinding.adStore

  // Set the view element with the native ad assets.
  nativeAdBinding.adAdvertiser.text = nativeAd.advertiser
  nativeAdBinding.adBody.text = nativeAd.body
  nativeAdBinding.adCallToAction.text = nativeAd.callToAction
  nativeAdBinding.adHeadline.text = nativeAd.headline
  nativeAdBinding.adAppIcon.setImageDrawable(nativeAd.icon?.drawable)
  nativeAdBinding.adPrice.text = nativeAd.price
  nativeAd.starRating?.toFloat().let { value ->
    nativeAdBinding.adStars.rating = value
  }
  nativeAdBinding.adStore.text = nativeAd.store

  // Hide views for assets that don't have data.
  nativeAdBinding.adAdvertiser.visibility = getAssetViewVisibility(nativeAd.advertiser)
  nativeAdBinding.adBody.visibility = getAssetViewVisibility(nativeAd.body)
  nativeAdBinding.adCallToAction.visibility = getAssetViewVisibility(nativeAd.callToAction)
  nativeAdBinding.adHeadline.visibility = getAssetViewVisibility(nativeAd.headline)
  nativeAdBinding.adAppIcon.visibility = getAssetViewVisibility(nativeAd.icon)
  nativeAdBinding.adPrice.visibility = getAssetViewVisibility(nativeAd.price)
  nativeAdBinding.adStars.visibility = getAssetViewVisibility(nativeAd.starRating)
  nativeAdBinding.adStore.visibility = getAssetViewVisibility(nativeAd.store)

  // Inform GMA Next-Gen SDK that you have finished populating
  // the native ad views with this native ad.
  nativeAdView.registerNativeAd(nativeAd, nativeAdBinding.adMedia)
}

/**
* Determines the visibility of an asset view based on the presence of its asset.
*
* @param asset The native ad asset to check for nullability.
* @return [View.VISIBLE] if the asset is not null, [View.INVISIBLE] otherwise.
*/
private fun getAssetViewVisibility(asset: Any?): Int {
  return if (asset == null) View.INVISIBLE else View.VISIBLE
}

자바

private void displayNativeAd(ad: NativeAd, nativeAdBinding : NativeAdBinding) {
  // Set the native ad view elements.
  NativeAdView nativeAdView = nativeAdBinding.getRoot();
  nativeAdView.setAdvertiserView(nativeAdBinding.adAdvertiser);
  nativeAdView.setBodyView(nativeAdBinding.adBody);
  nativeAdView.setCallToActionView(nativeAdBinding.adCallToAction);
  nativeAdView.setHeadlineView(nativeAdBinding.adHeadline);
  nativeAdView.setIconView(nativeAdBinding.adAppIcon);
  nativeAdView.setPriceView(nativeAdBinding.adPrice);
  nativeAdView.setStarRatingView(nativeAdBinding.adStars);
  nativeAdView.setStoreView(nativeAdBinding.adStore);

  // Set the view element with the native ad assets.
  nativeAdBinding.adAdvertiser.setText(nativeAd.getAdvertiser());
  nativeAdBinding.adBody.setText(nativeAd.getBody());
  nativeAdBinding.adCallToAction.setText(nativeAd.getCallToAction());
  nativeAdBinding.adHeadline.setText(nativeAd.getHeadline());
  if (nativeAd.getIcon() != null) {
      nativeAdBinding.adAppIcon.setImageDrawable(nativeAd.getIcon().getDrawable());
  }
  nativeAdBinding.adPrice.setText(nativeAd.getPrice());
  if (nativeAd.getStarRating() != null) {
      nativeAdBinding.adStars.setRating(nativeAd.getStarRating().floatValue());
  }
  nativeAdBinding.adStore.setText(nativeAd.getStore());

  // Hide views for assets that don't have data.
  nativeAdBinding.adAdvertiser.setVisibility(getAssetViewVisibility(nativeAd.getAdvertiser()));
  nativeAdBinding.adBody.setVisibility(getAssetViewVisibility(nativeAd.getBody()));
  nativeAdBinding.adCallToAction.setVisibility(getAssetViewVisibility(nativeAd.getCallToAction()));
  nativeAdBinding.adHeadline.setVisibility(getAssetViewVisibility(nativeAd.getHeadline()));
  nativeAdBinding.adAppIcon.setVisibility(getAssetViewVisibility(nativeAd.getIcon()));
  nativeAdBinding.adPrice.setVisibility(getAssetViewVisibility(nativeAd.getPrice()));
  nativeAdBinding.adStars.setVisibility(getAssetViewVisibility(nativeAd.getStarRating()));
  nativeAdBinding.adStore.setVisibility(getAssetViewVisibility(nativeAd.getStore()));

  // Inform GMA Next-Gen SDK that you have finished populating
  // the native ad views with this native ad.
  nativeAdView.registerNativeAd(nativeAd, nativeAdBinding.adMedia);
}

/**
* Determines the visibility of an asset view based on the presence of its asset.
*
* @param asset The native ad asset to check for nullability.
* @return {@link View#VISIBLE} if the asset is not null, {@link View#INVISIBLE} otherwise.
*/
private int getAssetViewVisibility(Object asset) {
    return (asset == null) ? View.INVISIBLE : View.VISIBLE;
}

AdChoices 오버레이

백필 광고가 반환되면 SDK에서 AdChoices 오버레이가 광고 뷰로 추가됩니다. 앱에서 네이티브 광고 백필을 사용하는 경우 네이티브 광고 뷰의 원하는 모서리에 자동으로 삽입되는 AdChoices 로고를 위한 공간을 남겨 두세요. 또한 AdChoices 오버레이가 표시되도록 배경 색상과 이미지를 적절하게 선택하는 것이 중요합니다. 오버레이의 모양과 기능에 관한 자세한 내용은 프로그래매틱 네이티브 광고 구현 가이드라인을 참고하세요.

프로그래매틱 네이티브 광고의 광고 기여도

프로그래매틱 네이티브 광고를 표시할 때는 뷰가 광고임을 나타내는 광고 기여도를 표시해야 합니다. 자세한 내용은 정책 가이드라인을 참고하세요.

클릭 처리

네이티브 광고 뷰 위 또는 내의 뷰에 맞춤 클릭 핸들러를 구현하지 마세요. 확장 소재 뷰를 올바르게 채우고 등록하는 한 광고 뷰 확장 소재의 클릭은 SDK에서 처리합니다.

클릭을 수신 대기하려면 GMA Next-Gen SDK 클릭 콜백을 구현하세요.

Kotlin

private fun setEventCallback(nativeAd: NativeAd) {
  nativeAd.adEventCallback =
    object : NativeAdEventCallback {
      override fun onAdClicked() {
        Log.d(Constant.TAG, "Native ad recorded a click.")
      }
    }
}

자바

private void setEventCallback(NativeAd nativeAd) {
  nativeAd.setAdEventCallback(new NativeAdEventCallback() {
      @Override
      public void onAdClicked() {
        Log.d(Constant.TAG, "Native ad recorded a click.");
      }
  });
}

ImageScaleType

MediaView 클래스에는 이미지를 표시할 때 ImageScaleType 속성이 있습니다. MediaView에서 이미지의 크기를 조정하는 방식을 변경하려면 MediaView의 setImageScaleType() 메서드를 사용하여 해당하는 ImageView.ScaleType을 설정하세요.

Kotlin

nativeAdViewBinding.mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP

자바

nativeAdViewBinding.mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);

MediaContent

MediaContent 클래스는 MediaView 클래스를 사용하여 표시되는 네이티브 광고의 미디어 콘텐츠와 관련된 데이터를 보유합니다. MediaView mediaContent 속성이 MediaContent 인스턴스로 설정된 경우:

동영상 확장 소재를 사용할 수 있는 경우 버퍼링되고 MediaView 내에서 재생이 시작됩니다. hasVideoContent()를 확인하여 동영상 확장 소재를 사용할 수 있는지 확인할 수 있습니다.
광고에 동영상 확장 소재가 포함되어 있지 않으면 mainImage 확장 소재가 다운로드되어 MediaView 내에 배치됩니다.

광고 삭제

네이티브 광고를 표시한 후 광고를 삭제합니다. 다음 예에서는 네이티브 광고를 삭제합니다.

Kotlin

nativeAd.destroy()

자바

nativeAd.destroy();

네이티브 광고 코드 테스트

직접 판매 광고

직접 판매 네이티브 광고가 어떤 것인지 테스트하려면 다음 Ad Manager 광고 단위 ID를 사용하면 됩니다.

/21775744923/example/native

이 ID는 샘플 앱 설치 및 콘텐츠 광고는 물론 다음 확장 소재가 포함된 맞춤 네이티브 광고 형식을 게재하도록 구성되었습니다.

제목 (텍스트)
MainImage (이미지)
캡션 (텍스트)

맞춤 네이티브 광고 형식의 템플릿 ID는 10063170입니다.

네이티브 백필 광고

Ad Exchange 백필은 일부 게시자로 제한됩니다. 네이티브 백필 광고의 동작을 테스트하려면 다음 Ad Manager 광고 단위를 사용하세요.

/21775744923/example/native-backfill

이 광고 단위에서는 샘플 앱 설치를 제공하고 AdChoices 오버레이가 적용된 콘텐츠 광고를 게재합니다.

실제 광고 단위 및 템플릿 ID를 참조하도록 코드를 업데이트한 후 게시하세요.

다음 단계

다음 주제를 살펴보세요.

사용자 개인 정보 보호

예

샘플 앱 을 다운로드하고 실행하여 GMA Next-Gen SDK 사용법을 확인하세요.

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

NativeAdView 클래스 정의

XML 레이아웃

Jetpack Compose

로드된 네이티브 광고 처리

Kotlin

자바

네이티브 광고 표시

Kotlin

자바

AdChoices 오버레이

프로그래매틱 네이티브 광고의 광고 기여도

클릭 처리

Kotlin

자바

ImageScaleType

Kotlin

자바

MediaContent

광고 삭제

Kotlin

자바

네이티브 광고 코드 테스트

직접 판매 광고

네이티브 백필 광고

다음 단계

예

네이티브 광고 표시

`NativeAdView` 클래스 정의