튜토리얼: Content Cards로 받은편지함 만들기
이 튜토리얼의 샘플 코드를 따라 Braze Content Cards로 받은편지함을 구축하세요.
필수 조건
이 기능을 사용하려면 먼저 Android Braze SDK를 통합해야 합니다.
Android(Compose)용 Content Cards로 받은편지함 만들기
1. 디버깅 활성화(선택 사항) {#1-enable-debugging-optional}
개발 중 문제 해결을 쉽게 하기 위해 디버깅을 활성화하는 것을 고려하세요.
2. UI 뷰 구축하기 {#2-build-a-ui-view}
Jetpack Compose의 경우, 스크롤 가능한 목록에 Content Cards를 표시하기 위해 LazyColumn을 사용하세요.
3. Content Cards 업데이트 구독하기 {#3-subscribe-to-content-card-updates}
구독 생명주기를 관리하기 위해 DisposableEffect를 사용하여 컴포저블이 컴포지션에서 벗어날 때 적절한 정리를 보장하세요.
4. 커스텀 받은편지함 UI 구축하기 {#4-build-a-custom-inbox-ui}
Content Cards 속성(예: title, description, url)을 사용하면 특정 UI 요구 사항에 맞는 Content Cards를 구축할 수 있습니다. 이 경우, Jetpack Compose의 Card와 Column 컴포저블로 받은편지함을 구축하고 있습니다.
5. 노출 및 클릭 추적하기 {#5-track-impressions-and-clicks}
Content Cards에서 사용할 수 있는 logImpressions 및 logClick 메서드를 사용하여 노출 및 클릭을 기록할 수 있습니다.
노출은 사용자가 카드를 볼 때 한 번만 기록해야 합니다. 카드가 보일 때 노출을 기록하기 위해 LaunchedEffect를 사용하세요. 노출이 올바르게 기록되도록 앱의 뷰 생명주기와 사용 사례를 고려해야 할 수 있습니다.
Android(RecyclerView)용 Content Cards로 받은편지함 만들기
1. 디버깅 활성화(선택 사항)
개발 중 문제 해결을 쉽게 하기 위해 디버깅을 활성화하는 것을 고려하세요.
2. UI 뷰 구축하기
이 튜토리얼에서는 Android의 RecyclerView를 사용하여 Content Cards를 표시하지만, 사용 사례에 맞는 클래스와 구성요소로 UI를 구축하는 것을 권장합니다. Braze는 기본적으로 UI를 제공하지만, 이 튜토리얼은 외관과 동작을 커스터마이즈하기 위해 커스텀 뷰를 만드는 방법을 안내합니다.
3. Content Cards 업데이트 구독하기
새 Content Cards가 사용 가능할 때 UI가 응답하도록 subscribeToContentCardsUpdates를 사용하세요. 여기에서 구독자는 액티비티 생명주기 훅 내에서 등록 및 제거됩니다.
4. 커스텀 받은편지함 UI 구축하기
Content Cards 속성(예: title, description, url)을 사용하면 특정 UI 요구 사항에 맞는 Content Cards를 구축할 수 있습니다. 이 경우, Android의 기본 RecyclerView로 받은편지함을 구축하고 있습니다.
5. 노출 및 클릭 추적하기
Content Cards에서 사용할 수 있는 logImpressions 및 logClick 메서드를 사용하여 노출 및 클릭을 기록할 수 있습니다.
노출은 사용자가 카드를 볼 때 한 번만 기록해야 합니다. 여기에서는 카드별 플래그를 사용하여 중복 로그를 방지하는 단순한 메커니즘을 사용합니다. 노출이 올바르게 기록되도록 앱의 뷰 생명주기와 사용 사례를 고려해야 할 수 있습니다.
필수 조건
이 기능을 사용하려면 먼저 Swift Braze SDK를 통합해야 합니다. 또한 Swift용 인앱 메시지 활성화가 필요합니다.
Swift용 Content Cards로 받은편지함 만들기
1. 디버깅 활성화(선택 사항)
개발 중 문제 해결을 쉽게 하기 위해 디버깅을 활성화하는 것을 고려하세요.
2. UI 뷰 구축하기
이 튜토리얼에서는 Swift의 UITableViewController를 사용하지만, 사용 사례에 맞는 클래스와 구성요소로 UI를 구축하는 것을 권장합니다.
3. Content Cards 업데이트 구독하기
Content Cards 리스너를 구독하여 최신 업데이트를 받은 다음, requestRefresh()를 호출하여 해당 사용자에 대한 최신 Content Cards를 요청하세요.
4. 커스텀 받은편지함 UI 구축하기
Content Cards 속성(예: title, description, imageUrl)을 사용하면 특정 UI 요구 사항에 맞는 Content Cards를 구축할 수 있습니다. 이 경우, Swift의 기본 테이블 API로 받은편지함을 구축하고 있습니다.
5. 노출 및 클릭 추적하기
콘텐츠 카드에서 사용할 수 있는 logClick(using:) 및 logImpression(using:) 메서드를 사용하여 노출 및 클릭을 기록할 수 있습니다.
또한, 해제 시 logDismissed(using:)을 사용할 수 있습니다.
노출은 사용자가 볼 때 한 번만 기록되어야 합니다. 여기서는 Set과 willDisplay를 사용하는 단순한 메커니즘으로 이를 달성합니다. 앱의 UI 생명주기와 사용 사례를 고려하여 노출이 올바르게 기록되도록 해야 할 수 있습니다.
필수 조건
이 기능을 사용하려면 먼저 Web Braze SDK를 통합해야 합니다. 그러나 추가 설정은 필요하지 않습니다.
웹용 Content Cards로 받은편지함 만들기
1. 디버깅 활성화(선택 사항)
개발 중 문제 해결을 쉽게 하기 위해 디버깅을 활성화하는 것을 고려하세요. 선택적으로, 콘솔에서 Braze Web SDK 메서드를 실행할 수도 있습니다.
2. UI 구축하기 {#2-build-the-ui}
받은편지함 페이지를 위한 UI를 만듭니다. 여기서는 ID가 cards-list인 div를 포함하는 기본 HTML 페이지를 구축하고 있습니다. 이는 Content Cards를 렌더링하기 위한 대상 컨테이너로 사용됩니다.
3. Content Cards 업데이트 구독하기
Content Cards 리스너를 구독하여 최신 업데이트를 받은 다음, requestContentCardsRefresh()를 호출하여 해당 사용자에 대한 최신 Content Cards를 요청합니다. 또는 세션 시작 시 자동 새로고침을 위해 openSession() 이전에 구독자를 호출합니다.
4. 받은편지함 요소 구축하기 {#4-build-the-inbox-elements}
Content Cards 속성(예: title, description, url)을 사용하면 특정 UI 요구 사항에 맞게 Content Cards를 표시할 수 있습니다.
5. 노출 및 클릭 추적하기
Content Cards에서 사용할 수 있는 logContentCardImpressions 및 logContentCardClick 메서드를 사용하여 노출 및 클릭을 기록할 수 있습니다.
또한, 해제 시 logCardDismissal을 사용할 수 있습니다.
노출은 사용자가 볼 때 한 번만 기록되어야 합니다. 여기서 IntersectionObserver와 card.id로 키가 지정된 Set가 중복 로그를 방지합니다. 앱의 UI 생명주기와 사용 사례를 고려하여 노출이 올바르게 기록되도록 해야 할 수 있습니다.