Skip to content

배너 생성

Braze에서 Campaigns와 Canvases를 구축할 때 배너를 생성하는 방법을 알아보세요. 보다 일반적인 정보는 배너 소개를 참조하세요.

사전 준비 사항

Banner를 시작하기 전에 개발팀이 앱 또는 웹사이트에 배치를 설정해야 합니다. 그동안 Banner Campaign 초안을 작성할 수는 있지만, 배치가 구성될 때까지 Campaign을 시작할 수 없습니다.

Banner 메시지 만들기

1단계: Braze에서 플레이스 만들기

아직 만들지 않았다면 앱이나 사이트에서 배너를 표시할 수 있는 위치를 정의하는 데 사용되는 배너 배치를 Braze에서 만들어야 합니다. 게재 위치를 만들려면 설정 > 배너 게재 위치로 이동한 다음 게재 위치 만들기를 선택합니다.

배너 게재 위치 섹션에서 게재 위치 ID를 생성합니다.

배치에 이름을 지정하고 배치 ID를 할당합니다. ID는 카드의 수명 주기 동안 사용되며 나중에 변경해서는 안 되므로 할당하기 전에 다른 팀과 상의하세요. 자세한 내용은 배치 ID.

봄 세일 프로모션 캠페인의 경우 배너를 지정하는 배치 세부 정보가 왼쪽 사이드바에 표시됩니다.

2단계: 메시지 작성 위치 선택

메시지를 Campaign으로 보낼지 Canvas로 보낼지 잘 모르겠나요? Campaigns는 단일 타겟팅 메시징 캠페인에 적합하고, Canvases는 다단계 사용자 여정에 더 적합합니다.

  1. 메시징 > Campaigns로 이동하여 Campaign 만들기를 선택합니다.
  2. Banner를 선택합니다.
  3. Campaign에 명확하고 의미 있는 이름을 지정합니다.
  4. 필요에 따라 팀과 태그를 추가합니다. 태그를 사용하면 Campaign을 더 쉽게 찾고 보고서를 작성할 수 있습니다. 예를 들어 보고서 빌더를 사용할 때 관련 태그로 필터링할 수 있습니다.
  5. 이전에 생성한 배치를 선택하여 Campaign과 연결합니다.
  6. 필요에 따라 배리언트를 추가합니다. 각 배리언트에 대해 다른 메시지 유형과 레이아웃을 선택할 수 있습니다. 배리언트에 대한 자세한 내용은 다변량 및 A/B 테스트를 참조하세요.
  7. Banner Campaign의 시작 날짜와 시간을 선택합니다. 기본적으로 Banner는 무기한 지속됩니다. 종료 시간을 선택하고 종료 날짜 및 시간을 지정하여 변경할 수 있습니다.
  1. Canvas 작성기를 사용하여 Canvas를 생성합니다.
  2. Canvas를 설정한 후 Canvas 빌더에서 메시지 단계를 추가합니다. 단계에 명확하고 의미 있는 이름을 지정합니다.
  3. 메시징 채널로 Banner를 선택합니다.
  4. Banner의 배치를 선택합니다.
  5. 우선순위를 설정합니다. Banner 우선순위는 동일한 배치를 공유하는 Banner가 표시되는 순서를 결정합니다.
  6. Banner의 만료를 설정합니다. 단계가 사용 가능해진 후 일정 기간이 지나거나 특정 날짜와 시간에 만료되도록 설정할 수 있습니다. 최대 만료 기간은 단계가 사용자에게 제공된 후 31일입니다.

3단계: Banner 작성하기

다음으로, 빌드를 시작할 방법을 선택합니다:

  • 드래그 앤 드롭 편집기: 빈 Banner에서 시작하여 블록과 행으로 시각적으로 빌드합니다.
  • HTML 편집기: 빈 Banner에서 시작하여 HTML로 직접 작업합니다.
  • 템플릿: 템플릿 라이브러리를 열고 Braze 템플릿 또는 내 템플릿에서 디자인을 선택합니다. 템플릿은 커스터마이징을 위해 드래그 앤 드롭 편집기에서 열립니다.

