네이티브 광고 미디에이션 레이아웃 구성 가이드

본 가이드는 애드팝콘 SSP SDK를 이용하여 Admob, Google Ad Manager, FAN, Mintegral, Adfit, Mobon, Pangle, AppLovinMax, Vungle 네이티브 광고를 미디에이션으로 활용하는 방식을 기술하고 있습니다. 아래 가이드 중, 사용하려는 네트워크만 추가하여 사용하시기 바랍니다.

바로가기

네이티브 XML 공통 설정
PlacementId 설정
미디에이션 네트워크별 연동
네이티브 XML 레이아웃(native_ad_mediation_layout.xml) 설정

AdPopcornSSPNativeAd View 안에 사용하고자 하는 미디에이션 업체의 네이티브 레이아웃을 아래 샘플과 같이 추가합니다.

<?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">

    <!-- AdPopopcorn SSP-->
    <include
        android:id="@+id/adpopcorn_native_ad_view"
        layout="@layout/adpopcorn_native_ad_unit_layout"/>

    <!-- FAN -->
    <com.facebook.ads.NativeAdLayout
        android:id="@+id/fan_native_ad_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <include layout="@layout/fan_native_ad_unit_layout"/>
    </com.facebook.ads.NativeAdLayout>

    <!-- AdMob or GAM or ADOP -->
    <com.google.android.gms.ads.nativead.NativeAdView
        android:id="@+id/admob_unified_native_ad_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <include layout="@layout/admob_native_ad_unit_layout"/>
    </com.google.android.gms.ads.nativead.NativeAdView >

		<!-- Mintegral -->
    <include
        android:id="@+id/mintegral_native_ad_view"
        layout="@layout/mintegral_native_ad_unit_layout" />

		<!-- Mobon -->
    <include
        android:id="@+id/mobon_native_ad_view"
        layout="@layout/mobon_native_ad_unit_layout" />

		<!-- AdFit Native-->
    <com.kakao.adfit.ads.na.AdFitNativeAdView
        android:id="@+id/adFitNativeAdView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginLeft="23dp"
        android:layout_marginTop="15dp"
        android:layout_marginRight="23dp"
        android:layout_marginBottom="15dp">
        <include layout="@layout/adfit_native_ad_unit_layout"/>
    </com.kakao.adfit.ads.na.AdFitNativeAdView>

		<!-- AdFit BizBoard -->
		<com.kakao.adfit.ads.na.AdFitBizBoardAdTemplateLayout
        android:id="@+id/adFitNativeAdView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

		<!-- Pangle -->
    <include
        android:id="@+id/pangle_native_ad_view"
        layout="@layout/pangle_native_ad_unit_layout" />

		<!-- Naver Ad Manager -->
    <com.naver.gfpsdk.GfpNativeSimpleAdView
        android:id="@+id/gfp_native_simple_ad"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="visible">
    </com.naver.gfpsdk.GfpNativeSimpleAdView>

		<!-- AppLovin Max -->
    <include
        android:id="@+id/applovin_native_ad_view"
        layout="@layout/applovin_native_ad_unit_layout" />
    
    <!-- Vungle -->
    <include
        android:id="@+id/vungle_native_ad_view"
        layout="@layout/vungle_native_ad_layout"/>
</com.igaworks.ssp.part.nativead.**AdPopcornSSPNativeAd**>

Placement ID 설정

XML로 생성한(native_ad_mediation_layout.xml) AdPopcornSSPNativeAd에 placement ID 설정

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    adPopcornSSPNativeAd = (AdPopcornSSPNativeAd) findViewById(R.id.adpopcorn_native_ad);
    adPopcornSSPNativeAd.setPlacementId("8n12virz5gmkwqr");
}

미디에이션 네트워크 별 연동

3.1 AdPopcornSSP

AdPopcornSSP의 경우 v3.1.9 버전부터 직접 설정 이외에 템플릿 기능도 추가되었습니다.

