Skip to content

콘텐츠 카드 통합

이 문서에서는 콘텐츠 카드 데이터 모델, 표준 피드 UI 옵션 및 추가 카드 메서드를 포함한 웹용 콘텐츠 카드 통합을 다룹니다.

Braze 웹 SDK에는 콘텐츠 카드 피드 UI가 포함되어 있어 빠르게 통합할 수 있습니다. 대신 자체 UI를 빌드하려면 콘텐츠 카드 사용자 지정 가이드를 참조하세요.

표준 피드 UI

포함된 콘텐츠 카드 UI를 사용하려면 웹사이트에서 피드를 표시할 위치를 지정해야 합니다.

이 예제에서는 콘텐츠 카드 피드를 <div id="feed"></div>에 배치하려고 합니다. 세 개의 버튼을 사용하여 피드를 숨기거나, 표시하거나, 토글(현재 상태에 따라 숨기거나 표시)합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<button id="toggle" type="button">Toggle Cards Feed</button>
<button id="hide" type="button">Hide Cards Feed</button>
<button id="show" type="button">Show Cards Feed</button>

<nav>
    <h1>Your Personalized Feed</h1>
    <div id="feed"></div>
</nav>

<script> 
   const toggle = document.getElementById("toggle");
   const hide = document.getElementById("hide");
   const show = document.getElementById("show");
   const feed = document.getElementById("feed");
    
   toggle.onclick = function(){
      braze.toggleContentCards(feed);    
   }
    
   hide.onclick = function(){
      braze.hideContentCards();
   }
    
   show.onclick = function(){
      braze.showContentCards(feed);    
   }
</script>

toggleContentCards(parentNode, filterFunction) 및 showContentCards(parentNode, filterFunction) 메서드를 사용하는 경우 인수를 제공하지 않으면 모든 콘텐츠 카드가 페이지 오른쪽에 있는 고정 위치 사이드바에 표시됩니다. 그렇지 않으면 피드가 지정된 parentNode 옵션에 배치됩니다.

콘텐츠 카드 토글에 대한 자세한 내용은 SDK 참조 설명서를 참조하세요.

콘텐츠 카드 데이터 모델

콘텐츠 카드 데이터 모델은 웹 SDK에서 사용할 수 있습니다.

Braze 웹 SDK는 세 가지 콘텐츠 카드 유형을 제공합니다: ImageOnly, CaptionedImage, ClassicCard. 각 유형은 기본 모델 카드에서 공통 속성정보를 상속받으며 다음과 같은 추가 속성정보가 있습니다.

카드 데이터 가입에 대한 자세한 내용은 분석 로깅을 참조하세요.

기본 콘텐츠 카드 모델 속성 - 카드

모든 콘텐츠 카드에는 이러한 공유 속성이 있습니다:

이미지 전용 콘텐츠 카드 속성정보 - ImageOnly

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

캡션 이미지 콘텐츠 카드 속성 - CaptionedImage

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

클래식 콘텐츠 카드 속성정보 - ClassicCard

클래식카드 모델에는 텍스트가 없는 이미지 또는 텍스트가 있는 이미지가 포함될 수 있습니다.

대조군

기본 콘텐츠 카드 피드를 사용하는 경우 노출 수와 클릭 수가 자동으로 추적됩니다.

콘텐츠 카드에 대한 커스텀 통합을 사용하는 경우 제어 카드가 표시되면 노출 횟수를 기록해야 합니다. 이러한 노력의 일환으로, A/B 테스트에서 노출 횟수를 기록할 때 제어 카드를 처리해야 합니다. 이러한 카드는 비어 있으며 사용자에게 표시되지 않지만, 여전히 노출 횟수를 기록하여 제어 카드가 아닌 카드와 해당 성능을 비교해야 합니다.

콘텐츠 카드가 A/B 테스트의 대조군에 있는지 확인하려면 card.isControl 속성정보(Web SDK v4.5.0 이상)를 확인하거나 카드가 ControlCard 인스턴스(card instanceof braze.ControlCard)인지 확인합니다.

카드 방법

자세한 내용은 SDK 참조 설명서를 참조하세요.

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