NAM (Naver Ad Manager)

SDK 설치

• v8.10.3 호환 지원합니다.

api platform('com.naver.gfpsdk:nam-bom:8.10.3')
api 'com.naver.gfpsdk:nam-core'

// NAM 7.x.x 버전에는 아래 sdk 포함 필요
api 'com.naver.gfpsdk:nam-nda'
// NAM 8.x.x 버전에서는 아래 sdk 포함 필요.
api 'com.naver.gfpsdk.mediation:nam-nda'

AndroidManifest.xml 설정

NAM SDK의 정상 동작을 위해선 AnroidManifest.xml 파일 내에 Key-Value 값을 설정해야 합니다.

입력해야 되는 키 값에 대해서는 사업팀([e-mail])에 문의해 주세요.

NAM의 nam_publisher_cd의 값은 반드시 string.xml 에 추가하여 사용 바랍니다.

<resources>
    <string name="nam_publisher_cd">7976096509</string>
</resources>

<meta-data
            android:name="com.naver.gfpsdk.PUBLISHER_CD"
            android:value="@string/nam_publisher_cd"/>

네이티브 광고 추가 설정

다른 타입의 광고와 다르게 네이티브 광고에서 미디에이션 사용하고자 할 경우에는 레이아웃에 대한 추가 설정이 필요합니다.

NAM 네이티브의 경우 일반 네이티브(GfpNativeAdView) 와 SimpleAd(GfpNativeSimpleAdView)를 지원하므로, 매체에서 사용하고자 하는 방식에 맞게 연동을 진행해 주세요

NAM의 경우 AdPopcornSSP v3.7.4 버전까지는 GfpNativeSimpleAdView 형태의 광고만을 지원하였으나, AdPopcornSSP v3.7.5 & NAM v8.2.5 버전부터는 GfpNativeSimpleAdView와 GfpNativeAdView의 광고를 동시에 세팅하여 광고를 취급할 수 있도록 지원이 확대 되었습니다. 이에 더 많은 광고를 확인하고자 할 경우에는 아래의 세팅을 모두 진행해 주시기 바랍니다.

GfpNativeAdView + GfpNativeSimpleAdView

AdPopcornSSPNativeAd layout 내에 GfpNativeAdView와 GfpNativeSimpleAdView 영역을 같이 추가해 주세요

• native_ad_mediation_layout.xml 샘플

<?xml version="1.0" encoding="utf-8"?>
<com.igaworks.ssp.part.nativead.AdPopcornSSPNativeAd
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/adpopcorn_native_ad"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    ...
    <!-- NAM NativeAd -->
    <com.naver.gfpsdk.GfpNativeAdView
        android:id="@+id/gfp_native_ad"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <include layout="@layout/nam_native_ad_unit_layout"/>
    </com.naver.gfpsdk.GfpNativeAdView>

    <!-- NAM SimpleAd -->
    <com.naver.gfpsdk.GfpNativeSimpleAdView
        android:id="@+id/gfp_native_simple_ad"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </com.naver.gfpsdk.GfpNativeSimpleAdView>
...
</com.igaworks.ssp.part.nativead.AdPopcornSSPNativeAd>

• nam_native_ad_unit_layout.xml 샘플

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/nam_assets_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="#FFFFFF"
        android:minHeight="50dp"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="10dp">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="12dp"
                android:orientation="horizontal">

                <ImageView
                    android:id="@+id/nam_ad_app_icon"
                    android:layout_width="46dp"
                    android:layout_height="46dp"
                    android:layout_marginRight="10dp"
                    android:adjustViewBounds="true" />

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:layout_weight="1"
                    android:orientation="vertical">

                    <TextView
                        android:id="@+id/nam_ad_headline"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginBottom="4dp"
                        android:ellipsize="end"
                        android:lines="1"
                        android:textColor="#000000"
                        android:textSize="12dp" />
                </LinearLayout>

                <com.naver.gfpsdk.GfpAdChoicesView
                    android:id="@+id/nam_ad_choices_view"
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:layout_gravity="center_vertical"
                    android:layout_marginLeft="10dp" />

            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/nam_ad_body"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="12dp"
                    android:ellipsize="end"
                    android:maxLines="2"
                    android:textColor="#000000"
                    android:textSize="15dp" />

                <!--
                    if there is no media view
                        new GfpNativeAdOptions.Builder().setHasMediaView(false)
                    this should be deleted
                -->
                <com.naver.gfpsdk.GfpMediaView
                    android:id="@+id/nam_ad_media"
                    android:layout_width="match_parent"
                    android:layout_height="220dp"
                    android:layout_marginBottom="12dp"
                    android:adjustViewBounds="true" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="3"
                        android:orientation="vertical">

                        <TextView
                            android:id="@+id/nam_ad_advertiser"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:ellipsize="end"
                            android:lines="1"
                            android:textColor="@android:color/darker_gray"
                            android:textSize="13dp" />

                        <TextView
                            android:id="@+id/nam_ad_social_context"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:ellipsize="end"
                            android:gravity="center_vertical"
                            android:lines="1"
                            android:textColor="@android:color/black"
                            android:textSize="13dp" />

                    </LinearLayout>

                    <Button
                        android:id="@+id/nam_ad_call_to_action"
                        android:layout_width="100dp"
                        android:layout_height="40dp"
                        android:layout_gravity="center_vertical"
                        android:layout_weight="1"
                        android:background="@color/colorPrimary"
                        android:paddingLeft="3dp"
                        android:paddingRight="3dp"
                        android:textColor="#ffffff"
                        android:textSize="13dp" />

                </LinearLayout>

            </LinearLayout>
        </LinearLayout>
    </LinearLayout>

