VIDEOPACK 통계 연동 가이드를 통해 WECANDEO 전용 Player를 사용하지 않는 경우에도 WECANDEO에 통계 데이터를 전송 할 수 있습니다.
VideoStatistics.js 를 아래와 같이 세팅하여 사용하시면 됩니다.
제공된 js 파일 주소를 import 합니다.
{DOMAIN}
- Domain은 VIDEOPACK 생성 시 발급 받은 도메인입니다.
- Domain은 VIDEOPACK 관리자 화면(CMS)의 [계정관리 > 도메인 > 도메인 정보]에서 확인할 수 있습니다.
<script src="//{DOMAIN}/player/js/v1.0.7/utils/videoStatistics.js"></script>
videoStatistics (key,domain)
| Name | Description |
|---|---|
| key (string) | wecandeo video key |
| domain (string) | wecandeo service domain |
onReady (function)
| Name | Description |
|---|---|
| function | 통계 객체가 데이터 전송 준비가 완료되면 등록된 함수를 호출합니다. (return value : true or false) |
setLog (type, data)
| Name | Description |
|---|---|
| type (string) | 재생중인 비디오 상태 값을 전달합니다. (play , pause , complete …) |
| data | type에 따라 필요한 데이터 값을 전달합니다. |
※ videoStatsEvent 참고
videoStatsEvent
| Name | Description |
|---|---|
| READY : “playerReady” | 플레이어가 준비되면 update 함수로 전달 합니다. ( data : 없음 ) |
| IDLE : “idle” | 영상 재생이 완료 된 후 준비 화면으로 전환되면 update 함수로 전달합니다. ( data : 없음 ) |
| PLAY : “play” | 영상 재생이 시작되면 update 함수로 전달합니다. ( data : 없음 ) |
| PAUSE : “pause” | 영상이 일시정지되면 update 함수로 전달합니다. ( data : 없음 ) |
| COMPLETE : “complete” | 영상 재생이 완료되면 update 함수로 전달합니다. ( data : 없음 ) |
| SEEK : “seek” | 재생 위치가 변경되면 update 함수로 전달합니다. ( data : object {seeking : true or false , time : 10 (int – 현재 재생 시간) } ) ※ Sample 재생 위치 변경 시 : { seeking : true , time : 10 } 재생 위치 변경 완료 시 : { seeking : false , time : 20 } |
| VIDEO_TIME : “videoTime” | 영상이 재생 중일 때 update 함수로 전달합니다. ( data : object {type : “currentTime” or “duration” , value : 20 (int) } ) ※ Sample 전체 재생시간 : { type : “duration” , time : 145 (Number) } 현재 재생시간 : { type : “currentTime” , time : 7.345 (Number) } |
| VIDEO_CHANGE : “videoChange” | 영상이 변경되면 update 함수로 전달합니다. ( data : object{ key : wecandeo video key (string) } ) |
Sample Code
<script src="//{DOMAIN}/player/js/v1.0.7/utils/videoStatistics.js"></script>
<script>
// 통계 객체 변수
var _videoStats;
// 통계 객체 생성
videoStats = new videoStatistics('wecandeo video key','service.domain.com');
// 통계 객체로 영상 진행 상황 전달 함수
function sendStatistics(type, data) {
// setLog 함수로 영상 진행 상황 전달
_videoStats.setLog(type, data);
}
window.onload = function () {
var video = document.getElementById('video');
video.addEventListener('play', function () {
sendStatistics(videoStatsEvent.PLAY);
});
video.addEventListener('pause', function () {
if (this.currentTime == this.duration)
return;
sendStatistics(videoStatsEvent.PAUSE);
});
var isDuration = false;
video.addEventListener('timeupdate', function () {
if (!isDuration) {
sendStatistics(videoStatsEvent.VIDEO_TIME, {
type: "duration",
value: video.duration
});
isDuration = true;
}
sendStatistics(videoStatsEvent.VIDEO_TIME, {
type: "currentTime",
value: video.currentTime
});
});
video.addEventListener('durationchange', function () {
sendStatistics(videoStatsEvent.VIDEO_TIME, {
type: "duration",
value: video.duration
});
});
video.addEventListener('loadedmetadata', function () {
sendStatistics(videoStatsEvent.VIDEO_TIME, {
type: "duration",
value: video.duration
});
});
video.addEventListener('seeking', function () {
sendStatistics(videoStatsEvent.SEEK, {
seeking: true,
time: video.currentTime
});
});
video.addEventListener('seeked', function () {
sendStatistics(videoStatsEvent.SEEK, {
seeking: false,
time: video.currentTime
});
});
video.addEventListener('ended', function () {
sendStatistics(videoStatsEvent.COMPLETE);
});
// 페이지 로딩과 통계 로딩 및 영상 재생 준비가 완료 되었을 때
sendStatistics(videoStatsEvent.READY);
}
function videoChange() {
sendStatistics(videoStatsEvent.VIDEO_CHANGE, {key:'wecandeo video key'});
video.src = 'wecandeo video url';
}
</script>
연동 순서 및 흐름
- 제공된 주소로 js 파일을 import 합니다.
- 비디오 통계 객체를 생성합니다.
- 영상 재생 상태에 따라 통계 객체의 setLog 함수를 통해 type 과 data 를 전달합니다.
- 통계 객체는 전송 준비가 완료되면 전달받은 데이터를 wecandeo 통계 서버로 전송합니다.
주의
광고 및 다른 영상 재생시 wecandeo 통계 파일의 setLog가 호출되지 않도록 주의하셔야 합니다.
비정상적인 통계 데이터가 쌓일 수 있습니다.