It is becoming more and more common to see sites that have YouTube videos installed on their blogs and websites. It’s such an embedded Youtube, but I’ll show you how to track it with Google Analytics whether it’s being played.
Note: On 03/17/2016, we changed the loading method of Youtube and changed the tracking code accordingly.
HTML code for video installation
In this example, to simplify the tracking code, change the embedded Youtube HTML code as follows. All you have to do is add ?version=3&enablejsapi=1 after the video URL specified in the src attribute of the iframe tag . This makes it possible to detect the playback status of the Youtube player using JavaScript.
<iframe width="420" height="315" src="https://www.youtube.com/embed/mnvAOaHz1EQ?version=3&enablejsapi=1" frameborder="0" allowfullscreen></iframe>Google Analytics tracking code
The code below assumes that jQuery has already been introduced on the site. If jQuery is not installed, consult with the site developer to install jQuery, or rewrite the code below in a format that does not use jQuery (a format suitable for the site you are actually using). please get it Also, Google Analytics assumes that Universal Analytics has been installed on your site in the usual way (if you are using Google Tag Manager, remove the comment out for dataLayer variable handling and please use).
$(document).ready(function () {
$.getScript('https://www.youtube.com/player_api', function () {
YT.ready(function () {
var getStateChangeEventName = function (event_id) {
if (event_id == YT.PlayerState.ENDED) return 'YT.PlayerState.ENDED';
if (event_id == YT.PlayerState.PLAYING) return 'YT.PlayerState.PLAYING';
if (event_id == YT.PlayerState.PAUSED) return 'YT.PlayerState.PAUSED';
if (event_id == YT.PlayerState.BUFFERING) return 'YT.PlayerState.BUFFERING';
if (event_id == YT.PlayerState.CUED) return 'YT.PlayerState.CUED';
if (event_id == YT.PlayerState.UNSTARTED) return 'YT.PlayerState.UNSTARTED';
return 'Unknown';
};
$('iframe').filter(function(i, element){
return element.src.indexOf('youtube.com/embed/') >= 0;
}).each(function(i, element) {
var player = new YT.Player(element);
player.addEventListener('onStateChange', function (e) {
var videoData = e.target['getVideoData']();
var actionName = getStateChangeEventName(e["data"]);
var labelName = videoData.video_id + " : " + videoData.title;
ga('send', 'event', 'Youtube', actionName, labelName, {
'nonInteraction': true
});
// dataLayer.push({
// 'event': 'YoutubeEvent',
// 'youtube': {
// 'action': actionName,
// 'title': videoData.title,
// 'video_id': videoData.video_id
// }
// });
});
});
});
});
});summary
Now you can track the playback status of the embedded Youtube player pasted on your site with Google Analytics. By using this event tracking, sites that use a lot of videos will be able to customize a higher level, such as “If you watch a Youtube video to the end, it will be converted.”
