네이티브 광고 고급형

UnifiedNativeAd 표시하기

네이티브 광고가 로드되면 Google 모바일 광고 SDK가 해당 광고 형식의 리스너를 호출합니다. 그런 다음 앱이 광고를 표시해야 하는데, 바로 표시할 필요는 없습니다. 시스템 정의 광고 형식을 보다 쉽게 표시할 수 있도록 SDK에서 아래와 같은 유용한 리소스를 제공합니다.

UnifiedNativeAdView 클래스

UnifiedNativeAd 형식의 경우 이에 해당하는 UnifiedNativeAdView 클래스가 있습니다. 이 클래스는 게시자가 UnifiedNativeAd의 루트로 사용해야 하는 ViewGroup입니다. UnifiedNativeAdView 하나가 통합 네이티브 광고 하나에 해당합니다. 광고의 애셋(예: 스크린샷 애셋을 표시하는 ImageView)을 표시하는 데 사용되는 각 보기는 UnifiedNativeAdView 객체의 하위 요소여야 합니다.

다음은 LinearLayout를 사용하여 애셋 보기를 표시하는 통합 네이티브 광고의 보기 계층 구조에 대한 예입니다.

<com.google.android.gms.ads.formats.UnifiedNativeAdView
        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>

             // Other assets such as image or media view, call to action, etc follow.
             ...
        </LinearLayout>
    </com.google.android.gms.ads.formats.UnifiedNativeAdView>
    

다음은 UnifiedNativeAdView를 생성하고 여기에 UnifiedNativeAd를 적용하는 코드의 예입니다.

자바

    AdLoader.Builder builder = new AdLoader.Builder(this, "<your ad unit ID>")
        .forUnifiedNativeAd(new UnifiedNativeAd.OnUnifiedNativeAdLoadedListener() {
            @Override
            public void onUnifiedNativeAdLoaded(UnifiedNativeAd unifiedNativeAd) {
                // Assumes you have a placeholder FrameLayout in your View layout
                // (with id fl_adplaceholder) where the ad is to be placed.
                FrameLayout frameLayout =
                    findViewById(R.id.fl_adplaceholder);
                // Assumes that your ad layout is in a file call ad_unified.xml
                // in the res/layout folder
                UnifiedNativeAdView adView = (UnifiedNativeAdView) getLayoutInflater()
                    .inflate(R.layout.ad_unified, null);
                // This method sets the text, images and the native ad, etc into the ad
                // view.
                populateUnifiedNativeAdView(unifiedNativeAd, adView);
                frameLayout.removeAllViews();
                frameLayout.addView(adView);
            }
    });
    

Kotlin

    val builder = AdLoader.Builder(this, "<your ad unit ID>")
        .forUnifiedNativeAd { unifiedNativeAd ->
            // Assumes that your ad layout is in a file call ad_unified.xml
            // in the res/layout folder
            val adView = layoutInflater
                    .inflate(R.layout.ad_unified, null) as UnifiedNativeAdView
            // This method sets the text, images and the native ad, etc into the ad
            // view.
            populateUnifiedNativeAdView(unifiedNativeAd, adView)
            // Assumes you have a placeholder FrameLayout in your View layout
            // (with id ad_frame) where the ad is to be placed.
            ad_frame.removeAllViews()
            ad_frame.addView(adView)
        }
    

광고 보기 클래스에서도 개별 애셋에 사용되는 보기를 등록하는 메서드 여러 개와 NativeAd 객체 자체를 등록하는 메서드 1개를 제공합니다. 이 방법으로 보기를 등록하면 다음과 같은 작업을 SDK가 자동으로 처리할 수 있습니다.

  • 클릭수 기록
  • 노출수 기록(첫 픽셀이 화면에 표시될 때를 노출로 간주)

AdChoices 오버레이

SDK가 각 광고 보기에 AdChoices 오버레이를 추가합니다. 네이티브 광고 보기에서 원하는 모서리 부분에 AdChoices 로고가 자동으로 삽입될 공간을 남겨두세요. 또한 AdChoices 오버레이가 눈에 잘 띄도록 배경색과 이미지를 적절히 선택하세요. 오버레이의 외형과 기능에 대해 자세히 알아보려면 네이티브 광고 고급형 필드에 대한 설명을 참고하세요.