</FrameLayout>

그리고 지정한 영역을 아래와 같이 setNamViewBinder를 통해 전달해 주면 됩니다.

// NAM - Gfp Native Ad && Native Simple Ad
NAMViewBinder namViewMixBinder = new NAMViewBinder.Builder(R.id.gfp_native_simple_ad, R.id.gfp_native_ad, R.layout.nam_native_ad_unit_layout, true)
                .assetContainerViewId(R.id.nam_assets_container)
                .adChoicesViewId(R.id.nam_ad_choices_view)
                .advertiserViewId(R.id.nam_ad_advertiser)
                .bodyViewId(R.id.nam_ad_body)
                .iconViewId(R.id.nam_ad_app_icon)
                .mediaViewId(R.id.nam_ad_media)
                .titleViewId(R.id.nam_ad_headline)
                .callToActionButtonViewId(R.id.nam_ad_call_to_action)
                .socialContextViewId(R.id.nam_ad_social_context)
                .enableMediaBackgroundBlur(false)
                .activateObservingOnBackground(true)
                .build();
 adPopcornSSPNativeAd.setNamViewBinder(namViewMixBinder);

각 component 별로 사용되어야 하는 타입은 아래와 같습니다.

• 필수 View

  • assetContainerView : FrameLayout

  • adChoicesView : GfpAdChoicesView

  • advertiserView : TextView

  • bodyView : TextView

  • mediaView : GfpMediaView

• 옵션 View

  • iconView : ImageView

  • titleView : TextView

  • callToActionButtonView : Button

  • socialContextView : TextView

viewBinder Builder 생성 시, GfpNativeSimpleAdView id와 GfpNativeAdView id, native adview의 layout, hasMediaView 설정값을 반드시 넘겨줍니다.

GfpNativeSimpleAdView는 템플릿 형태이므로, View Id를 넘겨주면 모든 설정이 마무리 되지만, GfpNativeAdView 의 경우에는 각각의 ui component를 viewBinder에 추가로 세팅해 주어야 합니다. 위 코드를 참고하여 세팅해 주세요.

GfpNativeSimpleAdView

AdPopcornSSPNativeAd layout 내에 GfpNativeSimpleAdView 영역을 추가해 주세요

• native_ad_mediation_layout.xml 샘플

<?xml version="1.0" encoding="utf-8"?>
<com.igaworks.ssp.part.nativead.AdPopcornSSPNativeAd
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/adpopcorn_native_ad"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    ...
    <!-- NAM SimpleAd -->
    <com.naver.gfpsdk.GfpNativeSimpleAdView
        android:id="@+id/gfp_native_simple_ad"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </com.naver.gfpsdk.GfpNativeSimpleAdView>
...
</com.igaworks.ssp.part.nativead.AdPopcornSSPNativeAd>

그리고 지정한 영역을 아래와 같이 setNamViewBinder를 통해 전달해 주면 됩니다.

NAMViewBinder namSimpleViewBinder = new NAMViewBinder.Builder(R.id.gfp_native_simple_ad)
                .build();
adPopcornSSPNativeAd.setNamViewBinder(namSimpleViewBinder);

NAMViewBinder Builder 생성 시, view id(R.id.gfp_native_simple_ad)는 필수로 넘겨주어야 합니다.

useNativeSimpleView의 기본 값은 true로 변경되었습니다.

GfpNativeAdView

