앱 UI에 진입 경로 추가

BuzzAd Android용 SDK가 제공하는 피드 진입 경로 이외에도 앱 화면의 아이콘, 버튼, 배너 등 레이아웃 UI에 뷰를 직접 구현하여 피드로 진입하는 경로를 만들 수 있습니다.

진입 경로를 생성할 수 있는 UI 컴포넌트의 예시는 아래 다이어그램을 참고하세요. 또한 샘플 앱에서 제공하는 다양한 커스텀 진입 경로들의 샘플 코드를 확인해 보세요.

준비 사항

• 피드 지면 기본 설정 완료

⚠️  주의
진입 경로의 정상적인 동작을 위해서는 피드 지면 초기화 토픽의 설명에 따라 반드시 BuzzAdBenefitConfig에 FeedConfig를 추가해야 합니다.

진입 경로 추가하기

액티비티, 프래그먼트, 뷰 내부 등에 피드 진입 경로를 생성할 수 있습니다. 피드 진입 경로를 UI 레이아웃에 추가하려면 UI 레이아웃을 구현한 후 FeedEntryView ViewGroup을 추가하세요.

XML로 진입 경로 구현하기

다음은 your_image를 눌렀을 때 피드 지면이 열리도록 XML로 진입 경로를 구현한 예시입니다.

<?xml version="1.0" encoding="utf-8"?>
<!--  FeedEntryView을 추가합니다. -->
<com.buzzvil.buzzad.benefit.presentation.feed.entrypoint.FeedEntryView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:buzzvilFeedEntryViewName="your_custom_entry_point_1"> // 뷰에 대한 사용자 반응 추적
    
<!--  직접 UI를 구현합니다.  -->
   <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/your_image"
      />

</com.buzzvil.buzzad.benefit.presentation.feed.entrypoint.FeedEntryView>

액티비티에 동적으로 진입 경로 구현하기

레이아웃

다음은 res/layout 하위의 레이아웃 파일(feed_entry_point.xml)에 진입 경로를 동적으로 구현한 예시입니다.

<?xml version="1.0" encoding="utf-8"?>
<!--  FeedEntryView를 추가합니다. -->
<com.buzzvil.buzzad.benefit.presentation.feed.entrypoint.FeedEntryView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:buzzvilFeedEntryViewName="your_custom_entry_point_1"> // 뷰에 대한 사용자 반응 추적

<!--  직접 UI를 구현합니다.  -->
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/your_image" 
        />

</com.buzzvil.buzzad.benefit.presentation.feed.entrypoint.FeedEntryView>

액티비티 레이아웃

다음은 res/layout 하위의 액티비티 레이아웃 파일에 진입 경로를 동적으로 구현한 예시입니다.

<FrameLayout
    android:id="@+id/entryPointPlaceholder"/>

액티비티 코드

다음은 액티비티 소스 코드 파일에 진입 경로를 동적으로 구현한 예시입니다.

final ViewGroup parent = findViewById(R.id.entryPointPlaceholder);
final FeedEntryView entryView = (FeedEntryView) getLayoutInflater().inflate(R.layout.feed_entry_point, null);
entryView.setFeedEntryViewName("your_custom_entry_point_1"); // 뷰에 대한 사용자 반응 추적
parent.addView(entryView);

적립 가능한 포인트 표시하기

아래 그림과 같이 적립 가능한 포인트를 표시하여 아직 피드에 진입하지 않은 사용자의 참여율을 높일 수 있습니다.

적립 가능한 포인트를 사용자에게 미리 보여 주려면, 아래 순서대로 구현하세요.

1. 피드 광고를 할당하기 위해 buzzAdFeed.load()를 호출하세요.
2. 광고 할당이 성공하면 onSuccess() 콜백 이벤트가 호출됩니다.

• 광고 할당 및 표시하기 토픽을 참고하세요.

3. onSuccess() 콜백 이벤트에서 buzzAdFeed.getAvailableRewards()를 호출하면, 적립 가능한 총 포인트 금액을 조회할 수 있습니다.
4. 위에서 조회한 적립 가능한 총 포인트 금액 값으로 뷰를 업데이트하세요.

다음은 onResume()을 실행할 때마다 피드를 새로 고침하고 뷰를 업데이트하는 예시입니다.

✏️  참고
사용자가 광고에 참여하여 리워드를 받거나 피드를 아래로 스크롤하여 새로운 광고를 불러올 경우, 피드 진입 뷰에 표시된 적립 가능한 포인트 값과 실제로 적립 가능한 포인트 값에 차이가 발생할 수도 있습니다.

private BuzzAdFeed buzzAdFeed;

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity);
    buzzAdFeed = new BuzzAdFeed.Builder().build();
}

@Override
protected void onResume() {
    super.onResume();

    buzzAdFeed.load(new BuzzAdFeed.FeedLoadListener() {
        @Override
        public void onSuccess() {
            // 할당된 광고가 있으면 호출됩니다.
            int feedTotalReward = buzzAdFeed.getAvailableRewards(); // 적립 가능한 총 포인트 금액
            // TODO: 뷰 업데이트하는 함수를 호출합니다. 
            updateMessages(feedTotalReward);
        }

        @Override
        public void onError(AdError error) {
            // 할당된 광고가 없으면 호출됩니다.
            // TODO: 적립 가능 포인트를 0으로 표시합니다. 
            updateMessages(0); 
            Log.e(TAG, "Failed to load a native ad.", error);                
        }
    });
}
// TODO: 적립 가능한 총 포인트 금액 값으로 뷰를 업데이트하도록 구현합니다. 
private void updateMessages(final int points) {
  
}