본문으로 건너뛰기

배너 광고

배너 광고는 대개 앱의 상단/하단에 위치하는 사각 띠 이미지 형태의 광고입니다.

시작하기 앞서​

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

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

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

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

[Step 1] NAM SDK 적용 완료​

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

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

[Step 2] 레이아웃에 Banner Ad 를 추가할 ViewGroup 을 추가​

배너 광고를 게재하기 위해서는 먼저 광고를 게재하려는 Activity 또는 Fragment 의 레이아웃에 배너 광고가 삽입될 ViewGroup 을 추가해야 합니다.

아래 예제에서는 RelativeLayout ViewGroup 에 banner_container 라는 id 로 배너 광고가 게재될 을 선언했습니다.

<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=".ImageBannerFragment">

        <RelativeLayout
            android:id="@+id/banner_container"
            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] 광고 객체(GfpBannerAdView)와 요청 파라미터(AdParam) 생성​

위에서 선언한 ViewGroup 에 게재될 배너 광고에 대한 객체를 생성하고 ViewGroup에 추가합니다.

광고 요청 파라미터의 경우 Ad Unit ID는 필수 값 입니다.

그 외의 값은 선택적이고 광고 요청 정보를 참고해 주시기 바랍니다.

override fun onCreateView(
    inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
    val view = inflater.inflate(R.layout.activity_main, container, false)
    val bannerAdContainer = view.findViewById(R.id.banner_container)

    // ad request param
    val adParam = AdParam.Builder()
                    .setAdUnitId("YOUR_AD_UNIT_ID")
                    .build()
    
    val bannerAdView = GfpBannerAdView(requireActivity(), adParam)
    . . . // add banner options
    bannerAdContainer.addView(bannerAdView)
    . . . // set listener and load
    return view
}

[Step 4] 배너 광고 옵션 설정 (Optional)​

배너 광고는 GfpBannerAdOptions 라는 객체를 통해 배너 광고만의 옵션을 설정하게 됩니다.

또한 GfpBannerAdView 객체를 통해 광고 요청 타임아웃을 설정 할 수 있습니다.

광고 요청 과정에서 반드시 필요한 부분은 아닙니다.

val bannerAdOptions = GfpBannerAdOptions.Builder()
        .setBannerViewLayoutType(BannerViewLayoutType.FIXED)
        .setHostParam(
            HostParam.Builder()
                .addMetaParam("theme", "dark") // In NDA ad, some ad creative support dark mode. This value will be apply in that creative.
                .build()
        )
        .build()
bannerAdView.setBannerAdOptions(bannerAdOptions)
bannerAdView.setTimeoutMillis(60_000L)

4-1. (Optional For NDA) 레이아웃 타입 설정​

대부분 배너 광고의 경우 '320x50' 등 광고 크기가 정해져 있습니다.

**NDA 모듈(특히 네이버 광고)**의 경우 아래 4가지 레이아웃 타입을 제공하며 미설정시 기본값은 크기 고정형 배너(FIXED)로 설정됩니다.

또한 확장형 배너 타입을 설정하더라도 확장 기능을 지원하지 않는 고정형 광고 소재가 내려오는 경우 크기 고정형 배너와 동일하게 고정된 크기로 랜더링 됩니다.

  • 크기 고정형 배너 (FIXED)

    서비스에서 설정한 광고 컨테이너 크기에 관계없이 광고영역의 크기가 고정된 형태입니다.

    상하/좌우 여백이 생길 수 있습니다.

  • 가로 확장형 배너 (FLUID_WIDTH)

    서비스에서 설정한 광고 컨테이너 크기에 맞게 광고영역의 가로 크기가 확장되는 형태입니다.

  • 세로 확장형 배너 (FLUID_HEIGHT)

    서비스에서 설정한 광고 컨테이너 크기에 맞게 광고영역의 세로 크기가 확장되는 형태입니다.

  • 확장형 배너 (FLUID)

    서비스에서 설정한 광고 컨테이너 크기에 맞게 광고영역의 가로, 세로 크기가 확장되는 형태입니다.

4-2. (Optional For NDA) 매체 메타 정보 전달​

매체와 광고간 약속된 key/value 값을 전달 합니다.

정해진 key 값은 별도로 없으며 네이티브 단에서 광고 소재에 전달하기 위한 통로입니다.

4-3. 타임아웃 설정​