광고 표시

보기가 광고임을 나타내는 광고 표시를 적용해야 합니다. 정책 가이드 라인에서 자세히 알아보세요.

코드 예

다음은 통합 네이티브 광고를 표시하는 방법입니다.

  1. UnifiedNativeAdView 클래스의 인스턴스를 만듭니다.
  2. 표시될 광고 애셋마다 다음을 수행합니다.
    1. 광고 객체의 애셋으로 애셋 보기를 채웁니다.
    2. ViewGroup 클래스와 함께 애셋 보기를 등록합니다.
  3. 네이티브 광고 레이아웃에 대용량 미디어 애셋이 포함되어 있으면 MediaView를 등록합니다.
  4. ViewGroup 클래스와 함께 광고 객체를 등록합니다.

다음은 UnifiedNativeAd를 표시하는 함수의 예입니다.

자바

    private void displayUnifiedNativeAd(ViewGroup parent, UnifiedNativeAd ad) {

        // Inflate a layout and add it to the parent ViewGroup.
        LayoutInflater inflater = (LayoutInflater) parent.getContext()
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        UnifiedNativeAdView adView = (UnifiedNativeAdView) inflater
                .inflate(R.layout.my_ad_layout, parent);

        // Locate the view that will hold the headline, set its text, and call the
        // UnifiedNativeAdView's setHeadlineView method to register it.
        TextView headlineView = adView.findViewById<TextView>(R.id.ad_headline);
        headlineView.setText(ad.getHeadline());
        adView.setHeadlineView(headlineView);

        ...
        // Repeat the above process for the other assets in the UnifiedNativeAd
        // using additional view objects (Buttons, ImageViews, etc).
        ...

        // If the app is using a MediaView, it should be
        // instantiated and passed to setMediaView. This view is a little different
        // in that the asset is populated automatically, so there's one less step.
        MediaView mediaView = (MediaView) adView.findViewById(R.id.ad_media);
        adView.setMediaView(mediaView);

        // Call the UnifiedNativeAdView's setNativeAd method to register the
        // NativeAdObject.
        adView.setNativeAd(ad);

        // Ensure that the parent view doesn't already contain an ad view.
        parent.removeAllViews();

        // Place the AdView into the parent.
        parent.addView(adView);
    }
    

Kotlin

    fun displayUnifiedNativeAd(parent: ViewGroup, ad: UnifiedNativeAd) {

        // Inflate a layout and add it to the parent ViewGroup.
        val inflater = parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE)
                as LayoutInflater
        val adView = inflater.inflate(R.layout.my_ad_layout, parent) as UnifiedNativeAdView

        // Locate the view that will hold the headline, set its text, and use the
        // UnifiedNativeAdView's headlineView property to register it.
        val headlineView = adView.findViewById<TextView>(R.id.ad_headline)
        headlineView.text = ad.headline
        adView.headlineView = headlineView

        ...
        // Repeat the above process for the other assets in the UnifiedNativeAd using
        // additional view objects (Buttons, ImageViews, etc).
        ...

        val mediaView = adView.findViewById<MediaView>(R.id.ad_media)
        adView.mediaView = mediaView

        // Call the UnifiedNativeAdView's setNativeAd method to register the
        // NativeAdObject.
        adView.setNativeAd(ad)

        // Ensure that the parent view doesn't already contain an ad view.
        parent.removeAllViews()

        // Place the AdView into the parent.
        parent.addView(adView)
    }

그럼 개별 작업을 살펴보겠습니다.

레이아웃 확장

자바

    LayoutInflater inflater = (LayoutInflater) parent.getContext()
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    UnifiedNativeAdView adView = (UnifiedNativeAdView) inflater
            .inflate(R.layout.my_ad_layout, parent);
    

Kotlin

    val inflater = parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE)
            as LayoutInflater
    val adView = inflater.inflate(R.layout.my_ad_layout, parent) as UnifiedNativeAdView
    

