Skip to content

콘텐츠 카드 통합

이 문서에서는 React Native용 콘텐츠 카드를 설정하는 방법을 다룹니다.

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

맞춤화

자체 UI를 빌드하려면 사용 가능한 카드 목록을 가져오고 카드 업데이트를 수신 대기할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11

// Set initial cards
const [cards, setCards] = useState([]);

// Listen for updates as a result of card refreshes, such as:
// a new session, a manual refresh with `requestContentCardsRefresh()`, or after the timeout period
Braze.addListener(Braze.Events.CONTENT_CARDS_UPDATED, async (update) => {
    setCards(update.cards);
});

// Manually trigger a refresh of cards
Braze.requestContentCardsRefresh();

이러한 추가 메서드를 사용하여 앱 내에서 커스텀 콘텐츠 카드 피드를 빌드할 수 있습니다.

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

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

  1. Braze.changeUser('your-user-id') 메서드를 호출하여 React 애플리케이션에서 활성 사용자를 설정합니다.
  2. 캠페인으로 이동하여 이 가이드를 따라 새 콘텐츠 카드 캠페인을 만드세요.
  3. 테스트 콘텐츠 카드 캠페인을 작성하고 테스트 탭으로 이동하세요. 동일한 user-id을 테스트 사용자로 추가하고 테스트 보내기를 클릭하십시오. 곧 기기에서 콘텐츠 카드를 실행할 수 있습니다.

자신의 사용자 ID를 테스트 수신자로 추가하여 콘텐츠 카드를 테스트할 수 있는 Braze 콘텐츠 카드 캠페인

더 많은 통합을 위해, 사용하는 플랫폼에 따라 Android 통합 지침 또는 iOS 통합 지침을 따르세요.

이 샘플 구현은 React Native SDK 내의 BrazeProject에서 찾을 수 있습니다.

콘텐츠 카드 데이터 모델

콘텐츠 카드 데이터 모델은 React Native SDK에서 사용할 수 있습니다. 콘텐츠 카드 데이터 모델에 대한 전체 참조는 Android 및 iOS 설명서를 참조하세요.

Braze React Native SDK는 기본 모델을 공유하는 세 가지 고유한 콘텐츠 카드 유형(이미지 전용, 자막 이미지, 클래식)을 지원합니다.

특정 카드에 대해 대조군에 속한 사용자에게 반환되는 특수 제어 카드 유형도 있습니다.

각 유형은 기본 모델에서 공통 속성을 상속하며 다음과 같은 추가 속성이 있습니다.

기본 콘텐츠 카드 모델 속성

기본 카드 모델은 모든 카드에 대한 기초적인 동작을 제공합니다.

기본 카드에 대한 전체 참조는 Android 및 iOS 설명서를 참조하세요.

이미지 전용 콘텐츠 카드 모델 속성

이미지 전용 카드는 클릭 가능한 전체 크기 이미지입니다.

이미지 전용 카드에 대한 전체 참조는 Android 및 iOS 설명서를 참조하세요.

캡션 이미지 콘텐츠 카드 모델 속성

캡션이 있는 이미지 카드는 클릭 가능한 전체 크기 이미지로, 설명 텍스트가 함께 제공됩니다.

캡션이 있는 이미지 카드에 대한 전체 참조는 Android 및 iOS 설명서를 참조하세요.

클래식 콘텐츠 카드 모델 속성

클래식 카드에는 텍스트 왼쪽에 제목, 설명, 이미지(선택 사항)가 있습니다.

클래식(텍스트 알림) 콘텐츠 카드에 대한 전체 참조는 Android 및 iOS 설명서를 참조하세요. 클래식 이미지(짧은 뉴스) 카드에 대한 전체 참조는 Android 및 iOS 문서를 참조하세요.

콘텐츠 카드 모델 속성 제어

제어 카드에는 몇 가지 중요한 차이점이 있는 모든 기본 속성이 포함됩니다. 특히 다음 사항이 중요합니다.

  • isControl 속성은 true로 보장됩니다.
  • extras 속성은 비어 있음을 보장합니다.

제어 카드에 대한 전체 참조는 Android 및 iOS 설명서를 참조하세요.

GIF 지원

By default, the native Braze Android SDK does not provide animated GIF support for Content Cards—however, you can use a third-party image library to display GIFs instead. For more information, see Android Content Cards: GIFs.

By default, the Braze Swift SDK does not provide animated GIF support for Content Cards—however, you can wrap your own view or a third-party view in an instance of GIFViewProvider. For a full walkthrough, see Tutorial: GIF Support for Swift Content Cards.

Github   GitHub 에서 이 페이지를 편집합니다.
이 페이지가 얼마나 도움이 되었나요?
New Stuff!