Android 네이티브 광고

1. xml 으로 네이티브 광고 레이아웃 만들기

네이티브 광고에서는 다음과 같은 view의 종류들이 포함될 수 있습니다.

• 아이콘

• 광고 게시자

• 헤드라인

• 바디

• 미디어

• CTA 버튼

예를 들어, 소셜 피드 형식의 네이티브 광고를 구성한다면 다음과 같은 레이아웃을 만들 수 있습니다.

• AdropNativeAdView - parent view

  ⌞ Logo (ImageView)

  ⌞ Name (TextView)

  ⌞ Media (AdropMediaView)

  ⌞ Headline (TextView) ⌞ Body (TextView)

• 제목, 내용, 소재 이미지는 컴포넌트를 제공하지만 자유롭게 사용하실 수 있도록 필드 데이터를 제공합니다.

<io.adrop.ads.nativeAd.AdropNativeAdView
    android:id="@+id/adrop_native_ad_view"
    ...>
    <LinearLayout
        android:orientation="horizontal"
        ... >
          <ImageView
           android:id="@+id/ad_icon"
           ... />
          <TextView
            android:id="@+id/ad_advertiser"
            ... />
     </LinearLayout>

   <io.adrop.ads.nativeAd.AdropMediaView
       android:id="@+id/ad_media"
       ... />

    <TextView
        android:id="@+id/ad_headline"
        ... />
    
    <TextView
        android:id="@+id/ad_body"
        ... />
</LinearLayout>

2. 네이티브 광고 불러오기

로컬 환경에서 배너 노출을 확인하고 싶다면, 아래의 TEST_UNIT_ID를 사용해주세요.

자세한 예시는 Github에서 확인하실 수 있습니다. 테스트 유닛 아이디는 프로덕션 배포시 반드시 실제 광고 유닛으로 교체해 주셔야 합니다.

Ad type	Ad unit ID
Native	PUBLIC_TEST_UNIT_ID_NATIVE

Kotlin

val nativeAd = AdropNativeAd(context, "YOUR_UNIT_ID OR TEST_UNIT_ID")
nativeAd.listener = object: AdropNativeAdListener {
    override fun onAdReceived(ad: AdropNativeAd) {
        Log.d("adrop", "AdropNativeAd receive ${ad.creativeId}")
        populateNativeAdView(ad)
    }
    
    override fun onAdFailedToReceive(ad: AdropNativeAd, errorCode: AdropErrorCode) {
        Log.d("adrop", "AdropNativeAd failed to receive $errorCode")
    }
    
    override fun onAdClicked(ad: AdropNativeAd) {
        Log.d("adrop", "AdropNativeAd clicked")
    }
}
nativeAd.load()

Java

AdropNativeAd nativeAd = new AdropNativeAd(context, "YOUR_UNIT_ID");
nativeAd.setListener(new AdropNativeAdListener() {
    @Override
    public void onAdReceived(@NotNull AdropNativeAd ad) {
        Log.d("adrop", "AdropNativeAd received" + ", " + ad.getCreativeId());    
        populateNativeAdView(ad);
    }
    
    @Override
    public void onAdFailedToReceive(@NotNull AdropNativeAd ad, @NotNull AdropErrorCode errorCode) {
        Log.d("adrop", "AdropNativeAd failed to receive " + errorCode);
    }
    
    @Override
    public void onAdClick(@NotNull AdropNativeAd ad) {
        Log.d("adrop", "AdropNativeAd clicked");    
    }
});
nativeAd.load();

3. 네이티브 광고 연결 후 조회하기

AdropNativeAdView 의 예시와 이것을 populate한 AdropNativeAd 의 예시를 보여드립니다.

Kotlin

val adView: AdropNativeAdView = findViewById(R.id.adrop_native_ad_view)

fun populateNativeAdView(ad; AdropNativeAd) {
    val imageVIew = findViewById<ImageView>(R.id.ad_icon)
    // set ad.profile.displayLogo into imageView
    adView.setProfileLogoView(imageVIew)
    
    val nameView = findViewById<TextView>(R.id.ad_advertiser)
    nameView.text = ad.profile.displayName
    adView.setProfileNameView(nameView)
    
    val bodyView = findViewById<TextView>(R.id.ad_body)
    bodyView.text = ad.body
    adView.setBodyView(bodyView)
    
    val headlineView = findViewById<TextView>(R.id.ad_headline)
    headlineView.text = ad.headline
    adView.setHeadlineView(headlineView)
    
    adView.setMediaView(findViewById(R.id.ad_media))
    ...
    
    // AdropNativeAdView의 setNativeAd 메소드를 호출하여 AdropNativeAd를 등록합니다.
    adView.setNativeAd(ad)
    
    ...
}

Java

AdropNativeAdView adView = findViewById(R.id.adrop_native_ad_view);

void populateNativeAdView(AdropNative ad) {
    ImageView imageView = findViewById(R.id.ad_icon);
    // set ad.getProfile().getDisplayLogo() into imageView
    adView.setProfileLogoView(imageView, null);
    
    TextView nameView = findViewById(R.id.ad_advertiser);
    nameView.setText(ad.getProfile().getDisplayName());
    adView.setProfileNameView(nameView, null);

    TextView headlineView = findViewById(R.id.ad_headline);
    headlineView.setText(ad.getHeadline());
    adView.setHeadLineView(headlineView, null);    

    TextView bodyView = findViewById(R.id.ad_body);
    bodyView.setText(ad.getBody());
    adView.setBodyView(bodyView);
    
    adView.setMediaView(findViewById(R.id.ad_media));
    ...
    
    // AdropNativeAdView의 setNativeAd 메소드를 호출하여 AdropNativeAd를 등록합니다.
    adView.setNativeAd(ad);
    
    ...
}

4. 커스텀 필드 데이터 추가 및 자유로운 이미지 소재 사용하기

예를 들어, t1, t2, t3 라는 커스텀 필드가 추가 되었을 경우에 대해 알아보겠습니다. * 텍스트 라벨은 광고주 콘솔에 입력되는 라벨입니다.

Kotlin

findViewById<TextView>(R.id.t1).text = ad.extra.optString("t1")
findViewById<TextView>(R.id.t2).text = ad.extra.optString("t2")
findViewById<TextView>(R.id.t3).text = ad.extra.optString("t3")

Java

((TextView) findViewById(R.id.t1)).setText(nativeAd.getExtra().optString("t1"));
((TextView) findViewById(R.id.t2)).setText(nativeAd.getExtra().optString("t2"));
((TextView) findViewById(R.id.t3)).setText(nativeAd.getExtra().optString("t3"));

네이티브 광고 Destroy

AdropNativeAd 노출을 종료한다면, 네이티브 광고가 garbage collection 되도록 다음과 같이 destroy해야합니다.

Kotlin

nativeAd.destroy()
adView.destroy()

Java

nativeAd.destroy();
adView.destroy();

적용 확인하기

console에서 발급받은 unitId가 한 번이라도 request 가 들어가면 성공적으로 연결됩니다.

광고 유닛에 연결된 광고가 없다면, 배너가 랜더링 되지 않습니다. 따라서 배너가 정상적으로 랜더링 되는지 확인하고 싶으면, TEST_UNIT_ID 를 사용해 주세요.

TEST_UNIT_ID 를 사용하면 배너 랜더링 확인은 할 수 있지만, console과 연결되지는 않습니다. 따라서 성공적인 연결을 확인하려면 콘솔에 등록한 광고 유닛의 아이디를 적용해 주시고, 하단 이미지 처럼 콘솔을 확인해 주세요.