이에 직접 설정 혹은 템플릿 사용 방식 중 하나를 선택해 사용하시기 바랍니다. 단, 템플릿 설정 시, 애드팝콘 사업팀에 사용 문의를 먼저 해주시기 바랍니다.

직접 설정

adpopcorn_native_ad_unit_layout.xml 샘플

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="<http://schemas.android.com/apk/res/android>"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:gravity="center"
    android:background="#FFFFFF">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:orientation="horizontal"
        android:background="#FFFFFF">
        <ImageView
            android:id="@+id/apssp_native_ad_icon_image1"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_margin="10dp"/>
        <LinearLayout
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_gravity="center"
            android:orientation="vertical">
            <TextView
                android:id="@+id/apssp_native_ad_title1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#000000"/>
            <TextView
                android:id="@+id/apssp_native_ad_desc1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:maxLines="2"
                android:textColor="#000000"/>
        </LinearLayout>
        <TextView
            android:id="@+id/apssp_native_ad_ctatext1"
            android:layout_width="60dp"
            android:layout_height="30dp"
            android:layout_marginTop="25dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:background="#3d7caf"
            android:textColor="#ffffff"
            android:textColorHint="#ffffff"
            android:gravity="center"
            android:textSize="16sp" />
    </LinearLayout>
    <ImageView
        android:id="@+id/apssp_native_ad_main_image1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>

xml에서 생성한 ui component를 sdk에서 제공하는 setAdPopcornSSPViewBinder API를 이용해 아래와 같이 설정해 줍니다.

AdPopcornSSPViewBinder adpopcornSSPViewBinder 
= new AdPopcornSSPViewBinder.Builder(R.id.adpopcorn_native_ad_view, R.layout.adpopcorn_native_ad_unit_layout)
        .iconImageViewId(R.id.apssp_native_ad_icon_image1)
        .descViewId(R.id.apssp_native_ad_desc1)
        .mainImageViewId(R.id.apssp_native_ad_main_image1)
        .titleViewId(R.id.apssp_native_ad_title1)
        .callToActionId(R.id.apssp_native_ad_ctatext1)
        .build();

adpopcornSSPNativeAd.setAdPopcornSSPViewBinder(adpopcornSSPViewBinder);

주의> AdPopcornSSPViewBinder Builder 생성 시, view id(R.id.adpopcorn_native_ad_view)와 layout id(R.layout.adpopcorn_native_ad_unit_layout)는 필수로 넘겨주어야 하며, 그 외 ui component에 대해서는 사용하는 리소스에 대해서만 설정해 주면 됩니다.

템플릿 사용

AdPopcornSSPNativeAdTemplate Layout

AdPopcornSSPNativeAd View 안에 AdPopcornSSPNativeAdTemplate 뷰를 추가해 줍니다.

<?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">

    <!-- AdPopcorn SSP Template View -->
    <com.igaworks.ssp.part.nativead.view.AdPopcornSSPNativeAdTemplate
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/adpopcornssp_native_ad_template"/>
</com.igaworks.ssp.part.nativead.AdPopcornSSPNativeAd>

:xml에 생성한 resource id를 ViewBinder를 이용하여 아래와 같은 방식으로 매칭

AdPopcornSSPViewBinder adPopcornSSPViewBinder = new AdPopcornSSPViewBinder.Builder(R.id.adpopcornssp_native_ad_template)
                .useTemplate(true)
                .build();
adPopcornSSPNativeAd.setAdPopcornSSPViewBinder(adPopcornSSPViewBinder);

주의> AdPopcornSSPViewBinder Builder 생성 시, useTemplate 값을 true로 설정해 주시고, Builder에 AdPopcornSSPNativeAdTemplate View id를 넘겨줍니다.

3.2 FAN(Facebook Audience Network)

