콘텐츠 카드 통합

이 기사에서는 Flutter 앱에 대한 콘텐츠 카드를 설정하는 방법을 다룹니다.

Braze SDK에는 콘텐츠 카드를 시작할 수 있는 기본 카드 피드가 포함되어 있습니다. 카드 피드를 표시하려면 braze.launchContentCards() 메서드를 사용할 수 있습니다. 기본 카드 피드는 Braze SDK에 포함되어 있으며 모든 분석 추적, 해제 및 사용자의 콘텐츠 카드 렌더링을 처리합니다.

사용자 지정

플러그인 공개 인터페이스에서 사용할 수 있는 다음 방법을 사용하여 앱 내에서 사용자 지정 콘텐츠 카드 피드를 구축할 수 있습니다:

콘텐츠 카드 데이터 수신

Flutter 앱에서 콘텐츠 카드 데이터를 수신하려면 BrazePlugin이 Dart Streams를 사용하여 콘텐츠 카드 데이터 전송을 지원합니다.

BrazeContentCard 오브젝트는 description, title, image, url, extras 등을 포함하여 기본 모델 오브젝트에서 사용할 수 있는 필드의 하위 집합을 지원합니다.

1단계: Dart 레이어에서 콘텐츠 카드 데이터 수신

Dart 레이어에서 콘텐츠 카드 데이터를 수신하려면 아래 코드를 사용하여 StreamSubscription을 생성하고 braze.subscribeToContentCards()를 호출합니다. 스트림 가입이 더 이상 필요하지 않은 경우 cancel()을 수행합니다.

1
2
3
4
5
6
7
8
9
// Create stream subscription
StreamSubscription contentCardsStreamSubscription;

contentCardsStreamSubscription = braze.subscribeToContentCards((List<BrazeContentCard> contentCards) {
  // Handle Content Cards
}

// Cancel stream subscription
contentCardsStreamSubscription.cancel();

예제는 샘플 앱의 main.dart 를 참조하세요.

2단계: 네이티브 레이어에서 콘텐츠 카드 데이터를 전달

1단계의 Dart 레이어에서 데이터를 수신하려면 다음 코드를 추가하여 기본 레이어에서 콘텐츠 카드 데이터를 전달합니다.

• android
• ios

콘텐츠 카드에 대한 콜백 재생

콜백을 사용하기 위해 먼저 트리거된 콘텐츠 카드를 저장하고 설정된 후에 재생하려면 BrazePlugin을 초기화할 때 customConfigs 맵에 다음 항목을 추가합니다.

1
BrazePlugin braze = new BrazePlugin(customConfigs: {replayCallbacksConfigKey: true});

샘플 콘텐츠 카드를 표시하는 테스트

다음 단계를 따라 샘플 콘텐츠 카드를 테스트하세요.

1. braze.changeUserId('your-user-id') 메서드를 호출하여 React 애플리케이션에서 활성 사용자를 설정합니다.
2. 캠페인으로 이동하여 이 가이드를 따라 새 콘텐츠 카드 캠페인을 만드세요.
3. 테스트 콘텐츠 카드 캠페인을 작성하고 테스트 탭으로 이동하세요. 테스트 사용자와 동일한 user-id를 추가하고 테스트 보내기를 클릭합니다.
4. 푸시 알림을 탭하면 기기에서 콘텐츠 카드가 실행됩니다. 피드를 표시하려면 새로고침해야 할 수 있습니다.

각 플랫폼에 대한 자세한 내용은 Android 연동 또는 iOS 연동 가이드를 참조하세요.

GIF 지원

• android
• ios