NAM - GfpNativeAdView + GfpNativeSimpleAdView

Android 네이티브 광고 미디에이션 레이아웃 가이드 입니다.

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

(기존 GfpNativeSimpleAdView 만 연동하고자 할 경우에는 [여기] 링크를 확인하시기 바랍니다.)

1. XML 구조 예시

공통 설정 부분에서 NAM 설정 부분만을 요약하면 아래와 같이 설정됩니다. 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>

1. 코드 연동

// 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)
                .activateObservingOnBackground(true)
                .build();
 adPopcornSSPNativeAd.setNamViewBinder(namViewMixBinder);

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

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