AdPopcornSSPNativeAd layout 내에 GfpNativeAdView 영역을 추가해 주세요

• native_ad_mediation_layout.xml 샘플

<?xml version="1.0" encoding="utf-8"?>
<com.igaworks.ssp.part.nativead.AdPopcornSSPNativeAd
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/adpopcorn_native_ad"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    ...
    <!-- NAM NativeAd -->
    <com.naver.gfpsdk.GfpNativeAdView
        android:id="@+id/gfp_native_ad"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <include layout="@layout/nam_native_ad_unit_layout"/>
    </com.naver.gfpsdk.GfpNativeAdView>
...
</com.igaworks.ssp.part.nativead.AdPopcornSSPNativeAd>

• nam_native_ad_unit_layout.xml 샘플

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/nam_assets_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="#FFFFFF"
        android:minHeight="50dp"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="10dp">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="12dp"
                android:orientation="horizontal">

                <ImageView
                    android:id="@+id/nam_ad_app_icon"
                    android:layout_width="46dp"
                    android:layout_height="46dp"
                    android:layout_marginRight="10dp"
                    android:adjustViewBounds="true" />

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:layout_weight="1"
                    android:orientation="vertical">

                    <TextView
                        android:id="@+id/nam_ad_headline"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginBottom="4dp"
                        android:ellipsize="end"
                        android:lines="1"
                        android:textColor="#000000"
                        android:textSize="12dp" />
                </LinearLayout>

                <com.naver.gfpsdk.GfpAdChoicesView
                    android:id="@+id/nam_ad_choices_view"
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:layout_gravity="center_vertical"
                    android:layout_marginLeft="10dp" />

            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/nam_ad_body"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="12dp"
                    android:ellipsize="end"
                    android:maxLines="2"
                    android:textColor="#000000"
                    android:textSize="15dp" />

                <!--
                    if there is no media view
                        new GfpNativeAdOptions.Builder().setHasMediaView(false)
                    this should be deleted
                -->
                <com.naver.gfpsdk.GfpMediaView
                    android:id="@+id/nam_ad_media"
                    android:layout_width="match_parent"
                    android:layout_height="220dp"
                    android:layout_marginBottom="12dp"
                    android:adjustViewBounds="true" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="3"
                        android:orientation="vertical">

                        <TextView
                            android:id="@+id/nam_ad_advertiser"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:ellipsize="end"
                            android:lines="1"
                            android:textColor="@android:color/darker_gray"
                            android:textSize="13dp" />

                        <TextView
                            android:id="@+id/nam_ad_social_context"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:ellipsize="end"
                            android:gravity="center_vertical"
                            android:lines="1"
                            android:textColor="@android:color/black"
                            android:textSize="13dp" />

                    </LinearLayout>

                    <Button
                        android:id="@+id/nam_ad_call_to_action"
                        android:layout_width="100dp"
                        android:layout_height="40dp"
                        android:layout_gravity="center_vertical"
                        android:layout_weight="1"
                        android:background="@color/colorPrimary"
                        android:paddingLeft="3dp"
                        android:paddingRight="3dp"
                        android:textColor="#ffffff"
                        android:textSize="13dp" />

                </LinearLayout>

            </LinearLayout>
        </LinearLayout>
    </LinearLayout>

</FrameLayout>

그리고 지정한 영역을 아래와 같이 setNamViewBinder를 통해 전달해 주면 됩니다.

// NAM - Gfp Native Ad
NAMViewBinder namViewBinder = new NAMViewBinder.Builder(R.id.gfp_native_ad, R.layout.nam_native_ad_unit_layout, true)
                .assetContainerViewId(R.id.nam_assets_container)
                .adChoicesViewId(R.id.nam_ad_choices_view)
                .advertiserViewId(R.id.nam_ad_advertiser)
                .bodyViewId(R.id.nam_ad_body)
                .iconViewId(R.id.nam_ad_app_icon)
                .mediaViewId(R.id.nam_ad_media)
                .titleViewId(R.id.nam_ad_headline)
                .callToActionButtonViewId(R.id.nam_ad_call_to_action)
                .socialContextViewId(R.id.nam_ad_social_context)
                .activateObservingOnBackground(true)
                .enableMediaBackgroundBlur(false)
                .build();
 adPopcornSSPNativeAd.setNamViewBinder(namViewBinder);

각 component 별로 사용되어야 하는 타입은 아래와 같습니다.

• 필수 View

  • assetContainerView : FrameLayout

  • adChoicesView : GfpAdChoicesView

  • advertiserView : TextView

  • bodyView : TextView

  • mediaView : GfpMediaView

