Guides

모아보기 페이지 설치하기 v1.3.3

Suggest Edits

소스라이브 모아보기란 자사몰 웹에 라이브를 진행했던 영상(VOD) 및 편성표를 보여주는 서비스입니다. 이 챕터는 서비스 시스템을 내부 웹에서 보여주도록 구현하기 위한 가이드 입니다.

게스트(비로그인) 사용자로 사용하기

자바 스크립트와 스타일을 페이지에서 불러오기 위해서는 아래의 코드의 적용이 필요합니다.

<div id='sauce_collect'></div>

<script src="https://collection.sauceflex.com/static/js/SauceWebLib.js"></script>
<script>
  window.SauceWebLib.setInit({ partnerId: 'service1234' });
  window.SauceWebLib.load('sauce_live')
</script>


// optional

<div id='sauce_collect'></div>
<script src="https://collection.sauceflex.com/static/js/SauceWebLib.js"></script>
<script>
  window.SauceWebLib.setInit({  
   // 담당 AM을 통해 전달 받으신 partnerId 를 입력해주세요. 필수값입니다.
    partnerId: 'service1234',
    /* type boolean (defaultValue:true)*/
    broadcast: true,   
    //라이브 미리보기 영역의 노출여부를 설정할 수 있습니다.
    /* type boolean (defaultValue:true)*/
    schedule: true,    
    //파트너사 라이브 방송 스타일에 맞게 라이브 미리보기 형식을 "이미지형" "피드형" "리스트형"으로 설정할 수 있습니다.
    /* type image | feed | list (defaultValue image) */
    scheduleType: "feed",      
    //큐레이션 카테고리 영역의 노출여부를 설정할 수 있습니다.
    /* type boolean (defaultValue:true)*/
    curation: true,            
    //큐레이션 영역의 노출 여부를 설정할 수 있습니다.
    /* type boolean (defaultValue:true)*/
    curationDetail: true,  
    //비디오 썸네일 자동재생 여부
    /* type boolen (defaultValue:false)*/
    autoPlay:false,
    // 검색바 노출여부
    /* type boolen (defaultValue:true)*/
    searchBar:true,  
    // 방송카드 리스트 새창이동 설정
    // 기본은 현재창 이동이며, 새창이동을 webview,pc,mobile값에 따라 설정할 수 있습니다.
    /* type string (defaultVlaue:'') */        
    broadcastOpenLink:"webview,pc,mobile",
});
  window.SauceWebLib.load('sauce_live')
</script>

⚠️

최초 연동 시에는 편성표나 라이브가 등록되어 있지 않기 때문에, 빈 화면이 출력 됩니다.

라이브나 편성표 등록을 하고 테스트를 진행해 보세요.

간편 인증 사용하기 (일반 텍스트 형식의 nickName 및 memberId)

비회원, 간편 인증, JWT 인증 방식을 지원합니다.

 <div id='sauce_collect'></div>
  <script>
    window.SauceWebLib.setInit({ partnerId:  'service1234' });
    window.SauceWebLib.setMemberObject({
      memberId: 'saucelive',
      nickName: '소스라이브***',
      age: '10',
      gender: 'm'
     });
    window.SauceWebLib.load()
  </script>

JWT 인증 사용하기

간편 인증과 JWT 인증으로 사용자 정보를 연동할 수 있습니다.

간편 인증은 빠르고 간편하게 인증 사용을 할 수 있지만, 보안 강화와 임의의 사용자 ID가 어뷰징 되는 것을 방지하기 위해 JWT 인증을 할 수 있습니다. JWT Token 생성

<div id='sauce_collect'></div>
<script src="https://collection.sauceflex.com/static/js/SauceWebLib.js"></script>
   window.SauceWebLib.setInit({ partnerId:  'service1234' });
   window.SauceWebLib.setMemberToken(JWT:string)
   window.SauceWebLib.load() //default 'sauce_collect'
</script>

모듈화 사용

