버튼 동작·이벤트 추적

버튼 동작·이벤트 추적 — 소스라이브 플레이어

⏱ 예상 소요 시간: 10분

📋 사전 조건: 플로팅 플레이어 구성 완료

🔧 선택 단계 — 생략하면 버튼이 기본 동작을 합니다

버튼 동작 커스텀 (브릿지 이벤트)

닫기·확대 버튼의 기본 동작을 취소하고 직접 정의한 함수로 대체할 수 있습니다. 아래 함수명을 전역으로 선언하면 기본 동작이 자동으로 비활성화됩니다.
전부 선택 항목이며, 선언하지 않으면 버튼은 기본 동작을 그대로 수행합니다.

함수명	설명
sauceflexFloatingModeFullscreen	확대 버튼의 기본 동작(리다이렉트)이 취소되고 선언된 함수가 실행됩니다.
sauceflexFloatingModeExit	닫기 버튼의 기본 동작이 취소되고 선언된 함수가 실행됩니다. 컨트롤형·배지형 레이아웃 모두 적용됩니다.
sauceflexFloatingTogglePlay	정지/재생 버튼의 기본 동작을 커스텀합니다.

📌 닫기 버튼의 기본 동작(sauceflexFloatingModeExit를 선언하지 않았을 때)은 플로팅 모드에 따라 다릅니다. 기본 플로팅은 플레이어가 화면에서 완전히 제거되어 페이지를 다시 열어야 노출되고, 스크롤 플로팅은 숨겨질 뿐이라 원래 플레이어 위치로 스크롤하면 다시 나타납니다.

JavaScript — 버튼 동작 커스텀 예시

// ⚠️ 함수 내부에서 직접 호출하지 마세요
function sauceflexFloatingModeFullscreen() {
  // 확대 버튼 클릭 시 실행할 커스텀 동작을 정의합니다
  console.log('확대 버튼 클릭');
}
function sauceflexFloatingModeExit() {
  // 닫기 버튼 클릭 시 실행할 커스텀 동작을 정의합니다
  console.log('닫기 버튼 클릭');
}

window.SauceLiveLib.setInit({ broadcastId: '라이브ID를 입력해주세요' });
window.SauceLiveLib.setFloatingType({ type: 'basic' });
window.SauceLiveLib.load();

⚠️ 주의 — 커스텀 함수는 전역으로 선언만 해주세요. 함수 내부에서 직접 호출하면 의도하지 않은 동작이 발생할 수 있습니다.

이벤트 태깅 및 인터랙션 추적

플로팅 플레이어 내 버튼과 컨트롤에는 고정된 data-action 속성이 부여되어 있습니다. 이를 활용해 Adobe Analytics 등의 분석 도구로 사용자 인터랙션을 추적할 수 있습니다.

이벤트	data-action 값	설명
플로팅 닫기	floating-close	닫기 버튼 클릭 (컨트롤형·배지형 공통)
LIVE 배지 클릭	floating-live-badge	배지형 레이아웃의 LIVE 배지 클릭
플로팅 풀스크린	floating-fullscreen	확대 버튼 클릭 (원래 플레이어로 이동)
플로팅 음소거	floating-mute-on / floating-mute-off	음소거 상태에 따라 전환
영상 정지 / 재생	floating-pause / floating-play	플레이어의 재생 상태 변화

JavaScript — Analytics 이벤트 태깅 예시

const sauceLiveEl = document.getElementById('sauce_live');
sauceLiveEl?.addEventListener('click', function(event) {
  const action = event.target.getAttribute('data-action');

  if (action === 'floating-close') {
    // 닫기 이벤트 트래킹 코드 추가
  }
  if (action === 'floating-fullscreen') {
    // 확대 이벤트 트래킹 코드 추가
  }
  if (action === 'floating-mute-on') {
    // 음소거 이벤트 트래킹 코드 추가
  }
  if (action === 'floating-pause') {
    // 일시정지 이벤트 트래킹 코드 추가
  }
});

다음 단계

📋 라이브러리 파라미터 레퍼런스 — 전체 함수와 파라미터

→