fan_native_ad_unit_layout.xml 샘플

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="<http://schemas.android.com/apk/res/android>"
    android:id="@+id/fan_ad_unit"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/white"
    android:orientation="vertical"
    android:paddingLeft="10dp"
    android:paddingRight="10dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingBottom="10dp"
        android:paddingTop="10dp">

        <com.facebook.ads.MediaView
            android:id="@+id/fan_native_ad_icon"
            android:layout_width="35dp"
            android:layout_height="35dp" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:paddingLeft="5dp"
            android:paddingRight="5dp">

            <TextView
                android:id="@+id/fan_native_ad_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:lines="1"
                android:textColor="@android:color/black"
                android:textSize="15sp" />

            <TextView
                android:id="@+id/fan_native_ad_sponsored_label"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:lines="1"
                android:textColor="@android:color/darker_gray"
                android:textSize="12sp" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/fan_ad_choices_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="end"
            android:orientation="horizontal" />

    </LinearLayout>

    <com.facebook.ads.MediaView
        android:id="@+id/fan_native_ad_media"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center" />

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

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

            <TextView
                android:id="@+id/fan_native_ad_social_context"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:lines="1"
                android:textColor="@android:color/darker_gray"
                android:textSize="12sp" />

            <TextView
                android:id="@+id/fan_native_ad_body"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:gravity="center_vertical"
                android:lines="2"
                android:textColor="@android:color/black"
                android:textSize="12sp" />

        </LinearLayout>

        <Button
            android:id="@+id/fan_native_ad_call_to_action"
            android:layout_width="100dp"
            android:layout_height="30dp"
            android:layout_gravity="center_vertical"
            android:layout_weight="1"
            android:background="#4286F4"
            android:paddingLeft="3dp"
            android:paddingRight="3dp"
            android:textColor="@android:color/white"
            android:textSize="12sp"
            android:visibility="gone" />

    </LinearLayout>

</LinearLayout>

xml에서 생성한 ui component를 sdk에서 제공하는 setFacebookAudienceViewBinder API를 이용해 아래와 같이 설정해 줍니다.

FacebookViewBinder facebookViewBinder 
	= new FacebookViewBinder.Builder(R.id.fan_native_ad_view, R.layout.fan_native_ad_unit_layout)
        .adIconViewId(R.id.fan_native_ad_icon)
        .adChoicesLayoutId(R.id.fan_ad_choices_container)
        .callToActionId(R.id.fan_native_ad_call_to_action)
        .adBodyViewId(R.id.fan_native_ad_body)
        .mediaViewId(R.id.fan_native_ad_media)
        .sponsoredViewId(R.id.fan_native_ad_sponsored_label)
        .titleViewId(R.id.fan_native_ad_title)
        .socialContextId(R.id.fan_native_ad_social_context)
        .build();

adPopcornSSPNativeAd.setFacebookAudienceViewBinder(facebookViewBinder);

주의> FacebookViewBinder Builder 생성 시, view id(R.id.fan_native_ad_view)와 layout id(R.layout.fan_native_ad_unit_layout)는 필수로 넘겨주어야 하며, 그 외 ui component에 대해서는 사용하는 리소스에 대해서만 설정해 주면 됩니다.
자세한 사항은 아래 링크의 FAN 네이티브 가이드 참고

**https://developers.facebook.com/docs/audience-network/android-native/**

3.3 AdMob or GAM(Google Ad Manager) or ADOP

admob_native_ad_unit_layout.xml 샘플