페이지 내 적용하려는 위치에 태그를 다음과 같이 추가합니다. id 속성에는 임의의 값을 지정합니다.
여러 요소에 적용하려는 경우, 복수의 태그를 임의의 위치에 추가합니다. 단, 중복되지 않는 id 속성의 값을 지정합니다.

큐레이션 모듈화

<div id='curation_1'></div>
<div id='curation_2'></div>
<script src="https://collection.sauceflex.com/static/js/SauceWebLib.js"></script>
<script>
   window.SauceWebLib.setInit({ partnerId:  'service1234' });
   window.SauceWebLib.loadCuration({ curationId: "{{임의의 큐레이션ID}}", elementId: "curation_1" });
 // 임의의 큐레이션ID 는 소스라이브 어드민에서 확인가능합니다.(모아보기=>큐레이션리스트에서 개별 큐레이션 클릭해서 확인)
 // elementId 는 curation_1 와 같이 지정 위치에 렌더링할 ID 를 지정합니다.
</script>
// or
<script>
   window.SauceWebLib.setInit({ partnerId:  'service1234' });
   window.SauceWebLib.loadCuration({ curationId: "{{임의의 큐레이션ID}}", elementId: "curation_1" });
   window.SauceWebLib.loadCuration({ curationId: "{{임의의 큐레이션ID}}", elementId: "curation_2" });
</script>
// elementId 는 curation_1 와 같이 지정 위치에 렌더링할 ID 를 지정하며 여러개의 큐레이션을 세팅하여 모듈화 가능합니다.

큐레이션 리스트 모듈화

<div id='curation_1'></div>
<script src="https://collection.sauceflex.com/static/js/SauceWebLib.js"></script>
<script>
   window.SauceWebLib.setInit({ partnerId:  'service1234' });
   window.SauceWebLib.loadCurationList({ elementId: "curation_1" });
</script>
// elementId 는 curation_1 와 같이 지정 위치에 렌더링할 ID 에 어드민 페이지에 공개 처리된 모든 큐레이션을
// 확인할 수 있습니다.

캘린더 모듈화

<div id='calendar'></div>
<script src="https://collection.sauceflex.com/static/js/SauceWebLib.js"></script>
   window.SauceWebLib.setInit({ partnerId:  'service1234' });
   window.SauceWebLib.loadCalendar({ elementId: "calendar" });
     // elementId 는 calendar 와 같이 지정 위치에 렌더링할 ID 를 지정합니다.
</script>

배너 모듈화

<div id='topBanner'></div>
<script src="https://collection.sauceflex.com/static/js/SauceWebLib.js"></script>
   window.SauceWebLib.setInit({ partnerId:  'service1234' });
   window.SauceWebLib.loadTopBanner({ elementId: "topBanner" });
     // elementId 는 topBanner 와 같이 지정 위치에 렌더링할 ID 를 지정합니다.
</script>

스케쥴 모듈화 (라이브 미리보기)

<div id='schedule'></div>
<script src="https://collection.sauceflex.com/static/js/SauceWebLib.js"></script>
   window.SauceWebLib.setInit({ partnerId:  'service1234' });
   window.SauceWebLib.loadSchedule({ 
     scheduleType: 'image' | 'feed' | 'list', 
     elementId: "schedule"
   });
     // elementId 는 schedule 와 같이 지정 위치에 렌더링할 ID 를 지정합니다.
</script>

라이브 다시보기 모듈화

<div id='broadcast'></div>
<script src="https://collection.sauceflex.com/static/js/SauceWebLib.js"></script>
   window.SauceWebLib.setInit({ partnerId:  'service1234' });
   window.SauceWebLib.loadBroadcast({ 
     elementId: "broadcast",
     title: "최근 방송 보기" // 해당 모듈에 제목을 사용하지 않을 경우 생략 가능
   });
     // elementId 는 schedule 와 같이 지정 위치에 렌더링할 ID 를 지정하는 필수 값입니다.
     // title 을 통해 라이브 방송 영역의 제목을 입력할 수 있습니다. 
     // title 은 선택 값이며, 해당 기능은 모듈화 방식만 지원합니다.
</script>

예시 샘플 (기본형)

