...

다음은 쇼핑 적립 광고의 디자인을 변경하는 방법을 설명합니다. 쇼핑 적립 광고는 일반 광고에 비해 많은 정보를 제공합니다.

Image Modified

쇼핑 적립 광고용 NativeAdView의 규격에 맞는 레이아웃(your_feed_ad_cps.xml)을 구현합니다. 일반 광고용 레이아웃에 없는 priceText, originalPriceText, discountPercentageText, categoryText 가 있습니다.

...

// your_feed_ad_cps.xml

<?xml version="1.0" encoding="utf-8"?>
<com.buzzvil.buzzad.benefit.presentation.nativead.NativeAdView
    android:id="@+id/native_ad_view"
    ...생략... >
    <LinearLayout
        ...생략... >
        
        // MediaView와 CtaView는 NativeAdView의 하위 컴포넌트로 구현해야합니다.
        
        <com.buzzvil.buzzad.benefit.presentation.media.MediaView
            android:id="@+id/mediaView"
            ...생략... />
            
        ...생략...
    
        <TextView
            android:id="@+id/priceText"
            ...생략... />
        <TextView
            android:id="@+id/originalPriceText"
            ...생략... />
        <TextView
            android:id="@+id/discountPercentageText"
            ...생략... />
        <TextView
            android:id="@+id/categoryText"
            ...생략... />
            
        ...생략...
        
    </LinearLayout>
    ...생략...
</com.buzzvil.buzzad.benefit.presentation.nativead.NativeAdView>

...

final FeedConfig feedConfig = new FeedConfig.Builder(context, "YOUR_FEED_UNIT_ID")
      .feedFeedbackHandler(YourFeedFeedbackHandler.class)
      .build();

광고 미할당 안내 디자인 자체 구현하기

Feed 지면에 진입한 시점에 노출할 광고가 없다면 광고 미할당 안내 UI가 표시됩니다. 미할당 안내 디자인은 자체 구현하여 변경할 수 있습니다.

...

광고 미할당 안내 디자인을 직접 구현하려면 다음의 절차를 따르세요.

1. Feed 지면에 광고가 할당되지 않았을 때의 화면에 추가할 에러 이미지(feedErrorImageView), 타이틀(feedErrorTitle), 상세 설명(feedErrorDescription) 레이아웃을 작성하세요.

   Code Block

   <!-- custom_feed_error_view.xml --> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_vertical" android:orientation="vertical" android:padding="40dp"> <ImageView android:id="@+id/feedErrorImageView" android:layout_width="match_parent" android:layout_height="wrap_content"/> <TextView android:id="@+id/feedErrorTitle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="32dp" android:textColor="@color/bz_text_emphasis" android:textSize="16sp" /> <TextView android:id="@+id/feedErrorDescription" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="8dp" android:textAlignment="center" android:textColor="@color/bz_text_description" android:textSize="14sp" /> </LinearLayout>

2. FeedErrorViewHolder를 구현하는 커스텀 클래스 CustomErrorView를 새로 생성하고, 자동 완성되는 GetView() 메소드를 다음과 같이 구현하세요.

   Code Block

   public class CustomErrorView extends FeedErrorViewHolder { @NonNull @Override public View getErrorView(@NonNull Activity activity) { // TODO: 1번에서 생성한 custom_feed_error_view 레이아웃을 inflate View errorView = activity.getLayoutInflater().inflate(R.layout.custom_feed_error_view, null, false); final ImageView errorImageView = errorView.findViewById(R.id.feedErrorImageView); final TextView errorTitle = errorView.findViewById(R.id.feedErrorTitle); final TextView errorDescription = errorView.findViewById(R.id.feedErrorDescription); errorImageView.setImageResource(R.drawable.bz_ic_feed_profile_coin); // 에러 이미지 설정 errorTitle.setText("타이틀: 광고가 없습니다. "); // 에러 타이틀 텍스트 설정 errorDescription.setText("디스크립션: 할당된 광고가 없습니다!"); // 에러 상세 텍스트 설정 return errorView; } }

3. FeedConfig의 feedErrorViewHolderClass 속성에 이전 단계에서 생성한 CustomErrorView 클래스를 추가하세요.

   Code Block
   // Feed 지면 초기화 // TODO: feedErrorViewHolderClass 속성에 2번에서 생성한 CustomErrorView 클래스를 설정합니다. final FeedConfig feedConfig = new FeedConfig.Builder(YOUR_FEED_UNIT_ID) .feedErrorViewHolderClass(CustomErrorView.class) .build();

액션형 광고의 브릿지 페이지에 배너 광고 지면 추가

...