Video Statistics Guide

VIDEO PACK 통계 연동 가이드를 통해 WECANDEO 전용 Player를 사용하지 않는 경우에도 WECANDEO에 통계 데이터를 전송할 수 있습니다.

VideoStatistics.js 를 아래와 같이 세팅하여 사용하시면 됩니다.

제공된 js 파일 주소를 import 합니다.

<script src=”//play.acs.wecandeo.com/html/utils/videoStatistics.js”></script>

videoStatistics (null,key)

NameDescription
nullnull
key (string)wecandeo video key

onReady (function)

NameDescription
function통계 객체가 데이터 전송 준비가 완료되면 등록된 함수를 호출합니다.
(return value : true or false)

setLog (type,data)

NameDescription
type (string)재생 중인 비디오 상태 값을 전달합니다. (play , pause , complete …)
datatype에 따라 필요한 데이터 값을 전달합니다.

※ videoStatsEvent 참고


videoStatsEvent

NameDescription
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="//play.acs.wecandeo.com/html/utils/videoStatistics.js"></script>
<script>
    // 통계 객체 변수
    var _videoStats;
    // 통계 객체 생성
    _videoStats = new videoStatistics(null, ‘wecandeo video key’);
    // 통계 객체로 영상 진행 상황 전달 함수
    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>

연동 순서 및 흐름

  1. 제공된 주소로 js 파일을 import 합니다.
  2. 비디오 통계 객체를 생성합니다.
  3. 영상 재생 상태에 따라 통계 객체의 setLog 함수를 통해 type과 data를 전달합니다.
  4. 통계 객체는 전송 준비가 완료되면 전달받은 데이터를 wecandeo 통계 서버로 전송합니다.

❗️

주의

광고 및 다른 영상 재생시 wecandeo 통계 파일의 setLog가 호출되지 않도록 주의하셔야 합니다.
비정상적인 통계 데이터가 쌓일 수 있습니다.