Banner에 대해 드래그 앤 드롭 편집기, HTML 편집기 또는 템플릿을 선택하는 옵션.

3.1단계: Banner 스타일 지정

블록과 행을 캔버스 영역으로 드래그 앤 드롭하여 메시지 작성을 시작할 수 있습니다. Banner 편집기 블록 참조 및 공유 속성정보 세부사항 링크는 편집기 블록 (Banner)을 참조하세요.

메시지의 배경 속성, 테두리 설정 등을 커스터마이징하려면 스타일을 선택합니다. 특정 블록이나 행의 스타일만 커스터마이징하려면 해당 항목을 선택하여 변경합니다.

Banner 작성기의 스타일 패널.

HTML 편집기는 자체 HTML 템플릿을 이미 유지 관리하고 있거나 마크업과 스타일링을 완전히 제어하려는 팀에 가장 적합합니다. 편집기에 직접 커스텀 HTML을 작성하거나 붙여넣을 수 있습니다. Liquid 개인화 태그가 완벽하게 지원되므로 사용자 속성, 커스텀 속성, 카탈로그 항목 등을 참조할 수 있습니다.

커스텀 HTML에서 클릭 및 닫기 추적을 위해 JavaScript 브리지 메서드를 명시적으로 호출해야 합니다. 전체 참조는 Banner용 커스텀 코드 및 JavaScript 브리지를 확인하세요.

3.2단계: 클릭 시 동작 정의 (선택 사항)

사용자가 Banner의 링크를 클릭하면 앱 내 더 깊은 곳으로 이동하거나 다른 웹 페이지로 리디렉션하도록 선택할 수 있습니다. 또한 커스텀 속성 또는 이벤트를 기록하도록 선택할 수 있으며, 이를 통해 사용자가 Banner를 클릭할 때 커스텀 데이터로 사용자 프로필을 업데이트할 수 있습니다. 보다 세밀한 클릭 추적을 위해 속성정보 패널의 보고용 식별자 필드를 사용하여 각 인터랙티브 요소에 커스텀 식별자를 할당하세요.

HTML 편집기에서는 클릭 추적이 자동으로 이루어지지 않습니다. 추적하려는 각 클릭 가능 요소에 대해 HTML 내에서 brazeBridge.logClick()을 호출해야 합니다. 예시:

1

<a href="https://example.com" onclick="brazeBridge.logClick()">Shop now</a>

전체 JavaScript 브리지 참조는 Banner용 커스텀 코드 및 JavaScript 브리지를 확인하세요.

3.3단계: 닫기 동작 구성 (선택 사항)

닫기 동작 섹션에서 Banner를 닫을 수 있음 체크박스를 선택하면 사용자가 Banner를 닫을 수 있습니다. 이 기능은 한정 기간 제안을 광범위한 오디언스에 홍보하면서도 관심 없는 사용자가 메시지를 숨길 수 있도록 하려는 경우에 유용합니다.

닫기가 활성화되면 닫기 동작 섹션에서 닫기 버튼을 커스터마이징할 수 있습니다:

설정 설명
버튼 크기 Banner에 표시되는 닫기 버튼의 크기입니다.
버튼 색상 닫기 버튼의 색상입니다.
ARIA 라벨 스크린 리더에서 사용하는 닫기 버튼의 접근성 라벨입니다. 비워두면 기본값은 “닫기”입니다.

사용자가 Banner를 닫으면, Campaign의 타겟팅 기준에 여전히 해당하더라도 해당 사용자에게 다시 표시되지 않습니다.

HTML 편집기에서 닫기는 HTML에서 brazeBridge.closeMessage()를 사용하여 처리됩니다. brazeBridge.logClick()과 함께 사용하여 닫기 동작을 클릭 이벤트로도 추적할 수 있습니다. 예시:

1

<a href="#" onclick="brazeBridge.logClick(); brazeBridge.closeMessage();">&#x2715; Close</a>

사용자가 이 방법으로 Banner를 닫으면, Campaign의 타겟팅 기준에 여전히 해당하더라도 해당 사용자에게 다시 표시되지 않습니다.

전체 JavaScript 브리지 참조는 Banner용 커스텀 코드 및 JavaScript 브리지를 확인하세요.

3.4단계: 커스텀 속성정보 추가 (선택 사항)

Banner에 커스텀 속성정보를 추가하여 문자열이나 JSON 객체와 같은 구조화된 메타데이터를 첨부할 수 있습니다. 이러한 속성정보는 Banner 표시 방식에 영향을 미치지 않지만, Braze SDK를 통해 접근하여 앱의 동작이나 외관을 수정할 수 있습니다. 예를 들어 다음과 같이 사용할 수 있습니다:

  • 서드파티 분석 또는 통합을 위한 메타데이터를 전송합니다.
  • timestamp 또는 JSON 객체와 같은 메타데이터를 사용하여 조건 로직을 트리거합니다.
  • ratio 또는 format과 같은 포함된 메타데이터를 기반으로 Banner의 동작을 제어합니다.

커스텀 속성정보는 드래그 앤 드롭 편집기와 HTML 편집기 모두에서 동일하게 작동합니다. 커스텀 속성정보를 추가하려면 설정 > 속성정보 > 속성정보 추가를 선택합니다.

Banner Campaign에 첫 번째 커스텀 속성정보를 추가하는 옵션이 표시된 속성정보 페이지.

추가하려는 각 속성정보에 대해 다음을 입력합니다:

필드 설명 예시
속성정보 유형 속성정보의 데이터 유형입니다. 지원되는 유형에는 문자열, 불리언, 숫자, 타임스탬프, 이미지 URL, JSON 객체가 포함됩니다. 문자열
속성정보 키 속성정보의 고유 식별자입니다. 이 키는 SDK에서 속성정보에 접근하는 데 사용됩니다. color
값 속성정보에 할당된 값입니다. 선택한 속성정보 유형과 일치해야 합니다. #FF0000

완료되면 완료를 선택합니다.

키가 color이고 값이 #FF0000인 문자열 속성정보가 있는 속성정보 페이지.

3.5단계: 연결된 콘텐츠로 개인화 (선택 사항)

Banner는 세션 새로 고침 중에 인라인으로 렌더링되므로 이 채널에서 연결된 콘텐츠는 다른 채널과 다르게 작동합니다:

  • GET 요청만 지원됩니다.
  • 단일 새로 고침 내 모든 배치(최대 10개)는 약 2초의 렌더링 예산을 공유합니다. 호출이 느리거나 시간이 초과되거나 예산을 초과하면 해당 배치의 연결된 콘텐츠 결과는 null로 처리됩니다. Banner는 재시도하지 않습니다.

최상의 결과를 위해:

  • 엔드포인트를 빠르게 유지하고 가능한 한 응답을 캐싱하세요.
  • 함께 렌더링되는 배치 간의 고유 연결된 콘텐츠 URL 수를 제한하세요.
  • 하나의 연결된 콘텐츠 응답이 다음 URL을 결정하는 체이닝 호출을 피하세요. 추가 호출마다 공유 예산이 소모됩니다.
  • Liquid 가드 문 또는 default 필터를 사용하여 null 결과를 처리하고 빈 Banner를 방지하세요.

4단계: 나머지 Campaign 또는 Canvas 구성

Banner 우선순위 설정 (선택 사항)

Banner 우선순위는 동일한 배치를 공유하는 Banner가 표시되는 순서를 결정합니다. 우선순위를 수동으로 설정하려면:

  1. Set exact priority를 선택합니다.
  2. Campaigns를 드래그 앤 드롭하여 올바른 우선순위로 정렬합니다.
  3. Apply Sort를 선택합니다.