이 예에서는 통합 네이티브 광고를 표시한 다음 UnifiedNativeAdView에 대한 참조의 위치를 찾는 보기가 포함된 XML 레이아웃을 확장했습니다. 조각이나 활동에 UnifiedNativeAdView가 있거나 레이아웃 파일을 사용하지 않고 동적으로 인스턴스를 만든 경우, 기존의 객체를 재사용할 수 있습니다.

애셋 보기 게시 및 등록

이 샘플 코드에서는 광고 제목을 표시하는 데 사용되는 보기의 위치를 찾고, 광고 객체가 제공하는 문자열 애셋을 이용해 문구를 설정하며, 이를 아래의 UnifiedNativeAdView객체와 함께 등록합니다.

자바

    TextView headlineView = adView.findViewById<TextView>(R.id.ad_headline);
    headlineView.setText(ad.getHeadline());
    adView.setHeadlineView(headlineView);
    

Kotlin

    val headlineView = adView.findViewById<TextView>(R.id.ad_headline)
    headlineView.text = ad.headline
    adView.headlineView = headlineView
    

앱에서 표시하는 네이티브 광고 객체가 제공하는 애셋별로 보기의 위치를 찾고, 값을 설정하며, 이를 광고 보기 클래스와 함께 등록하는 과정을 반복해야 합니다.

클릭 처리

이전 섹션의 설명대로, 올바르게 애셋 보기를 채우고 등록하면 SDK가 광고 보기 애셋의 클릭을 처리합니다.

다음은 클릭 이벤트를 관찰하기 위해 광고 리스너를 사용하는 코드의 예입니다.

자바

    AdLoader adLoader = new AdLoader.Builder(context, "ca-app-pub-3940256099942544/2247696110")
        ...
        .withAdListener(new AdListener() {
            @Override
            public void onAdFailedToLoad(int errorCode) {
                // Handle the failure by logging, altering the UI, and so on.
            }
            @Override
            public void onAdClicked() {
                // Log the click event or other custom behavior.
            }
        })
        .build();
    

Kotlin

    val adLoader = AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110")
        ...
        .withAdListener(object : AdListener() {
            override fun onAdFailedToLoad(errorCode: Int) {
                // Handle the failure by logging, altering the UI, and so on.
            }
        })
        .build()
    

MediaView 등록

MediaView는 기본 미디어 애셋(동영상 또는 이미지)을 표시하도록 설계된 특수 View입니다.

MediaView는 XML 레이아웃에서 정의하거나 동적으로 생성할 수 있으며, 다른 애셋 보기와 마찬가지로 NativeAdView의 보기 계층 구조 안에 위치해야 합니다. MediaView를 사용하는 앱은 다음과 같이 NativeAdView와 함께 등록해야 합니다.

자바

    MediaView mediaView = adView.findViewById(R.id.ad_media);
    adView.setMediaView(mediaView);
    

Kotlin

    adView.mediaView = adView.findViewById<MediaView>(R.id.ad_media)
    

모든 애셋 보기와 마찬가지로 미디어 보기에 콘텐츠를 채워야 하며, 이는 mediaContent 속성을 사용하여 설정됩니다. UnifiedNativeAdmediaContent 속성에는 MediaView에 전달할 수 있는 미디어 콘텐츠가 포함됩니다.

다음은 미디어 보기의 미디어 콘텐츠를 설정하는 코드 스니펫입니다.

자바

    mediaView.setMediaContent(nativeAd.getMediaContent());
    

Kotlin

    mediaView.mediaContent = nativeAd.mediaContent
    

ImageScaleType 설정

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

예를 들어 이미지가 표시될 때 MediaView를 채우려는 경우입니다(광고에 동영상이 없음).

자바

    mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);
    

Kotlin

    mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP
    

GitHub 샘플

Google GitHub 저장소에는 자바와 Kotlin으로 작성된 네이티브 광고 고급형이 완벽하게 구현되어 있습니다.

네이티브 광고 고급형 예 다운로드

