튜토리얼: 배치 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용 배너 표시
1. 디버깅 활성화(선택 사항) {#1-enable-debugging-optional} {#1-enable-debugging-optional}
개발 중 문제 해결을 쉽게 하기 위해 디버깅을 활성화하는 것을 고려하세요.
2. 배너 업데이트 구독 {#2-subscribe-to-banner-updates} {#2-subscribe-to-banner-updates}
subscribeToBannersUpdates()를 사용하여 배너가 업데이트될 때마다 실행되는 핸들러를 등록합니다.
3. 배치 새로고침 {#3-refresh-your-placements} {#3-refresh-your-placements}
Braze SDK를 초기화한 후 requestBannersRefresh(["PLACEMENT_ID"])를 호출하여 해당 배치에 대한 최신 배너 콘텐츠를 가져옵니다.
이 호출은 기존 배너 캐시에 병합됩니다. 요청한 배치 ID만 추가, 업데이트 또는 제거됩니다. 다른 배치에 대한 캐시된 배너는 캐시에 유지되며 원래 만료 시간에 만료됩니다. 서버가 요청된 배치에 대해 배너를 반환하지 않으면 해당 배치는 캐시에서 제거됩니다.
4. banners.xml에서 BannerView 정의 {#4-define-bannerview-in-your-bannersxml} {#4-define-bannerview-in-your-bannersxml}
banners.xml에서 app:placementId="PLACEMENT_ID"를 포함하는 <com.braze.ui.banners.BannerView> 요소를 선언합니다. Braze는 이 요소를 사용하여 UI에 배너를 삽입합니다.
새로고침 후 SDK는 해당 배치의 콘텐츠가 변경된 경우에만 BannerView를 업데이트합니다. 변경되지 않은 표시된 배너는 그대로 유지됩니다.
필수 조건
이 튜토리얼을 시작하기 전에 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가 시각적으로 균형 잡힌 상태를 유지합니다.