<LinearLayout xmlns:android="<http://schemas.android.com/apk/res/android>"
    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:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:paddingTop="3dp">

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

            <ImageView
                android:id="@+id/admob_ad_app_icon"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:adjustViewBounds="true"
                android:paddingBottom="5dp"
                android:paddingEnd="5dp"
                android:paddingRight="5dp"/>

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

                <TextView
                    android:id="@+id/admob_ad_headline"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textColor="#0000FF"
                    android:textSize="16sp"
                    android:textStyle="bold" />

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

                    <TextView
                        android:id="@+id/admob_ad_advertiser"
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:gravity="bottom"
                        android:textSize="14sp"
                        android:textStyle="bold"/>

                    <RatingBar
                        android:id="@+id/admob_ad_stars"
                        style="?android:attr/ratingBarStyleSmall"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:isIndicator="true"
                        android:numStars="5"
                        android:stepSize="0.5" />
                </LinearLayout>

            </LinearLayout>
        </LinearLayout>

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

            <TextView
                android:id="@+id/admob_ad_body"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="20dp"
                android:layout_marginEnd="20dp"
                android:textSize="12sp" />

            <com.google.android.gms.ads.nativead.MediaView
                android:id="@+id/admob_ad_media"
                android:layout_gravity="center_horizontal"
                android:layout_width="250dp"
                android:layout_height="175dp"
                android:layout_marginTop="5dp" />

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="end"
                android:orientation="horizontal"
                android:paddingBottom="10dp"
                android:paddingTop="10dp">

                <TextView
                    android:id="@+id/admob_ad_price"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:paddingLeft="5dp"
                    android:paddingStart="5dp"
                    android:paddingRight="5dp"
                    android:paddingEnd="5dp"
                    android:textSize="12sp" />

                <TextView
                    android:id="@+id/admob_ad_store"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:paddingLeft="5dp"
                    android:paddingStart="5dp"
                    android:paddingRight="5dp"
                    android:paddingEnd="5dp"
                    android:textSize="12sp" />

                <Button
                    android:id="@+id/admob_ad_call_to_action"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:textSize="12sp" />
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

xml에서 생성한 ui component를 sdk에서 제공하는 ViewBinder API를 이용해 아래와 같이 설정해 줍니다. AdMob, GAM, ADOP 중 사용하는 업체의 viewBinder를 선택하여 사용하면 됩니다.

// AdMob
AdMobViewBinder adMobViewBinder = new AdMobViewBinder.Builder(R.id.admob_unified_native_ad_view, R.layout.admob_native_ad_unit_layout)
        .iconViewId(R.id.admob_ad_app_icon)
        .headlineViewId(R.id.admob_ad_headline)
        .bodyViewId(R.id.admob_ad_body)
        .mediaViewId(R.id.admob_ad_media)
        .callToActionId(R.id.admob_ad_call_to_action)
        .advertiserViewId(R.id.admob_ad_advertiser)
        .priceViewId(R.id.admob_ad_price)
        .starRatingViewId(R.id.admob_ad_stars)
        .storeViewId(R.id.admob_ad_store)
        .build();
adPopcornSSPNativeAd.setAdMobViewBinder(adMobViewBinder);

// GAM
GAMViewBinder gamViewBinder = new GAMViewBinder.Builder(R.id.admob_unified_native_ad_view, R.layout.admob_native_ad_unit_layout)
        .iconViewId(R.id.admob_ad_app_icon)
        .headlineViewId(R.id.admob_ad_headline)
        .bodyViewId(R.id.admob_ad_body)
        .mediaViewId(R.id.admob_ad_media)
        .callToActionId(R.id.admob_ad_call_to_action)
        .advertiserViewId(R.id.admob_ad_advertiser)
        .priceViewId(R.id.admob_ad_price)
        .starRatingViewId(R.id.admob_ad_stars)
        .storeViewId(R.id.admob_ad_store)
        .build();
adPopcornSSPNativeAd.setGAMViewBinder(gamViewBinder);

// ADOP
ADOPViewBinder adopViewBinder = new ADOPViewBinder.Builder(R.id.admob_unified_native_ad_view, R.layout.admob_native_ad_unit_layout)
        .iconViewId(R.id.admob_ad_app_icon)
        .headlineViewId(R.id.admob_ad_headline)
        .bodyViewId(R.id.admob_ad_body)
        .mediaViewId(R.id.admob_ad_media)
        .callToActionId(R.id.admob_ad_call_to_action)
        .advertiserViewId(R.id.admob_ad_advertiser)
        .priceViewId(R.id.admob_ad_price)
        .starRatingViewId(R.id.admob_ad_stars)
        .storeViewId(R.id.admob_ad_store)
        .build();
adPopcornSSPNativeAd.setADOPViewBinder(adopViewBinder);

