5. 상품 클릭 관리
시청자가 장바구니를 누르면 onCart 로 상품 ID 가, 상품을 눌러 구매 페이지로 이동할 때는 onProductClick 으로 주소가 전달됩니다. 콜백을 등록하지 않으면 아무 동작도 하지 않습니다.
▲ 상품 목록과 장바구니 버튼이 보이는 플레이어 화면
상품 클릭의 두 가지 동작
상품 영역에서 일어나는 일은 두 갈래입니다.
둘 다 앱이 콜백으로 받아 처리하며, 등록하지 않으면 아무 동작도 하지 않습니다.
배너는 성격이 달라 별도 콜백으로 옵니다.
| 시청자 동작 | 등록하지 않으면 | 등록하면 |
|---|---|---|
| 상품을 눌러 구매 페이지로 이동 |
아무 동작도 하지 않습니다 | onProductClick 으로 주소를 받아 앱 화면에서 처리합니다 |
| 장바구니 담기 | 아무 동작도 하지 않습니다 | onCart 로 상품 ID 를 받아 앱의 장바구니에 담습니다 |
장바구니 연동하기
시청자가 장바구니 버튼을 누르면 상품 ID 가 콜백으로 전달됩니다.
앱은 그 ID 로 자사 장바구니에 상품을 담고 결과를 알립니다.
Kotlin
SauceClient.setLivePlayerCallbackListener(object : LivePlayerCallbackListener { override fun onCart(productId: String) { // productId = 소스 어드민에 등록한 상품 ID // 앱의 장바구니에 담고, 담긴 결과를 사용자에게 알립니다 } override fun onLoginRequest(context: LoginRequestContext) {} // 필수 })
📘 플레이어는 닫히지 않습니다. 장바구니는 상품 상세 위에서 처리되므로 시청이 그대로 이어집니다.
전달되는 상품 ID 확인하기
콜백으로 오는 값은 소스 어드민에 상품을 등록할 때 입력한 상품 ID 입니다.
이 값이 앱의 상품 식별자와 같아야 장바구니에 담을 수 있습니다.
| 확인할 것 | 내용 |
|---|---|
| 값의 출처 | 소스 어드민에서 상품을 등록할 때 입력한 고객사 상품 ID 가 그대로 전달됩니다 |
| 맞춰야 할 것 | 앱(자사몰)에서 상품을 조회할 때 쓰는 식별자와 같은 값으로 등록해야 합니다 |
| 비어 있을 때 | 어드민에 상품 ID 를 입력하지 않았다면 빈 문자열이 전달됩니다 |
⚠️ 연동이 안 될 때 여기부터 보세요 — 콜백은 오는데 장바구니에 담기지 않는다면 대부분 이 값이 원인입니다. 빈 문자열이 올 수 있으므로 값이 비어 있는 경우를 먼저 처리하고, 어드민의 상품 등록 정보를 확인하세요.
상품 클릭을 앱 화면으로 연결하기
시청자가 상품을 눌러 구매로 이동할 때, 그 시점이 앱에 전달됩니다.
받은 주소로 앱 안의 상품 화면을 열지, 브라우저로 넘길지는 앱이 정합니다.
-
1시청자가 상품의 구매 영역을 누릅니다.
-
2플레이어가 이동할 주소를 서버에서 받아
onProductClick으로 앱에 전달합니다.
이 주소는 어드민에 등록된 값이며 앱에서 지정할 수는 없습니다. -
3앱이 처리 방식을 정합니다. 앱 안의 상품 상세 화면으로 보내거나, 브라우저를 열거나, 주소를 해석해 다른 화면으로 보낼 수 있습니다.
Kotlin
override fun onProductClick(info: ProductClickInfo): Boolean { // info.url = 이동할 구매 페이지 주소, info.productId = 어드민에 등록한 상품 ID openProductScreen(info.url) return true // 앱이 처리했음. false 면 플레이어는 아무 동작도 하지 않습니다 }
📘 앱 안에서 구매까지 이어갈 수 있습니다. 시청자가 앱을 벗어나지 않으므로 이탈이 줄고, 로그인 상태·장바구니를 그대로 쓸 수 있습니다.
📘 콜백을 등록하지 않으면 이동하지 않습니다. 앱 안에서 처리하려면
onProductClick 을 등록하세요.
📘 이동 중에도 시청을 이어가려면 — 화면을 벗어날 때 플레이어를 작은 창으로 유지할 수 있습니다. 설정 방법은 D. PIP 설정하기에 있습니다.
배너 클릭 연동하기
상단 배너와 슬롯 배너는 상품과 다른 콜백으로 옵니다.
어드민에 등록할 때 열림 방식을 함께 정하고, 그 값이 targetType 으로 전달됩니다.
Kotlin
override fun onBannerClick(info: BannerClickInfo): Boolean { // info.url · info.bannerId · info.placement · info.targetType (SELF / BLANK) openInAppBrowser(info.url) return true // 앱이 처리했음 }
| 전달값 | 설명 |
|---|---|
info.url | 이동할 주소 |
info.bannerId | 어드민에 등록한 배너 식별자 |
info.placement | 눌린 위치 — 상단 배너인지 슬롯 배너인지 |
info.targetType | SELF 또는 BLANK. 어드민에서 정한 열림 방식입니다 |
info.isAppScheme | 주소가 앱 스킴이면 true |
📘 등록하지 않으면
targetType 에 따라 갈립니다. BLANK 는 외부 브라우저로 열리고, SELF 는 아무 동작도 하지 않습니다. 두 경우 모두 앱 안에서 처리하려면 콜백을 등록하고 true 를 돌려줍니다.
요청할 수 있는 설정
상품 영역의 표시 방식도 방송 설정으로 제어됩니다.
| 설정 | 기본 동작 | 바꾸면 달라지는 것 |
|---|---|---|
| 상품 목록 표시 방식 | 목록형 | 격자형으로 바꿔 한 화면에 더 많은 상품을 보여줍니다 |
| 구매 버튼 표시 | 사용 안 함 | 상품마다 구매 버튼을 항상 노출합니다 |
| 찜한 상품 | 사용 안 함 | 시청자가 상품을 찜할 수 있습니다. 회원만 사용할 수 있으며 게스트 채팅을 허용한 방송에서는 동작하지 않습니다 |
Updated 5 days ago
Did this page help you?
