Trying to implement Google Tracking on initial video play right now.
The API gives 6 states,
-1 (unstarted)
0 (ended)
1 (playing)
2 (paused)
3 (buffering)
5 (video cued).
but the state I'm using (1: playing) triggers on every video click. I only want to track the initial play event.
This is what I have so far.
asyncYouTubeApiLoad();
getVideoTrackingValues();
function getVideoTrackingValues() {
$player = $('#player'),
$yt_trackValue = $player.data('tracking-value');
}
executeYouTubeReady();
function executeYouTubeReady() {
// Wait for API
setTimeout(function() {
onYouTubeIframeAPIReady();
}, 200);
}
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
events: {
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange(event) {
// On Play
if (event.data = 1) {
fireVideoEventTracking('video_play');
}
// On End
else if (event.data = 0) {
fireVideoEventTracking('video_complete');
}
}
function fireVideoEventTracking(eventType) {
_gaq.push(['_trackEvent', 'video', eventType, $yt_trackValue]);
}
Ended up adding a boolean to the onReady method and checking against that.
var initialLoad = false;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady() {
initialLoad = true;
}
function onPlayerStateChange(event) {
console.log(event.data);
// On Play
if (event.data == 1 && initialLoad) {
fireVideoEventTracking('video_play');
initialLoad = false;
} else if (event.data == 0) {
fireVideoEventTracking('video_complete');
}
}