주의> viewBinder Builder 생성 시, view id(R.id.admob_unified_native_ad_view)와 layout id(R.layout.admob_native_ad_unit_layout)는 필수로 넘겨주어야 하며, 그 외 ui component에 대해서는 사용하는 리소스에 대해서만 설정해 주면 됩니다.
아래 링크의 가이드를 준수해야 하며 광고 표시는 수동으로 추가해 주어야 합니다.

https://support.google.com/admob/answer/6329638

3.4 Mintegral

mintegral_native_ad_unit_layout.xml 샘플

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="<http://schemas.android.com/apk/res/android>"
    android:id="@+id/mintegral_native_outer_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/white"
    android:textDirection="locale">
    <ImageView
        android:id="@+id/mintegral_native_icon_image"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="10dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="10dp"
        android:background="@null"
        android:contentDescription="@null" />
    <TextView
        android:id="@+id/mintegral_native_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="84dp"
        android:layout_marginStart="84dp"
        android:layout_marginTop="32dp"
        android:textColor="@android:color/darker_gray"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/mintegral _native_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/ mintegral _native_icon_image"
        android:layout_marginLeft="10dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="10dp"
        android:textColor="@android:color/darker_gray" />

    <ImageView
        android:id="@+id/mintegral_native_main_image"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/mintegral_native_text"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp"
        android:background="@null"
        android:scaleType="centerCrop" />

    <Button
        android:id="@+id/mintegral_native_cta"
        android:layout_width="wrap_content"
        android:layout_height="35dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/mintegral_native_main_image"
        android:layout_marginEnd="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp"
        android:clickable="true"
        android:focusable="true"
        android:paddingBottom="10dp"
        android:textColor="@android:color/black"
        android:textSize="12sp"
        android:textStyle="bold" />

    <com.mbridge.msdk.widget.MBAdChoice
        android:id="@+id/mintegral_ad_choice"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:padding="10dp" />

</RelativeLayout>

xml에서 생성한 ui component를 sdk에서 제공하는 setAdMobViewBinder API를 이용해 아래와 같이 설정해 줍니다.

MintegralViewBinder mintegralViewBinder 
= new MintegralViewBinder.Builder(R.id.mintegral_native_ad_view, R.layout.mintegral_native_ad_unit_layout)
        .mainImageViewId(R.id.mintegral_native_main_image)
        .iconViewId(R.id.mintegral_native_icon_image)
        .titleViewId(R.id.mintegral_native_title)
        .descViewId(R.id.mintegral_native_text)
        .adCallViewId(R.id.mintegral_native_cta)
        .adChoiceViewId(R.id.mintegral_ad_choice)
        .build();
adPopcornSSPNativeAd.setMintegralViewBinder(mintegralViewBinder);

주의> MintegralViewBinder Builder 생성 시, view id(R.id.mintegral_native_ad_view)와 layout id(R.layout.mintegral_native_ad_unit_layout)는 필수로 넘겨주어야 하며, 그 외 ui component에 대해서는 사용하는 리소스에 대해서만 설정해 주면 됩니다.

3.5 AdFit-Native

adfit_native_ad_unit_layout.xml 샘플

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="<http://schemas.android.com/apk/res/android>"
    xmlns:tools="<http://schemas.android.com/tools>"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="3dp"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/adfit_profile_icon_view"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:contentDescription="AD Profile Icon"
            tools:src="@mipmap/ic_launcher" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="7dp"
            android:layout_marginRight="7dp"
            android:gravity="center_vertical"
            android:orientation="vertical">

            <TextView
                android:id="@+id/adfit_title_view"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textStyle="bold"
                tools:text="AD Title" />

            <TextView
                android:id="@+id/adfit_profile_name_view"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                tools:text="AD Profile Name" />
        </LinearLayout>
    </LinearLayout>

    <com.kakao.adfit.ads.na.AdFitMediaView
        android:id="@+id/adfit_media_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="3dp" />

    <TextView
        android:id="@+id/adfit_body_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="3dp"
        tools:text="AD Description" />

    <Button
        android:id="@+id/adfit_call_to_action_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:text="AD Call To Action Button" />