재적격성 구성 (선택 사항)

기본적으로 Banner를 닫은 사용자는 해당 Campaign에 대해 다시 적격하지 않습니다. 닫은 사용자가 다시 Banner를 볼 수 있도록 하려면 전달 제어 단계로 이동하여 사용자가 Campaign을 다시 수신할 수 있도록 허용을 선택합니다. 활성화되면 분, 시간, 일 또는 주 단위로 쿨다운 기간을 설정합니다.

카운트다운은 사용자가 Banner를 닫은 시점부터 시작됩니다. 기간이 만료되면 사용자는 자동으로 다시 적격해지며, Campaign을 재시작할 필요가 없습니다. 재적격성은 사용자별, Campaign별로 추적됩니다.

오디언스 선택

  1. 타겟 오디언스에서 Segments 또는 필터를 선택하여 오디언스를 좁힙니다. 대략적인 Segment 인구의 미리보기가 자동으로 제공됩니다. 정확한 Segment 멤버십은 메시지가 전송되기 전에 계산됩니다.
  1. 전환 할당에서 최대 30일 기간의 전환 이벤트를 정의하여 Campaign을 수신한 후 사용자가 특정 작업을 수행하는 빈도를 추적합니다.

전환 이벤트 선택

Braze에서는 Campaign을 수신한 후 사용자가 특정 작업을 수행하는 빈도인 전환 이벤트를 추적할 수 있습니다. 사용자가 지정된 작업을 수행하면 전환으로 카운트되는 최대 30일 기간을 허용할 수 있습니다.

아직 완료하지 않았다면 Canvas 컴포넌트의 나머지 섹션을 완료합니다. Canvas의 나머지 구성에 대한 자세한 내용(다변량 테스트 및 BrazeAITM로 최적화 포함)은 Canvas 구성을 참조하세요.

Canvas Banner 단계의 재적격성을 제어하려면 Canvas 재진입 설정을 사용합니다. 자세한 내용은 Campaign 및 Canvas에 대한 재적격성을 참조하세요.

5단계: 메시지 테스트 (선택 사항)

미리보기를 선택하여 배너를 미리 보거나 테스트 메시지를 보낼 수 있습니다.

배너 작성기의 미리보기 탭.

하드웨어 차이로 인해 미리보기가 사용자 기기에서의 최종 렌더링과 동일하지 않을 수 있다는 점을 유의하세요.

테스트 메시지를 보내려면 콘텐츠 테스트 그룹 또는 하나 이상의 개별 사용자를 테스트 수신자로 추가한 다음 테스트 전송을 선택합니다. 테스트 메시지는 기기에서 최대 5분 동안 확인할 수 있습니다. 그런 다음 미리보기 링크 복사를 선택하여 임의의 사용자에게 배너가 어떻게 보이는지 확인할 수 있는 공유 가능한 미리보기 링크를 생성하고 복사할 수 있습니다. 이 링크는 7일 동안 유효하며, 이후에는 다시 생성해야 합니다.

배너 작성기의 미리보기 탭.

테스트 배너를 검토하면서 다음 사항을 확인하세요:

  • 배너 Campaign이 배치에 할당되어 있나요?
  • 이미지와 미디어가 타겟 기기 유형 및 화면 크기에서 예상대로 표시되고 작동하나요?
  • 링크와 버튼이 사용자를 올바른 위치로 안내하나요?
  • Liquid가 예상대로 작동하나요? Liquid가 정보를 반환하지 않는 경우를 대비하여 기본 속성 값을 설정했나요?
  • 문구가 명확하고 간결하며 정확한가요?

자세한 내용은 테스트 메시지 보내기를 참조하세요.

6단계: 검토 및 배포

Campaign 또는 Canvas 구성을 완료한 후 세부사항을 검토하고, 테스트한 다음 준비가 되면 전송합니다.
New Stuff!