콘텐츠 카드

필수 조건

콘텐츠 카드를 사용하려면 먼저 Braze 웹 SDK를 앱에 통합해야 합니다. 그러나 추가 설정은 필요하지 않습니다. 대신 고유한 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 참조 설명서를 참조하세요.

카드 유형 및 속성

콘텐츠 카드 데이터 모델은 웹 소프트웨어 개발 키트에서 사용할 수 있으며 다음과 같은 콘텐츠 카드 유형을 제공합니다: ImageOnly, CaptionedImage, ClassicCard. 각 유형은 기본 모델 카드에서 공통 속성정보를 상속받으며 다음과 같은 추가 속성정보가 있습니다.

기본 카드 모델

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

이미지만

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

캡션 이미지

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

클래식

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

대조군

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

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

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

카드 방법

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

Google 태그 관리자 사용

Google 태그 매니저는 웹사이트 코드에 Braze CDN (웹 SDK 버전)을 직접 삽입하는 방식으로 작동하므로 콘텐츠 카드를 구현할 때를 제외하고는 Google 태그 매니저 없이 SDK를 통합한 것처럼 모든 SDK 방법을 사용할 수 있습니다.

콘텐츠 카드 설정하기

• google tag manager
• manual

1
2
3
<script>
   window.braze.showContentCards();
</script>

1
2
3
body .ab-feed { 
    width: 800px;
}

템플릿 업그레이드

Braze 웹 SDK의 최신 버전으로 업그레이드하려면Google Tag Manager 대시보드에서 다음 세 단계를 수행합니다.

1. 태그 템플릿 업데이트
   워크스페이스 내의 템플릿 페이지로 이동합니다. 여기에 업데이트를 사용할 수 있음을 나타내는 아이콘이 표시됩니다.
   
   
   
   해당 아이콘을 클릭하고 변경 사항을 검토한 후 업데이트 수락을 클릭합니다.
   
   
   
   
2. 업데이트 버전 번호
   태그 템플릿이 업데이트되면 Braze 초기화 태그를 편집하고 SDK 버전을 최신 major.minor 버전으로 업데이트합니다. 예를 들어 최신 버전이 4.1.2인 경우 4.1을 입력합니다. SDK 버전 목록은 변경 로그에서 확인할 수 있습니다.
   
   
   
   
3. QA 및 게시
   태그 컨테이너에 업데이트를 게시하기 전에 Google 태그 관리자의 디버깅 도구를 사용하여 새 SDK 버전이 작동하는지 확인합니다.

문제 해결

태그 디버깅 사용

각 Braze 태그 템플릿에는 웹 페이지의 JavaScript 콘솔에 디버그 메시지를 기록하는 데 사용할 수 있는 GTM 태그 디버깅 체크박스(선택 사항)가 있습니다.

디버그 모드로 전환

Google 태그 관리자 연동 디버깅에 도움이 되는 또 다른 방법은 Google의 미리보기 모드 기능을 사용하는 것입니다.

이렇게 하면 웹 페이지의 데이터 레이어에서 트리거된 각 Braze 태그로 전송되는 값을 식별하는 데 도움이 되며, 어떤 태그가 트리거되었는지 또는 트리거되지 않았는지도 설명할 수 있습니다.

상세 로깅 활성화

테스트하는 동안 Braze 기술 지원팀이 로그에 액세스할 수 있도록 하려면 Google Tag Manager 통합에서 상세 로깅을 활성화하면 됩니다. 이러한 로그는 브라우저 개발자 도구의 콘솔 탭에 표시됩니다.

Google Tag Manager 통합에서 Braze 초기화 태그로 이동하고 웹 SDK 로깅 활성화를 선택합니다.