본문으로 건너뛰기

네이티브 심플 광고

Native Simple 광고는 Native 광고와는 다르게 title 등의 asset 정보가 없는 media view (이미지나 영상)만 갖는 광고로

복잡한 설정 및 추가 작업을 생략하고 배너광고와 유사하게 네이티브 광고를 게재할 수 있게끔 합니다.

시작하기 앞서​

  • 광고 호출을 위해 Ad Unit ID가 필요합니다.

    NAM Admin을 통해 광고 공급자 설정, Inventory 설정, 광고 유닛 등록 등의 과정을 마무리하여 주시기 바랍니다.

    관련 내용은 NAM 관리자에게 문의 부탁드립니다.

  • 광고 상위에 다른 View가 있다면 노출 측정이 제대로 되지 않아 성과 지표 측정에 불이익이 있을 수 있습니다.

[Step 1] NAM SDK 적용 완료​

공통 통합 내용을 참고해 주세요

이하 내용은 NAM SDK 적용이 완료된 상태를 가정하고 진행합니다.

네이티브 심플 광고는 NDA 모듈만 지원하니 해당 모듈을 반드시 추가하여 주세요.

[Step 2] 레이아웃 구성​

네이티브 광고를 게재하기 위해서는 먼저 광고를 게재하려는 Activity 또는 Fragment 의 레이아웃에 네이티브 심플 광고가 삽입될 GfpNativeSimpleAdView 을 추가해야 합니다.

아래 예제에서는 ConstraintLayout ViewGroup 에 native_simple_ad_view 라는 id 로 네이티브 광고가 게재될 GfpNativeSimpleAdView 를 선언했습니다.

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".SmartChannelFragment">

    <com.naver.gfpsdk.GfpNativeSimpleAdView
        android:id="@+id/native_simple_ad_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

[Step 3] AdParam 과 GfpAdLoader 생성​

Native Simple 광고를 요청하기 위해GfpAdLoader 를 생성해야 합니다.

광고 요청 정보를 담은 AdParam 객체를 생성하고 GfpAdLoader 생성자에 할당하게 됩니다.

요청 정보는 Ad Unit ID를 제외한 값은 선택적이고 광고 요청 정보를 참고해 주시기 바랍니다.

3-1. 광고 요청 타임아웃 설정​

광고 요청마다 타임아웃을 설정할 경우에는 아래와 같이 GfpAdLoader 의 Builder 설정시 withTimeoutMillis() 를 추가해야만 합니다.

설정하지 않을 경우 기본값은 SdkProperties 를 통해 전역 설정된 값(기본값 : 60초)을 사용합니다.

3-2. GfpNativeSimpleAdOptions​

  • setAdChoicesPlacement

    Native Simple 광고 표시될 AD badge 에 대한 위치를 설정합니다.

    설정가능한 값은 4가지가 있습니다.

    • ADCHOICES_TOP_LEFT
    • ADCHOICES_TOP_RIGHT (기본 값)
    • ADCHOICES_BOTTOM_RIGHT
    • ADCHOICES_BOTTOM_LEFT

  • setPlaceAdChoicesInAdViewCorner

해당 API 를 true 설정하게 될 경우, Native Simple 광고의 Ad Choices 뱃지의 위치와 클릭 영역을 광고 이미지 영역에서 광고 뷰 영역, 즉, GfpNativeSimpleAdView 기준으로 확장할 수 있습니다.

3-3. 광고 로드 이벤트 수신 - GfpNativeSimpleAd.OnNativeSimpleAdLoadedListener​

GfpAdLoader.Builder#withNativeSimpleAd(GfpNativeSimpleAdOptions, OnNativeSimpleAdLoadedListener)를 통해 광고가 성공적으로 로드 됐을 때

GfpNativeSimpleAd.OnNativeSimpleAdLoadedListener#onNativeSimpleAdLoaded() 의 파라미터로 로드된 광고 정보를 담고 있는 GfpNativeSimpleAd 객체가 전달됩니다.

로드가 완료되면 해당 리스너에서 GfpNativeSimpleAdView 에 셋팅합니다.

adLoader = GfpAdLoader.Builder(this, adParam)
    .withNativeSimpleAd(adOptions, object: GfpNativeSimpleAd.OnNativeSimpleAdLoadedListener {
        override onNativeSimpleAdLoaded(nativeSimpleAd: GfpNativeSimpleAd) {
            nativeSimpleAdView.setNativeSimpleAd(nativeSimpleAd)
        }
    })
    .build()

3-4. AdEventListener​

GfpAdLoader.Builder#withAdListener(AdEventListener) 를 설정함으로써 로드를 제외한 click, impression, error 등에 대한 이벤트를 수신 할 수 있습니다.

[Step 4] 광고 로드​

GfpAdLoader 에 대한 설정이 마무리 되었다면 광고를 로드할 수 있습니다.

단일 GfpAdLoader 를 통해서 광고를 로드할 경우 한 번에 하나씩만 요청해야 합니다.

GfpAdLoader 를 다시 사용하는 경우 각 요청이 완료된 후에 loadAd() 를 다시 호출해 다음 요청을 시작해야 합니다.

만약 요청이 완료되기 전 loadAd() 를 다시 호출할 경우에는 이전 로드가 취소되거나 이미 로드된 광고가 삭제될 수 있습니다.

import ...
import com.naver.gfpsdk.AdEventListener
import com.naver.gfpsdk.AdParam
import com.naver.gfpsdk.GfpAdLoader
import com.naver.gfpsdk.GfpError
import com.naver.gfpsdk.GfpNativeSimpleAdOptions
import com.naver.gfpsdk.GfpNativeSimpleAdView
import com.naver.gfpsdk.GfpResponseInfo

class SmartChannelFragment : Fragment() {
    private lateinit var adLoader: GfpAdLoader

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        val view = inflater.inflate(R.layout.fragment_smart_channel, container, false)
        val nativeSimpleAdView: GfpNativeSimpleAdView = view.findViewById(R.id.native_simple_ad_view)
        val adParam: AdParam = AdParam.Builder().setAdUnitId(AD_UNIT_ID).build()

        val adOptions: GfpNativeSimpleAdOptions = GfpNativeSimpleAdOptions.Builder()
            .setAdChoicesPlacement(GfpNativeSimpleAdOptions.ADCHOICES_TOP_RIGHT)
            .build()

        adLoader = GfpAdLoader.Builder(this, adParam)
            .withAdListener(object: AdEventListener() {
                override fun onAdClicked() {
                    Log.d("SmartchannelFragment", "클릭 발생")
                }

                override fun onAdImpression() {
                    Log.d("SmartchannelFragment", "노출 성공")
                }

                override fun onAdMuted() {
                    Log.d("SmartchannelFragment", "광고 숨기기 성공")
                }

                override fun onError(error: GfpError, responseInfo: GfpResponseInfo) {
                    Log.e("SmartchannelFragment", responseInfo.toString())
                }
            })
            .withNativeSimpleAd(
                adOptions,
                object: GfpNativeSimpleAd.OnNativeSimpleAdLoadedListener { nativeSimpleAd ->
                    nativeSimpleAdView.setNativeSimpleAd(nativeSimpleAd)
                }
            )
            .build()

        adLoader.loadAd()

        return view
    }

    companion object {
        private const val AD_UNIT_ID = "YOUR_AD_UNIT_ID"
    }
}

[Step 5] 광고 삭제​

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

광고 삭제는 아래와 같이 GfpAdLoader 가 제공하는 cancel() 을 호출하면 됩니다.

override fun onDestroy() {
    super.onDestroy()
    adLoader?.let { it.cancel() }
}