</LinearLayout>

xml에서 생성한 ui component를 sdk에서 제공하는 setAdFitViewBinder API를 이용해 아래와 같이 설정해 줍니다.

AdFitViewBinder adFitViewBinder = new AdFitViewBinder.Builder(R.id.adFitNativeAdView, R.layout.adfit_native_ad_unit_layout)
        .titleViewId(R.id.adfit_title_view)
        .bodyViewId(R.id.adfit_body_view)
        .profileIconViewId(R.id.adfit_profile_icon_view)
        .profileNameViewId(R.id.adfit_profile_name_view)
        .callToActionButtonId(R.id.adfit_call_to_action_button)
        .mediaViewId(R.id.adfit_media_view)
				.testMode(false)
        .build();
adPopcornSSPNativeAd.setAdFitViewBinder(adFitViewBinder);

주의> AdFitViewBinder Builder 생성 시, view id(R.id.adFitNativeAdView)와 layout id(R.layout.adfit_native_ad_unit_layout)는 필수로 넘겨주어야 하며, 그 외 ui component에 대해서는 사용하는 리소스에 대해서만 설정해 주면 됩니다.
테스트 광고 송출을 원할 경우, testMode에 true 값을 전달하여 준다.

3.6 AdFit-Bizboard

AdFit 비즈보드 스타일의 경우 UI 템플릿을 직접 설정할 필요가 없기에 native_ad_mediation_layout.xml 파일 안에 영역만 지정해 주면 됩니다.

그리고 지정한 영역을 아래와 같이 AdFitViewBinder를 통해 BizBoard 영역이라고 설정합니다.

AdFitViewBinder adFitViewBinder = new AdFitViewBinder.Builder(R.id.adFitNativeAdView)
                .bizBoardAd(true)
                .build();
adPopcornSSPNativeAd.setAdFitViewBinder(adFitViewBinder);

주의> AdFitViewBinder Builder 생성 시, view id(R.id.adFitNativeAdView)는 필수로 넘겨주어야 하며, bizBoardAd(true)를 반드시 설정해야 합니다.

3.7 Mobon

mobon_native_ad_unit_layout.xml 샘플

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="<http://schemas.android.com/apk/res/android>"
    android:id="@+id/mobon_container"
    android:layout_width="match_parent"
    android:layout_height="227dp"
    android:layout_centerInParent="true"
    android:background="#fff"
    android:padding="10dp">

    <ImageView
        android:id="@+id/mobon_content_iv"
        android:layout_width="140dp"
        android:layout_height="140dp"
        android:layout_above="@+id/mobon_logo_iv"
        android:layout_centerVertical="true"
        android:layout_marginBottom="20dp"
        android:layout_marginLeft="20dp"
        android:adjustViewBounds="true" />

    <TextView
        android:id="@+id/mobon_desc_tv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="45dp"
        android:layout_toRightOf="@+id/mobon_content_iv"
        android:ellipsize="end"
        android:maxLines="2"
        android:textSize="18dp" />

    <TextView
        android:id="@+id/mobon_price_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_above="@+id/mobon_logo_iv"
        android:layout_marginRight="25dp"
        android:layout_marginBottom="20dp"
        android:textColor="#f00"
        android:textSize="22dp"
        android:textStyle="bold" />

    <ImageView
        android:id="@+id/mobon_logo_iv"
        android:layout_width="40dp"
        android:layout_height="19dp"
        android:layout_alignParentBottom="true" />

    <TextView
        android:id="@+id/mobon_title_tv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_toRightOf="@+id/mobon_logo_iv"
        android:layout_marginLeft="5dp"
        android:ellipsize="end"
        android:lines="1"
        android:textSize="16dp" />
</RelativeLayout>

xml에서 생성한 ui component를 sdk에서 제공하는 setMobonViewBinder API를 이용해 아래와 같이 설정해 줍니다.