MediaContent

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

  • 사용할 수 있는 동영상 애셋은 버퍼링 후 MediaView 안에서 재생되기 시작합니다. hasVideoContent()를 확인하면 동영상 애셋을 사용할 수 있는지 알 수 있습니다.
  • 광고에 동영상 애셋이 없으면 mainImage 애셋이 대신 다운로드되어 MediaView에 배치됩니다.

네이티브 광고 객체 등록

마지막 단계이며, 네이티브 광고 객체를 표시하는 보기와 함께 네이티브 광고 객체를 등록합니다.

자바

    adView.setNativeAd(ad);
    

Kotlin

    adView.setNativeAd(ad)
    

네이티브 동영상

일부 네이티브 광고에는 이미지, 텍스트, 숫자와 함께 동영상 애셋도 포함됩니다. 동영상 애셋은 일부 광고에만 포함되며, 앱에서 이를 표시하지 않아도 됩니다.

모바일 광고 SDK는 동영상의 구성 및 표시를 단순화하기 위해 다음과 같은 동영상 관련 클래스를 제공합니다.

VideoOptions

VideoOptions 클래스를 사용하면 앱에서 네이티브 동영상 애셋이 작동하는 방식을 구성할 수 있습니다. VideoOptions 객체는 AdLoader를 만들 때 사용되는 NativeAdOptions 객체에 할당해야 합니다.

자바

    VideoOptions videoOptions = new VideoOptions.Builder()
            .setStartMuted(false)
            .build();

    NativeAdOptions adOptions = new NativeAdOptions.Builder()
            .setVideoOptions(videoOptions)
            .build();

    AdLoader adLoader = new AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110")
            .forUnifiedNativeAd( ... )
            .withNativeAdOptions(adOptions)
            .build();
    

Kotlin

    val videoOptions = VideoOptions.Builder()
            .setStartMuted(false)
            .build()

    val adOptions = NativeAdOptions.Builder()
            .setVideoOptions(videoOptions)
            .build()
    val adLoader = AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110")
            .forUnifiedNativeAd( ... )
            .withNativeAdOptions(adOptions)
            .build()
    

현재 VideoOptions.Builder 클래스에서는 동영상 애셋이 시작할 때 음소거 상태여야 하는지를 SDK에 알려주는 setStartMuted() 메서드 하나를 제공합니다. 기본값은 true입니다.

VideoController

VideoController 클래스는 동영상 애셋에 대한 정보를 검색하는 데 사용됩니다. 앱이 getVideoController() 메서드를 호출하여 UnifiedNativeAd 객체에서 컨트롤러에 대한 참조를 가져올 수 있습니다.

자바

    VideoController vc = nativeAd.getVideoController();
    

Kotlin

    val vc = myNativeAd.videoController
    

이 메서드는 광고에 동영상 에셋이 없는 경우에도 항상 VideoController 객체를 반환합니다.

VideoController는 광고에 동영상 애셋이 있으면 true를 반환하고, 그렇지 않으면 false를 반환하는 hasVideoContent() 메서드를 제공합니다.

앱에서 VideoController.VideoLifecycleCallbacks 클래스를 이용해 동영상 애셋의 수명 주기에 이벤트가 발생할 때 알림을 받을 수도 있습니다.

자바

    VideoController vc = nativeAd.getVideoController();

    vc.setVideoLifecycleCallbacks(new VideoController.VideoLifecycleCallbacks() {
        public void onVideoEnd() {
            // Here apps can take action knowing video playback is finished.
            // It's always a good idea to wait for playback to complete before
            // replacing or refreshing a native ad, for example.
            super.onVideoEnd();
        }
    });
    

Kotlin

    val vc = nativeAd.videoController

    vc.setVideoLifecycleCallbacks(object : VideoController.VideoLifecycleCallbacks() {
        override fun onVideoEnd() {
            // Here apps can take action knowing video playback is finished.
            // It's always a good idea to wait for playback to complete before
            // replacing or refreshing a native ad, for example.
            super.onVideoEnd()
        }
    })
    

광고 삭제

네이티브 광고 게재가 끝나면 광고가 올바르게 폐기되도록 광고를 삭제해야 합니다.

자바

    nativeAd.destroy();
    

Kotlin

    nativeAd.destroy()