• 옵션 View

  • iconView : ImageView

  • titleView : TextView

  • callToActionButtonView : Button

  • socialContextView : TextView

viewBinder Builder 생성 시, GfpNativeAdView id, native adview의 layout, hasMediaView 설정값을 반드시 넘겨줍니다.

GfpNativeAdView 의 경우에는 각각의 ui component를 viewBinder에 추가로 세팅해 주어야 합니다. 위 코드를 참고하여 세팅해 주세요.

네이티브 광고 중복 제어 설정

네이티브 광고에 대해서는 여러 지면에 중복된 광고가 노출되는것을 방지하기 위해 아래의 옵션을 제공합니다. NamViewBinder에 아래의 설정을 추가해 주면 동일한 GfpDedupeManager를 사용하는 지면은 중복된 광고가 노출되지 않습니다.(참고 : NAM 중복 제어 가이드)

GfpDedupeManager gfpDedupeManager = new GfpDedupeManager(4);

// 네이티브 지면1
NAMViewBinder namViewBinder = new NAMViewBinder.Builder(R.id.gfp_native_ad, R.layout.nam_native_ad_unit_layout, true)
                .assetContainerViewId(R.id.nam_assets_container)
                .adChoicesViewId(R.id.nam_ad_choices_view)
                .advertiserViewId(R.id.nam_ad_advertiser)
                .bodyViewId(R.id.nam_ad_body)
                .gfpDedupeManager(gfpDedupeManager)
                .build();
 adPopcornSSPNativeAd.setNamViewBinder(namViewBinder);

 // 네이티브 지면2 
 NAMViewBinder namViewBinder2 = new NAMViewBinder.Builder(R.id.gfp_native_ad, R.layout.nam_native_ad_unit_layout, true)
                .assetContainerViewId(R.id.nam_assets_container)
                .adChoicesViewId(R.id.nam_ad_choices_view)
                .advertiserViewId(R.id.nam_ad_advertiser)
                .bodyViewId(R.id.nam_ad_body)
                .gfpDedupeManager(gfpDedupeManager)
                .build();
 adPopcornSSPNativeAd2.setNamViewBinder(namViewBinder2);

위와 같이 설정된 경우 adPopcornSSPNativeAd, adPopcornSSPNativeAd2 지면에서 NAM의 광고는 중복된 광고가 노출되지 않습니다. 만약 다른 지면에서는 중복을 허용하고자 할 경우에는 GfpDedupeManager를 새로 생성하거나, 세팅하지 않으면 됩니다.

GfpNativeAdView Media Ratio

GfpNativeAdView에서 사용되는 GfpMediaView의 Ratio 값 활용이 필요한 경우, 네이티브 광고가 로딩된 이후, NAMViewBinder의 gfpMediaAspectRatio 변수값을 통해 확인 가능합니다. (아래 샘플 코드 참고)

gfpMediaAspectRatio값이 0인 경우는 광고의 미디어 뷰가 정상적으로 처리 되지 않았거나, No Ad인 케이스입니다.

// NAM - Gfp Native Ad
NAMViewBinder namViewBinder = new NAMViewBinder.Builder(R.id.gfp_native_ad, R.layout.nam_native_ad_unit_layout, true)
                .assetContainerViewId(R.id.nam_assets_container)
                .adChoicesViewId(R.id.nam_ad_choices_view)
                .advertiserViewId(R.id.nam_ad_advertiser)
                .bodyViewId(R.id.nam_ad_body)
                .iconViewId(R.id.nam_ad_app_icon)
                .mediaViewId(R.id.nam_ad_media)
                .titleViewId(R.id.nam_ad_headline)
                .callToActionButtonViewId(R.id.nam_ad_call_to_action)
                .socialContextViewId(R.id.nam_ad_social_context)
                .activateObservingOnBackground(true)
                .enableMediaBackgroundBlur(false)
                .build();
 adPopcornSSPNativeAd.setNamViewBinder(namViewBinder);
 
 adPopcornSSPNativeAd.setNativeAdEventCallbackListener(new INativeAdEventCallbackListener() {
            @Override
            public void onNativeAdLoadSuccess() {
                float gfpMediaAspectRatio = namViewBinder.gfpMediaAspectRatio;
            }

            @Override
            public void onNativeAdLoadFailed(SSPErrorCode errorCode) {
            }

            @Override
            public void onImpression() {
            }

            @Override
            public void onClicked() {
            }

            @Override
            public void onAdHidden() {
            }
        });