Pangle

Pangle 네이티브 미디에이션 레이아웃 구성

미디에이션 설정

Pangle

네이티브 광고 노출을 위해서는 사용하는 광고 네트워크의 미디에이션 연동 작업이 필요합니다.

---

Layout

레이아웃 구성 샘플(native_ad_unit_pangle.xml)

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

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

    <FrameLayout
        android:id="@+id/native_unit_pangle_media"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_below="@id/native_unit_pangle_title"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginBottom="5dp"
        android:scaleType="centerCrop" />

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

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

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

</RelativeLayout>

---

ViewAdapter

XML에서 생성한 UI Component를 SDK에서 제공하는 ViewAdapter API를 사용하여 다음과 같이 설정해 줍니다.

KOTLIN

// NativeViewAdapter
val builder = NativeViewAdapter.Builder()

builder.setPangleViewAdapter(
  viewAdapter = PangleNativeViewAdapter.Builder(
    nativeAdLayoutId = R.layout.native_ad_unit_pangle,
    nativeAdViewId = R.id.native_unit_pangle_container
  )
  .setIconViewId(R.id.native_unit_pangle_icon)
  .setTitleViewId(R.id.native_unit_pangle_title)
  .setCreativeButtonViewId(R.id.native_unit_pangle_cta)
  .setDescriptionViewId(R.id.native_unit_pangle_text)
  .setMediaViewId(R.id.native_unit_pangle_media)
  .build()
)

// NativeAdLoader
NativeAdLoader(
  context = ...,
  placementId = ...,
  viewAdapter = builder.build(),
  listener = ...
)

JAVA

// NativeViewAdapter
final NativeViewAdapter.Builder builder = new NativeViewAdapter.Builder();

// Pangle
builder.setPangleViewAdapter(
  new PangleNativeViewAdapter.Builder(
    // nativeAdLayoutId
    R.layout.native_ad_unit_pangle,
    // nativeAdViewId
    R.id.native_unit_pangle_container
  )
  .setIconViewId(R.id.native_unit_pangle_icon)
  .setTitleViewId(R.id.native_unit_pangle_title)
  .setCreativeButtonViewId(R.id.native_unit_pangle_cta)
  .setDescriptionViewId(R.id.native_unit_pangle_text)
  .setMediaViewId(R.id.native_unit_pangle_media)
  .build()
);

// NativeAdLoader
NativeAdLoader(
  /** Context **/
  context,
  /** PlacementId **/
  placementId,
  /** NativeViewAdapter **/
  builder.build(),
  /** NativeAdLoader.NativeListener **/
  listener
);