MobonViewBinder mobonViewBinder = new MobonViewBinder.Builder(R.id.mobon_native_ad_view, R.layout.mobon_native_ad_unit_layout)
        .titleViewId(R.id.mobon_title_tv)
        .mainImageViewId(R.id.mobon_content_iv)
        .logoImageViewId(R.id.mobon_logo_iv)
        .descViewId(R.id.mobon_desc_tv)
        .priceViewId(R.id.mobon_price_tv)
        .build();
adPopcornSSPNativeAd.setMobonViewBinder(mobonViewBinder);

주의> MobonViewBinder Builder 생성 시, view id(R.id.mobon_native_ad_view)와 layout id(R.layout.mobon_native_ad_unit_layout)는 필수로 넘겨주어야 하며, 그 외 ui component에 대해서는 사용하는 리소스에 대해서만 설정해 주면 됩니다.

3.8 Pangle

pangle_native_ad_unit_layout.xml 샘플

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="<http://schemas.android.com/apk/res/android>"
    xmlns:tools="<http://schemas.android.com/tools>"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/pangle_native_title"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:singleLine="true"
        android:textColor="@color/black"
        android:text="pangle_native_title"
        android:textSize="14sp" />

    <FrameLayout
        android:id="@+id/pangle_native_media_view"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_below="@id/pangle_native_title"
        android:layout_marginBottom="5dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:background="@color/ads_blue_600"
        android:scaleType="centerCrop" />

    <ImageView
        android:id="@+id/pangle_native_icon_image"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_below="@id/pangle_native_media_view"
        android:layout_marginLeft="10dp"
        android:layout_marginStart="10dp" />

    <TextView
        android:id="@+id/pangle_native_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/pangle_native_media_view"
        android:layout_toRightOf="@id/pangle_native_icon_image"
        android:layout_toEndOf="@id/pangle_native_icon_image"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="5dp"
        android:layout_marginStart="5dp"
        android:layout_marginTop="15dp"
        android:ellipsize="end"
        android:singleLine="true"
        android:textColor="@color/black"
        android:text="pangle_native_text"
        android:textSize="14sp" />

    <Button
        android:id="@+id/pangle_native_cta"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="3dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_marginRight="14dp"
        android:layout_marginEnd="14dp"
        android:text="pangle_native_cta"
        android:background="@null"
        android:layout_alignTop="@+id/pangle_native_text"
        android:textSize="10sp"
        />
</RelativeLayout>

xml에서 생성한 ui component를 sdk에서 제공하는 setPangleViewBinderAPI를 이용해 아래와 같이 설정해 줍니다.

PangleViewBinder pangleViewBinder = new PangleViewBinder.Builder(R.id.pangle_native_ad_view, R.layout.pangle_native_ad_unit_layout)
        .titleViewId(R.id.pangle_native_title)
        .descriptionViewId(R.id.pangle_native_text)
        .iconViewId(R.id.pangle_native_icon_image)
        .mediaViewId(R.id.pangle_native_media_view)
        .creativeButtonViewId(R.id.pangle_native_cta)
        .build();
adPopcornSSPNativeAd.setPangleViewBinder(pangleViewBinder);

주의> PangleViewBinderBuilder 생성 시, view id(R.id.pangle_native_ad_view)와 layout id(R.layout.pangle_native_ad_unit_layout)는 필수로 넘겨주어야 하며, 그 외 ui component에 대해서는 사용하는 리소스에 대해서만 설정해 주면 됩니다.

3.9 NAM - Native Simple Ad

NAM의 경우 Simple Ad만 제공하고 있기에 UI 템플릿을 직접 설정할 필요가 없으며native_ad_mediation_layout.xml 파일 안에 GfpNativeSimpleAdView View 영역만 지정해 주면 됩니다.

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

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

주의> NAMViewBinder Builder 생성 시, view id(R.id.gfp_native_simple_ad)는 필수로 넘겨주어야 합니다. useNativeSimpleView의 기본 값은 true로 변경되었습니다.