GfpBannerAdView 배너의 setTimeoutMillis 을 통해 광고 요청마다 별도의 타임아웃 설정이 가능합니다.

미설정시 기본값은 SdkProperties 를 통해 전역 설정된 값(기본값 : 60초)을 사용합니다.

[Step 5] 광고 이벤트 수신 설정​

배너 광고의 생명 주기(예: 로드, 클릭, 노출, 에러) 에 대한 이벤트는 BannerAdListener 를 통해서 수신할 수 있습니다.

그리고 광고 이벤트 수신시, GfpBannerAd 정보를 통해서 이벤트가 발생한 광고의 정보를 알 수 있습니다.

예를 들어 GfpBannerAd.getAdProviderName()의 경우 현재 발생한 이벤트의 광고 공급자 이름을 알 수 있습니다.

bannerAdView.setAdListener(object : BannerAdListener() {
    override fun onAdLoaded(ad: GfpBannerAd) {
        // load sucess
    }

    override fun onAdClicked(ad: GfpBannerAd) {
        // click
    }

    override fun onAdImpression(ad: GfpBannerAd) {
        // impression
    }

    override fun onAdMuted(ad: GfpBannerAd) {
        // mute(block) an ad
    }

    override fun onAdMetaChanged(ad: GfpBannerAd, params: Map<String, String>) {
        // meta information changed
    }

    override fun onAdSizeChanged(ad: GfpBannerAd) {
        // can get a size from 'ad.getBannerAdSize()'
    }

    override fun onError(ad: GfpBannerAd, error: GfpError) {
        // GfpBannerAd has ad information, GfpError contains error code.
    }
})

[Step 6] 광고 로드 (샘플)​

GfpBannerAdView 에 대한 설정이 마무리 되었다면 loadAd() 를 통해 광고를 로드할 수 있습니다.

import ...
import com.naver.gfpsdk.AdParam
import com.naver.gfpsdk.BannerAdListener
import com.naver.gfpsdk.BannerViewLayoutType
import com.naver.gfpsdk.GfpBannerAd
import com.naver.gfpsdk.GfpBannerAdOptions
import com.naver.gfpsdk.GfpBannerAdView
import com.naver.gfpsdk.GfpError
import com.naver.gfpsdk.HostParam

class ImageBannerFragment : Fragment() {
    private lateinit var bannerAdView: GfpBannerAdView

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        val view = inflater.inflate(R.layout.fragment_image_banner, container, false)
        val bannerAdContainer = view.findViewById<RelativeLayout>(R.id.banner_container)
        val logTextView = view.findViewById<TextView>(R.id.log_text_view)

        // Ad request parameter
        val adParam = AdParam.Builder().setAdUnitId(AD_UNIT_ID).build()

        // create ad view
        bannerAdView = GfpBannerAdView(requireActivity(), adParam)
        bannerAdContainer.addView(bannerAdView)

        // set bannerAdOptions
        val bannerAdOptions = GfpBannerAdOptions.Builder()
            .setBannerViewLayoutType(BannerViewLayoutType.FIXED)
            .setHostParam(HostParam.Builder()
                .addMetaParam("theme", "dark")
                .build())
            .build()
        bannerAdView.setBannerAdOptions(bannerAdOptions)

        // timeout
        bannerAdView.setTimeoutMillis(60_000L)

        // add listener
        bannerAdView.setAdListener(object: BannerAdListener() {
            override fun onAdLoaded(ad: GfpBannerAd) {
                // can check the size with ad.getBannerAdSize()
                // ad.getAdProviderName() will give the provider name (ex. DFP)
                Log.d("ImageBannerFragment", "onAdLoaded")
            }
            ...
            override fun onError(ad: GfpBannerAd, error: GfpError) {
                // ad.getResponseInfo() gives ad information for this error
                Log.e("ImageBannerFragment", String.format("[%d] sub code (will be good to tracking): %s\n\t\terror message: %s\n\t\tad response info:\n%s\n", error.errorCode, error.errorSubCode, error.errorMessage, ad.responseInfo.toString()))
            }
        })

        // load an ad
        bannerAdView.loadAd()

        return view
    }

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

[Step 7] 광고 삭제​

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

광고 삭제는 아래와 같이 GfpBannerAdView 가 제공하는 destroy() 를 호출하면 됩니다.

override fun onDestroyView() {
    super.onDestroyView()

    if (::bannerAdView.isInitialized) {
        bannerAdView.destroy()
    }
}