Ниже приведен код, который я использую для измерения, когда пользователь начинает смотреть видео, смотрит все видео или смотрит 25%, 50% или 75%.Затем информация отправляется в GA.Этот код используется для видео, которые находятся в теге видео.Но как я могу изменить этот код для работы с mp4, которые находятся внутри тега <a>
, как этот <a data-type="iframe" data-src="video1.mp4"><img src="someimage.png"></a>
.
(function() {
document.addEventListener('DOMContentLoaded', init, false);
var videoId, dur, quarter, stat;
function init() {
for (var video of document.querySelectorAll('video')) {
video.addEventListener('play', videoPlay, false);
video.addEventListener('ended', videoEnd, false);
video.addEventListener('timeupdate', videoTimeUpdate, false);
}
}
function setKeyFrames(duration) {
if (dur) {
return;
}
dur = duration;
quarter = duration / 4;
}
function videoTimeUpdate(e) {
var videoId = e.target;
var curTime = videoId.currentTime;
if (curTime >= quarter && curTime < quarter * 2 && stat !== 1) {
gtag('event', 'User Watched 25% Of Video', {
'event_category': 'Video',
'event_label': videoId.id
});
stat = 1;
} else if (curTime >= quarter * 2 && curTime < quarter * 3 && stat !== 2) {
gtag('event', 'User Watched 50% Of Video', {
'event_category': 'Video',
'event_label': videoId.id
});
stat = 2;
} else if (curTime >= quarter * 3 && curTime < dur && stat !== 3) {
gtag('event', 'User Watched 75% Of Video', {
'event_category': 'Video',
'event_label': videoId.id
});
stat = 3;
}
}
function videoPlay(e) {
var videoId = e.target;
gtag('event', 'User Played Video', {
'event_category': 'Video',
'event_label': videoId.id
})
setKeyFrames(this.duration);
}
function videoEnd(e) {
var videoId = e.target;
stat = 4;
gtag('event', 'User Watched ALL Of Video', {
'event_category': 'Video',
'event_label': videoId.id
});
}
})();