튜토리얼: 배치 ID로 배너 표시하기
이 튜토리얼의 샘플 코드를 따라 배치 ID를 사용하여 배너를 표시하세요. 더 자세한 내용은 배너를 참조하세요.
필수 조건
이 튜토리얼을 시작하기 전에 Braze SDK가 최소 버전 요구 사항을 충족하는지 확인하십시오:
웹 SDK용 배너 표시
1. 디버깅 활성화(선택 사항) {#1-enable-debugging-optional}
개발 중 문제 해결을 쉽게 하기 위해 디버깅을 활성화하는 것을 고려하세요.
2. 배너 업데이트 구독 {#2-subscribe-to-banner-updates}
배너가 업데이트될 때마다 실행되는 핸들러를 등록하려면 subscribeToBannersUpdates()를 사용하세요. 핸들러 내부에서 braze.getBanner("global_banner")를 호출하여 최신 배치 정보를 가져옵니다.
3. 배너를 삽입하고 대조군 처리하기 {#3-insert-the-banner-and-handle-control-groups}
배너가 반환될 때 braze.insertBanner(banner, container)를 사용하여 배너를 삽입하세요. 레이아웃을 깔끔하게 유지하려면 대조군에 포함된 배너(예: isControl이 true일 때)를 숨기거나 축소하세요.
4. 배너 새로고침 {#4-refresh-your-banners}
SDK를 초기화한 후 requestBannersRefresh(["global_banner", ...])를 호출하여 각 세션 시작 시 배너가 새로고침되도록 하세요.
이 함수를 언제든지 호출하여 나중에 배너 배치를 새로고침할 수도 있습니다.
5. 배너를 위한 컨테이너 추가 {#5-add-a-container-for-your-banner}
HTML에서 새로운 <div> 요소를 추가하고 global-banner-container와 같은 짧은 배너 관련 id를 부여하세요. Braze는 이 <div>를 사용하여 페이지에 배너를 삽입합니다.
필수 조건
이 튜토리얼을 시작하기 전에 Braze SDK가 최소 버전 요구 사항을 충족하는지 확인하십시오:
Android SDK용 배너 표시
필수 조건
이 튜토리얼을 시작하기 전에 Braze SDK가 최소 버전 요구 사항을 충족하는지 확인하십시오:
SWIFT SDK용 배너 표시
1. 디버깅 활성화(선택 사항) {#1-enable-debugging-optional} {#1-enable-debugging-optional}
개발 중 문제 해결을 쉽게 하기 위해 디버깅을 활성화하는 것을 고려하세요.
2. 배치 새로고침 {#2-refresh-your-placements} {#2-refresh-your-placements}
Braze SDK를 초기화한 후 requestBannersRefresh(placementIds: ["PLACEMENT_ID"])를 호출하여 각 세션 시작 시 배너 콘텐츠를 새로고침합니다.
3. 배너 초기화 및 콜백 제공 {#3-initialize-the-banner-and-provide-a-callback} {#3-initialize-the-banner-and-provide-a-callback}
Braze 객체와 배치 ID를 사용하여 BrazeBannerUI.BannerUIView 인스턴스를 생성하고, processContentUpdates 콜백을 제공하여 배너를 표시하고 제공된 콘텐츠 높이에 따라 높이 제약 조건을 업데이트합니다.
4. Auto Layout 제약 조건 활성화 {#4-enable-auto-layout-constraints} {#4-enable-auto-layout-constraints}
기본적으로 배너 뷰를 숨긴 다음, Auto Layout 제약 조건을 활성화하기 위해 autoresizing mask 변환을 비활성화합니다.
5. 콘텐츠 앵커 설정 및 높이 제약 조건 지정 {#5-anchor-content-and-set-height-constraints} {#5-anchor-content-and-set-height-constraints}
Auto Layout을 사용하여 메인 콘텐츠를 상단에 앵커하고, 그 아래에 배너 뷰를 배치합니다. 배너의 leading, trailing, bottom 가장자리를 safe area에 고정하고, 콘텐츠가 로드될 때 업데이트될 초기 높이 제약 조건을 0으로 설정합니다.
1. 디버깅 활성화(선택 사항) {#1-enable-debugging-optional}
개발 중 문제 해결을 쉽게 하기 위해 디버깅을 활성화하는 것을 고려하세요.
2. 배치 새로고침 {#2-refresh-your-placements}
Braze SDK를 초기화한 후 requestBannersRefresh(placementIds: ["PLACEMENT_ID"])를 호출하여 각 세션 시작 시 배너 콘텐츠를 새로고침합니다.
3. 뷰 컴포넌트 생성 {#3-create-a-view-component} {#3-create-a-view-component}
사용 가능한 배너를 표시하고 필요한 경우 메인 앱 콘텐츠를 포함하는 재사용 가능한 SwiftUI 뷰 컴포넌트를 생성합니다.
4. 사용 가능한 배너만 표시 {#4-only-display-available-banners} {#4-only-display-available-banners}
SDK가 초기화되어 있고 해당 사용자에 대한 배너 콘텐츠가 존재하는 경우에만 BrazeBannerUI.BannerView를 표시합니다. .onAppear에서 getBanner(for:placementID)를 호출하여 hasBannerForPlacement의 상태를 설정합니다.
5. 로드 후에만 BannerView 표시 {#5-only-show-bannerview-after-it-loads} {#5-only-show-bannerview-after-it-loads}
UI에 빈 공간이 생기지 않도록, 배너가 존재하고 SDK가 초기화된 경우에만 BrazeBannerUI.BannerView를 표시합니다.
6. 배너 높이 동적 업데이트 {#6-dynamically-update-banner-height} {#6-dynamically-update-banner-height}
processContentUpdates 콜백을 사용하여 배너의 콘텐츠 높이가 로드되는 즉시 가져옵니다. SwiftUI 상태(contentHeight)를 업데이트하고 제공된 높이를 사용하여 .frame(height:) 제약 조건을 적용합니다.
7. 배너 높이 제한 {#7-limit-the-banner-height} {#7-limit-the-banner-height}
배너가 최대 높이를 초과하지 않도록 .frame(height: min(contentHeight, 80)) 수정자를 적용합니다. 이렇게 하면 배너의 콘텐츠에 관계없이 UI가 시각적으로 균형 잡힌 상태를 유지합니다.