Mobile app version of vmapp.org
Login or Join
Eichhorn148

: If a user comes to a page and spends 3 minutes watching a video then closes the page, they will have 1 page view with zero time on site. That is because Google Analytics only counts

@Eichhorn148

If a user comes to a page and spends 3 minutes watching a video then closes the page, they will have 1 page view with zero time on site. That is because Google Analytics only counts time on page as between when a user loads the page to when they load the next page. If a user closes the browser window or visits a bookmark next, Google Analytics never gets a report of how long they were on the page.

It is possible to send Google Analytics "events" that let it know that a user is on the page watching the video. On my video pages I use the YouTube JavaScript API to listen for when the user plays or pauses the video. When that happens, I have JavaScript that sends events to the Google Analytics server. I also send an event for being engaged in the video (watching 30 seconds) and ending the video (watching 80%).

This also allows you to visit the event reports in Google Analytics and get much more info about many users actually watching your videos. Here are my scripts (which require jQuery):

function logeventga(category, action, label, value, callback, nonAction){
console.log("Event: " + category + " " + action + (label ? (" " + label) : "") + (value ? (" " + value) : "")); // allow
var event = {
'eventCategory': category,
'eventAction': action
};
if (label) event['eventLabel'] = label;
if (value) event['eventValue'] = value;
if (callback) event['hitCallback'] = callback;
if (nonAction) event['nonInteraction'] = 1;
if (typeof ga == 'function' && ga.hasOwnProperty('loaded') && ga.loaded === true) {
ga('send', 'event', event);
} else if (callback) {
callback.call();
}
}

var videoengagetime = 30;
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onYouTubeIframeAPIReady(){
$('.youtubevideo').each(function(){
var vid = $(this);
var player = null;
var videoid = vid.attr('id');
var vidcontainer = vid.parent();
var clicktoplay = vidcontainer.parent().children(".video-click-play");
if (clicktoplay.length > 0) {
var beforestartvideo = null;
if (!vidcontainer.is(":visible")) {
var pagewidth = $(window).width();
// in light box
vidcontainer.detach();
var vidclose = $('<button class=video-close>X</button>');
var lightbox = $('<div class=video-lightbox></div>');
lightbox.append(vidclose).append("<div class=clear></div>").append(vidcontainer);
var fullscreen = $('<div class=video-fullscreen></div>');
vidcontainer.show();
$("body").append(lightbox).append(fullscreen);
var width = pagewidth * .95;
if (width > 1000) width = 1000;
var height = width * 9 / 16 + 30;
lightbox.css('width', width).css('height', height);
beforestartvideo = function(){
fullscreen.css('height', $(document).height());
fullscreen.show();
lightbox.css('top', ($(window).height() - lightbox.outerHeight()) / 2 + $(window).scrollTop());
lightbox.css('left', ($(window).width() - lightbox.outerWidth()) / 2);
if (player === null || typeof player.playVideo != 'function') {
// If the video isn't ready to play yet, try again soon
setTimeout(startvideo, 200);
} else {
player.playVideo();
}
};
var closevid = function(){
player.pauseVideo();
fullscreen.hide();
lightbox.css('left', '-999em');
};
vidclose.click(closevid);
fullscreen.click(closevid);
}
var startvideo = null;
startvideo = function(){
if (beforestartvideo != null) beforestartvideo.call();
if (player === null || typeof player.playVideo != 'function') {
// If the video isn't ready to play yet, try again soon
setTimeout(startvideo, 200);
} else {
player.playVideo();
}
};
clicktoplay.click(startvideo);
}
player = new YT.Player(videoid, {
videoId: videoid,
events: {
'onStateChange': function(event){
var timestamp = player.getCurrentTime();
var duration = player.getDuration();
var fractionDone = 0;
if (duration > 0) fractionDone = timestamp / duration;
switch (event.data) {
case YT.PlayerState.PLAYING:
player.logvidevent(player.playHappened ? 'resume' : 'play');
player.playHappened = true;
setTimeout(function(){
var interval = null;
interval = setInterval(function(){
if (player.getCurrentTime() >= videoengagetime) {
clearInterval(interval);
player.engaged();
}
}, 250);
}, (videoengagetime) * 1000);
break;
case YT.PlayerState.ENDED:
player.ended();
break;
case YT.PlayerState.PAUSED:
player.engaged();
if (!player.endHappened && fractionDone >= 0.8) player.ended();
else player.logvidevent('pause');
break;
}
}
}
});
player.playHappened = false;
player.endHappened = false;
player.engagedHappened = false;
player.ended = function(){
if (this.endHappened) return;
this.engaged();
this.logvidevent('end');
this.endHappened = true;
if (typeof videoOnEnd == 'function') videoOnEnd.call();
};
player.engaged = function(){
var timestamp = this.getCurrentTime();
var duration = this.getDuration();
var fractionDone = 0;
if (duration > 0) fractionDone = timestamp / duration;
if (timestamp < videoengagetime && fractionDone < 0.8) return;
if (this.engagedHappened) return;
this.logvidevent('engaged');
this.engagedHappened = true;
if (typeof videoOnEngaged == 'function') videoOnEngaged.call();
};
player.logvidevent = function(name){
logeventga('video', name, this.getVideoUrl());
};
});
}

10% popularity Vote Up Vote Down


Login to follow query

More posts by @Eichhorn148

0 Comments

Sorted by latest first Latest Oldest Best

Back to top | Use Dark Theme