<html>
  <head>
    <title>sauce live example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover, shrink-to-fit=no" />
    <script src="https://collection.sauceflex.com/static/js/SauceWebLib.js"></script>
    // 스테이지 운영시에는 https://stage.collection.sauceflex.com/static/js/SauceWebLib.js 을 사용해주세요
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        background-color: #333;
      }
     // 필요한 css 는 추가적으로 세팅해도 무관합니다.
    </style>
  </head>
  <body>
   <div id='sauce_collect'></div>
  </body>
  <script>
    window.SauceWebLib.setInit({ partnerId:  'service1234' });
    window.SauceWebLib.setMemberObject({
      memberId: 'saucelive',
      nickName: '소스라이브***',
      age: '10',
      gender: 'm'
     });
    window.SauceWebLib.load()
  </script>
</html>

예시 샘플 (모듈형)

<html>
  <head>
    <title>sauce live example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover, shrink-to-fit=no" />
    <script src="https://collection.sauceflex.com/static/js/SauceWebLib.js"></script>
    // 스테이지 운영시에는 https://stage.collection.sauceflex.com/static/js/SauceWebLib.js 을 사용해주세요
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        background-color: #333;
      }
     // 필요한 css 는 추가적으로 세팅해도 무관합니다.
    </style>
  </head>
  <body>
  <div id='schedule'></div>
  <div id='calendar'></div>
  <div id='broadcast'></div>

  </body>
  <script>
    window.SauceWebLib.setInit({ partnerId:  'service1234' });
    window.SauceWebLib.loadSchedule({scheduleType:'feed', elementId: "schedule" });
    window.SauceWebLib.loadCalendar({ elementId: "calendar" });
    window.SauceWebLib.loadBroadcast({ elementId: "broadcast" });
  </script>
</html>

웹 전용 브릿지 설정(기본형)

📘

웹 전용 브릿지 설정이란?

지정한 동작에서 원하는 커스텀 설정으로 변경하여 동작을 수정할수 있는 기능입니다.

// ex) 기본 동작 모아보기에서 방송 클릭시 기본 설정된 방송 URL 로 이동 
 function flexCollectMoveBroadcast(params){
         console.log('flexCollectMoveBroadcast',params)
     }
// 선언이후 방송 클릭시 console.log 로 방송 데이터를 확인할수 있게되며 방송 URL 로 이동되는 동작은 취소됨


<html>
  <head>
    <title>sauce live example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover, shrink-to-fit=no" />
    <script src="https://collection.sauceflex.com/static/js/SauceWebLib.js"></script>
    // 스테이지 운영시에는 https://stage.collection.sauceflex.com/static/js/SauceWebLib.js 을 사용해주세요
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        background-color: #333;
      }
     // 필요한 css 는 추가적으로 세팅해도 무관합니다.
    </style>
  </head>
  <body>
  <div id='sauce_collect'></div>
  </body>
  <script>
    // function flexCollectEnter(){
    //     console.log('flexCollectEnter')
    // }
    //  모아보기 랜딩되었을때 실행
    // function flexCollectLogin(){
    //     console.log('flexCollectLogin')
    // }
    //  모아보기 로그인 버튼 클릭시
    // function flexCollectMoveBroadcast(params){
    //   console.log('flexCollectMoveBroadcast',params)
    // }
    //  방송 카드 클릭시 
    // function flexCollectMoveProduct(params){
    //     console.log('flexCollectMoveProduct',params)
    //   }
    //  방송 상품 카드 클릭시 
    // function flexCollectMoveTopBanner(params){
    //     console.log('flexCollectMoveTopBanner',params)
    //   }
    // Top 배너 클릭시
    // function flexCollectApplyForNotification(params){
    //     console.log('flexCollectApplyForNotification',params)
    //   }
    // 알람 버튼 클릭시
    // function flexCollectCancelForNotification(params){
    //     console.log('flexCollectCancelForNotification',params)
    //   }
   window.SauceWebLib({  
    partnerId: 'service1234',
   });
  </script>
</html>

📘

알람 전용 브릿지 설정에 대해서

