네이티브 광고 레이아웃 구성 가이드

본 가이드 문서는 애드팝콘 SSP만을 사용하여 네이티브 광고의 레이아웃을 구성할 경우에 필요한 가이드입니다. 네이티브 미디에이션 광고의 레이아웃 구성은 [네이티브 광고 미디에이션 레이아웃 가이드] 문서를 참고하시기 바랍니다.

SDK 3.1.9 버전부터는 네이티브 템플릿을 지원합니다. 이에 직접 설정과 템플릿 사용 방식 중, 원하는 방식으로 연동을 진행하시면 됩니다.

직접 설정

네이티브 XML 레이아웃(native_ad_layout.xml)

AdPopcornSSPNativeAd View 안에 사용하고자 하는 UI component를 아래 샘플과 같이 추가합니다.

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center"
        android:id="@+id/apssp_native_ad_view"
        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>
</com.igaworks.ssp.part.nativead.AdPopcornSSPNativeAd>

: AdPopcornSSPNativeAd ViewGroup 안에 AdPopcorn SSP에서 지원하는 5가지 asset의 레이아웃 을 구성한 뒤, native_ad_layout.xml을 네이티브 광고를 노출하고자 하는 Main Layout에 추가하여 사용한다.

Native Asset 연결

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

AdPopcornSSPViewBinder apsspViewBinder 
= new AdPopcornSSPViewBinder.Builder(R.id.adpopcorn_native_ad_view)
        .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)
				.privacyIconPosition(AdPopcornSSPNativeAd.PrivacyIconPosition.BOTTOM_LEFT)
        .privacyIconWidth(15)
        .privacyIconHeight(15)
        .privacyIconLeftRightMargin(2)
        .privacyIconTopBottomMargin(2)
        .build();

adpopcornSSPNativeAd.setAdpopcornSSPViewBinder(igawViewBinder);

주의> AdPopcornSSPViewBinder Builder 생성 시, view id(R.id.adpopcorn_native_ad_view)와 layout id(R.layout.adpopcorn_native_ad_unit_layout)는 필수로 넘겨주어야 하며, 그 외 ui component에 대해서는 사용하는 리소스에 대해서만 설정해 주면 됩니다.
privacyIcon 관련한 값들은 필수 설정 값이 아니며, 커스터마이징 하고자 할 경우, 세팅하여 사용하시면 됩니다.

privacyIconWidth, privacyIconHeight, LeftRightMargin, TopBottomMargin 에 입력되는 숫자는 모두 dp 기준으로 적용해 주시면 됩니다. 또한, 위에 샘플 코드에 나와 있는 값은 default 값이기에 해당 값을 변경하지 않을 경우, 세팅하지 않아도 됩니다.

템플릿 사용

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>