Plyr은 HTML5 비디오 플레이어로, 사용자가 웹 사이트나 앱에서 비디오 컨텐츠를 재생하도록 도와줍니다. Google Analytics는 웹 트래픽을 추적하고 분석하기 위한 도구입니다. 이 두 가지를 연동하여 Plyr을 사용하는 동안 Google Analytics를 활용할 수 있습니다.
Plyr 설정
먼저 Plyr을 웹 사이트에 추가하고 설정해야 합니다. Plyr의 공식 문서에서 다운로드 링크 및 설치 방법을 확인할 수 있습니다.
Google Analytics 설정
Google Analytics를 사용하기 위해 Google Analytics 계정을 만들고 웹 사이트에 추적 코드를 추가해야 합니다. Google Analytics의 공식 문서에서 자세한 단계를 확인할 수 있습니다.
Plyr과 Google Analytics 연동하기
Plyr과 Google Analytics를 연동하기 위해 Plyr의 이벤트를 사용하여 Google Analytics 이벤트 트래킹을 설정할 수 있습니다.
이벤트 기능을 사용하기 위해 Plyr에 이벤트 리스너를 추가하고, Plyr 이벤트가 발생할 때마다 해당 이벤트를 Google Analytics에 보내도록 코드를 작성해야 합니다.
아래는 Plyr 이벤트를 사용하여 Google Analytics에 이벤트를 보내는 예제 코드입니다.
const player = new Plyr('#video-player');
// Plyr 이벤트 리스너 추가
player.on('play', () => {
// Google Analytics에 이벤트 전송
ga('send', 'event', 'Video', 'Play', 'Video Played');
});
player.on('pause', () => {
// Google Analytics에 이벤트 전송
ga('send', 'event', 'Video', 'Pause', 'Video Paused');
});
player.on('ended', () => {
// Google Analytics에 이벤트 전송
ga('send', 'event', 'Video', 'Ended', 'Video Ended');
});
위 코드에서 #video-player는 Plyr이 적용된 비디오 플레이어의 ID입니다. 이벤트 발생 시 Plyr은 play, pause, ended 이벤트를 제공합니다.
위 예제 코드는 Plyr 이벤트와 Google Analytics 이벤트를 연동하는 방법을 보여줍니다. 이와 같은 방법으로 다른 Plyr 이벤트를 감지하고 Google Analytics에 이벤트를 보낼 수 있습니다.
결론
Plyr과 Google Analytics를 연동하여 웹 사이트의 비디오 컨텐츠에 대한 동작을 추적하고 분석할 수 있습니다. Plyr 이벤트와 Google Analytics 이벤트를 연결하는 방법을 배웠으므로, 이제 Plyr과 Google Analytics를 함께 사용하여 비디오 컨텐츠에 대한 유용한 인사이트를 얻을 수 있습니다.