알람 전용 브릿지 사용시 모비두가 설정한 기본 모달이 나오지 않으며 UI 의 변경이 필요할 경우 다른 알림 함수를 실행시켜줘야 모아보기의 UI 가 변경됩니다. 아래의 dispatchEvent 함수를 실행시켜 줄 경우에만 전체 모듈화된 알람 UI 의 상태값이 변경되며 UI 로 확인할 수 있습니다.


// flexCollectApplyForNotification 에서 broadcastId 를 가져올수 있습니다.
const applyBroadcastObj={ broadcastId:broadcastId  }  
dispatchEvent(window.flexCollectApplyCheckNotification(applyBroadcastObj))
// flexCollectCancelForNotification 에서 broadcastId 를 가져올수 있습니다.
const canceledBroadcastObj={ broadcastId:broadcastId  }
dispatchEvent(window.flexCollectCancelCheckNotification(canceledBroadcastObj))


 function flexCollectApplyForNotification(params){
        console.log('flexCollectApplyForNotification',params:NotificationParams)
        const applyBroadcastObj={ broadcastId:params.broadcastId  }  
        dispatchEvent(window.flexCollectApplyCheckNotification(applyBroadcastObj))
     }
 function flexCollectCancelForNotification(params:NotificationParams){
         console.log('flexCollectCancelForNotification',params)
         const canceledBroadcastObj={ broadcastId:params.broadcastId  }
         dispatchEvent(window.flexCollectCancelCheckNotification(canceledBroadcastObj))
     }

//알람의 params 
type NotificationParams= {
    memberId: String, // 고객 ID
    programmingStartDt:String, // 방송 시작시간 ex(UTC"2022-02-01T06:34:00.000Z")
    programmingEndDt:String,// 방송 종료시간 ex(UTC"2022-02-02T06:34:00.000Z")
    broadcastId: String, // 방송ID
    accessToken: String // JWT TOKEN
}


적용 이미지 (기본형)

연동방법 (Webview)

Bridge & Message

아래와 같은 Bridge로 메시지가 전달됩니다. 각 메시지는 JSON 객체가 stringify 되어 전달됩니다.

  • flexCollectEnter(Void) - 페이지 진입 시 자동으로 호출
// 파라미터 없음
  • flexCollectMoveProduct(message: String) - 상품 클릭 시 호출
// Stringified JSON
 {
           productId: String,//상품ID
           productUrl: String, //상품등록URL
           broadcastUrl: String, //라이브 OR VOD플레이어URL
 }
  • flexCollectMoveBroadcast(message: String) - 라이브,VOD 클릭 시 호출
// Stringified JSON
 {
        broadcastUrl: String, //라이브 OR VOD플레이어URL
 }
  • flexCollectMoveTopBanner(message: String) - TOP 배너 클릭 시 호출
// Stringified JSON
 {
    bannerLinkUrl: String, //배너링크URL
 }
  • flexCollectMoveContentBanner(message: String) - 콘텐츠 배너 클릭 시 호출
// Stringified JSON
{
    bannerLinkUrl: String, //콘텐츠배너링크URL
}
  • flexCollectApplyForNotification(message: String) - 알림 신청 동의 버튼 클릭 시 호출
// Stringified JSON
{
    memberId: String, // 고객 ID
    programmingStartDt:String, // 방송 시작시간 ex(UTC"2022-02-01T06:34:00.000Z")
    programmingEndDt:String,// 방송 종료시간 ex(UTC"2022-02-02T06:34:00.000Z")
    broadcastId: String, // 방송ID
    accessToken: String // JWT TOKEN
}
  • flexCollectCancelForNotification(message: String) - 알림 신청 취소 클릭시 호출
// Stringified JSON
{
    memberId: String, // 고객 ID
    programmingStartDt:String, // 방송 시작시간 ex(UTC"2022-02-01T06:34:00.000Z")
    programmingEndDt:String,// 방송 종료시간 ex(UTC"2022-02-02T06:34:00.000Z")
    broadcastId: String, // 방송ID
    accessToken: String // JWT TOKEN
}

Updated 6 months ago