네이티브 광고

네이티브 광고 형태 소개

광고 뷰를 미디에이션 SDK가 구현해주는 타 광고 형태와 달리 네이티브 광고 형태는 구성 요소들을 전달받아 앱에서 직접 광고 뷰를 구현합니다.
UI/UX 기반으로 레이아웃을 직접 구현하므로써 위화감을 적게 만들 수 있다는 것이 가장 큰 특징입니다. 단, 유저가 광고가 아닌 컨텐츠로써 착각하는 경우를 방지하기 위해 광고 표시와 함께 최소한의 차별성은 부여해야합니다.

광고 연동하기

Xml
Compose

adBinder 생성

native 광고를 render하는데 필요한 adBinder를 생성합니다.

Manual implementation(xml)
Use Template

val adBinder = DaroNativeAdBinder.Builder(context, ${layoutId})
  .setIconViewId(${iconViewId})
  .setBodyTextViewId(${bodyViewId})
  .setCallToActionViewId(${callToActionViewId})
  .setMediaViewGroupId(${mediaViewGroupId})
  .setTitleViewId(${titleViewId})
  .build()

Show Example

layout_native.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:paddingStart="24dp"
  android:paddingTop="16dp"
  android:paddingEnd="24dp"
  android:paddingBottom="12dp">
  
  <ImageView
    android:id="@+id/view_icon"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:layout_marginEnd="8dp"
    app:layout_constraintBottom_toBottomOf="@id/view_body"
    app:layout_constraintEnd_toStartOf="@id/view_title"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@id/view_title" />
  
  <TextView
    android:id="@+id/view_title"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:ellipsize="end"
    android:maxLines="1"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@id/view_icon"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="Title은 최대 1줄까지입니다." />
  
  <TextView
    android:id="@+id/view_body"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="4dp"
    android:ellipsize="end"
    android:lines="2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="@id/view_title"
    app:layout_constraintTop_toBottomOf="@id/view_title"
    tools:text="설명도 2줄까지만 노출합니다. 2줄 넘을.." />
  
  <TextView
    android:id="@+id/button_cta"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:paddingStart="8dp"
    android:paddingTop="4dp"
    android:paddingEnd="8dp"
    android:paddingBottom="4dp"
    app:layout_constraintBottom_toTopOf="@+id/view_media"
    app:layout_constraintEnd_toEndOf="parent"
    tools:text="Open" />
  
  <FrameLayout
    android:id="@+id/view_media"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:layout_marginTop="20dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toBottomOf="@id/view_body" />
</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.kt

val adBinder = DaroNativeAdBinder.Builder(this, droom.daro.m.R.layout.layout_native)
  .setIconViewId(droom.daro.m.R.id.view_icon)
  .setBodyTextViewId(droom.daro.m.R.id.view_body)
  .setCallToActionViewId(droom.daro.m.R.id.button_cta)
  .setMediaViewGroupId(droom.daro.m.R.id.view_media)
  .setTitleViewId(droom.daro.m.R.id.view_title)
  .build()

val adBinder = DaroNativeAdBinder.fromTemplate(
    context,
    DaroNativeAdTemplate.Banner(
      ...
    )
  )

adUnit 생성

  val adUnit = DaroNativeAdUnit(
    key = ${key},
    placement = ${placement}, //로그 상 보여질 이름입니다. 공백을 보내도 무관합니다.
    adBinder = adBInder
  )

adView 생성 및 뷰에 추가

val adView = DaroNativeAdView(
  context = context,
  adUnit = adUnit
)

binding.adViewContainer.addView(adView)

리스너 설정

adView.setListener(object : DaroAdViewListener {
  override fun onAdImpression(adInfo: DaroAdInfo) {}
  override fun onAdClicked(adInfo: DaroAdInfo) {}
  override fun onAdLoadSuccess(ad: DaroViewAd, adInfo: DaroAdInfo) {}
  override fun onAdLoadFail(err: DaroAdLoadError) {}
})

광고 로드

adView.loadAd()

뷰를 선언하면 자체적으로 화면에 맞는 라이프사이클을 찾아 동작을 관리합니다. 따로 resume, pause, destroy를 호출하지 않아도 됩니다.
autoDetectLifecycle 값을 false(default: true)로 설정하는 경우, resume, pause, destroy를 직접 호출해주셔야 합니다.

DaroNative(
  adUnitId = APPLOVIN_NATIVE,
   listener = object : DaroAdViewListener {
    override fun onAdImpression(adInfo: DaroAdInfo) {}
    override fun onAdClicked(adInfo: DaroAdInfo) {}
    override fun onAdLoadSuccess(ad: DaroViewAd, adInfo: DaroAdInfo) {}
    override fun onAdLoadFail(err: DaroAdLoadError) {}
  },
  modifier = Modifier
) {
  DaroNativeAdTitle { title -> Text(title) } // for title
  DaroNativeAdBody { body -> Text(body) } // for body
  DaroNativeCallToAction { callToAction -> Text(callToAction) } // for callToAction
  DaroNativeIcon(modifier = Modifier.size(40.dp)) // for ImageView
  DaroNativeMedia(modifier = Modifier.size(100.dp)) // for MedaiView
}

Template

Daro SDK에서는 다음과 같은 template을 제공합니다.

Show Line

backgroundColor

Int

전체 배경색

contentColor

Int

콘텐츠 텍스트 색상

adMarkLabelBackgroundColor

Int

광고 마크 배경색

adMarkLabelTextColor

Int

광고 마크 텍스트 색상

Show LineCenter

backgroundColor

Int

전체 배경색

contentColor

Int

콘텐츠 텍스트 색상

adMarkLabelBackgroundColor

Int

광고 마크 배경색

adMarkLabelTextColor

Int

광고 마크 텍스트 색상

Show Banner

backgroundColor

Int

전체 배경색

titleColor

Int

타이틀 텍스트 색상

descriptionColor

Int

설명 텍스트 색상

ctaBackgroundColor

Int

CTA(버튼) 배경색

ctaTextColor

Int

CTA(버튼) 텍스트 색상

adMarkLabelTextColor

Int

하단 광고 마크 텍스트 색상

다로 시작하기

SDK 통합하기

DARO 사용하기

FAQ

네이티브 광고