Skip to main content

Banner Ad

Banner ads are square-strip-shaped image ads that are usually placed at the top/bottom of an app.

Before Starting​

  • Ad Unit ID is required for ad calling.

    Please complete the settings for advertising provider, inventory, and registering of ad units through the NAM Admin.

    Please contact the NAM manager for related inquiries

  • If there are other Views at the top of the ad, the exposure measurement may not be performed properly, resulting in a disadvantage in measuring performance indicators.

[Step 1] Integrate NAM SDK​

Please refer the guide.

The following steps will assume that the NAM SDK application has been completed.

[Step 2] Add ViewGroup to add a Banner Ad to the layout​

To display a banner ad, it is necessary to add the ViewGroup in which the banner ad will be inserted to the Activity or Fragment layout. This layout will be the ad location.

In the example below, a banner ad declared a display in the RelativeLayout ViewGroup with the ID banner_container.

<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] Create an ad object (GfpBannerAdView) and a request parameter (AdParam)​

Create an object for the banner ad to be displayed in the ViewGroup declared above and add it to the ViewGroup.

Ad request parameters require an Ad Unit ID value.

Other values are optional. Please refer to the ad request information.

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)

    // 광고 요청 파라미터
    val adParam = AdParam.Builder()
                    .setAdUnitId("YOUR_AD_UNIT_ID")
                    .build()
    
    val bannerAdView = GfpBannerAdView(requireActivity(), adParam)
    . . . // 배너 옵션 설정
    bannerAdContainer.addView(bannerAdView)
    . . . // 광고 리스너 설정 및 광고 로드
    return view
}

[Step 4] Set banner advertisement options (Optional)​

Specific options for banner advertisements are set through an object called GfpBannerAdOptions.

The ad request timeout could also be set through the GfpBannerAdView object.

This is not a required part of the ad request process.

val bannerAdOptions = GfpBannerAdOptions.Builder()
        .setBannerViewLayoutType(BannerViewLayoutType.FIXED)
        .setHostParam(
            HostParam.Builder()
                .addMetaParam("theme", "dark") // 다크 모드를 지원하는 NDA 광고 소재의 경우배경 등의 색상이 변경 됩니다.
                .build()
        )
        .build()
bannerAdView.setBannerAdOptions(bannerAdOptions)
bannerAdView.setTimeoutMillis(60_000L)

4-1. (Optional For NDA) Layout type settings​

For most banner ads, the ad size is predetermined, such as 320x50.

In the case of the NDA module (especially NAVER Ad), the following four layouts are provided. If the layout is not selected, the default value is the fixed-size banner (FIXED).

Also, even if an expandable banner is selected, the fixed size identical to the fixed banner will be rendered if the ad has a fixed size and does not support the expansion function

  • Fixed-size banner (FIXED)

    The size of the advertising section is fixed regardless of the ad container size set by the service.

    Margins may occur on the top and bottom/left and right.

  • Horizontally expandable banner (FLUID_WIDTH)

    The horizontal size of the advertising section is expanded to fit the advertising container size set by the service.

  • Vertically expandable banner (FLUID_HEIGHT)

    The vertical size of the advertising section is expanded to fit the advertising container size set by the service.

  • Expandable banner (FLUID)

    The horizontal and vertical sizes of the advertising sections are expanded to fit the advertising container size set by the service.

4-2. (Optional For NDA) Transmit the media meta information​

Deliver the promised key/value between the media and advertisements.

There are no predetermined key values. This is a passage to deliver from the native to the advertising material.

4-3. Timeout settings​

You can set a timeout per each of request.

By default, timeout will be applied global setting by SdkProperties. (60s)

[Step 5] Advertising event reception settings​

Events about the life cycle of banner ads (e.g. loading, click, exposure, error) can be received through the BannerAdListener class.

When receiving an advertising event, the ad information in which the event occurred can be found through the GfpBannerAd information.

For example, GfpBannerAd.getAdProviderName() provides the name of the ad provider for the current event.

bannerAdView.setAdListener(object : BannerAdListener() {
    override fun onAdLoaded(ad: GfpBannerAd) {
        // 배너 광고 load 가 성공했을 때 실행됩니다.
    }

    override fun onAdClicked(ad: GfpBannerAd) {
        // 배너 광고 click 이 발생했을 때 실행됩니다.
    }

    override fun onAdImpression(ad: GfpBannerAd) {
        // 배너 광고의 노출이 발생했을 때 실행됩니다.
    }

    override fun onAdMuted(ad: GfpBannerAd) {
        // 배너 광고의 숨기기가 발생했을 때 실행됩니다.
    }

    override fun onAdMetaChanged(ad: GfpBannerAd, params: Map<String, String>) {
        // 배너 광고의 메타 정보 전달시 실행됩니다.
    }

    override fun onAdSizeChanged(ad: GfpBannerAd) {
        // 배너 광고 웹뷰 사이즈 변경시 실행됩니다.
        // 'ad.getBannerAdSize()' 메서드를 통해 변경된 사이즈를 조회할 수 있습니다.
    }

    override fun onError(ad: GfpBannerAd, error: GfpError) {
        // 배너 광고 요청이 실패했을 때 실행됩니다.
        // GfpBannerAd 에는 에러가 발생한 광고 정보가 있고, GfpError 에는 에러 코드 등 에러 내용이 있습니다.
    }
})

[Step 6] Advertisement loading (Sample)​

When the GfpBannerAdView settings have been completed, advertisements can be loaded through 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)

        // 광고 요청 파라미터 설정
        val adParam = AdParam.Builder().setAdUnitId(AD_UNIT_ID).build()

        // 광고 객체 설정
        bannerAdView = GfpBannerAdView(requireActivity(), adParam)
        bannerAdContainer.addView(bannerAdView)

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

        // 타임아웃 설정
        bannerAdView.setTimeoutMillis(60_000L)

        // 광고 이벤트 리스너 설정
        bannerAdView.setAdListener(object: BannerAdListener() {
            override fun onAdLoaded(ad: GfpBannerAd) {
                //ad.getBannerAdSize() 로 크기 확인.
                //ad.getAdProviderName() 로 로드 된 광고 제공자 (ex. DFP) 확인
                Log.d("ImageBannerFragment", "onAdLoaded")
            }
            ...
            override fun onError(ad: GfpBannerAd, error: GfpError) {
                //ad.getResponseInfo() 로 로드 실패된 광고의 광고 제공자 등 광고 정보를 알 수 있습니다.
                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()))
            }
        })

        // 광고 로드
        bannerAdView.loadAd()

        return view
    }

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

[Step 7] Advertisement removal​

Once the display of the banner ad is terminated, the ad must be removed for proper disposal. To remove an ad, call destroy() provided by GfpBannerAdView as shown below.

override fun onDestroyView() {
    super.onDestroyView()

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