I'm trying to send jplayer progress to google at certain breakpoints i.e. 10%, 20%, 30% etc. But I'm not able to figure out why the progress event is not working. here is my source:
<script type="text/javascript">
$(document).ready(function(){
$("#jquery_jplayer").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
title: "[[*pagetitle]]",
m4a: "[[!urlDecode? &url=`[[*AmazonPodcastLocationM4A]]`]]",
ogg: "[[!urlDecode? &url=`[[*AmazonPodcastLocationOGA]]`]]",
webm: "[[!urlDecode? &url=`[[*AmazonPodcastLocationWEBMA]]`]]",
mp3: "[[!urlDecode? &url=`[[*AmazonPodcastLocationMP3]]`]]",
});
},
ended: function() {
//console.log('the player has ended... ');
sendGoogleEvent('Ended');
},
progress: function() {
var playerTime = Math.round($("#jquery_jplayer").data("jPlayer").status.currentPercentAbsolute);
console.log('inspector track progress event = ' + playerTime);
if(playerTime % 10 === 0){
console.log('sendGA event progress event = ' + playerTime);
sendGoogleEvent('Progress');
}
},
play: function() {
//console.log('tracking play event from inti ');
sendGoogleEvent('Play');
},
pause: function() {
//console.log('tracking pause event from inti ');
sendGoogleEvent('Pause');
},
stop: function() {
// don't log this
//console.log('tracking stop event from inti ');
sendGoogleEvent('Stop');
},
seeking: function() {
//console.log('tracking seeking event from inti ');
sendGoogleEvent('Seeking');
},
seeked: function() {
//console.log('tracking seeked event from inti ');
sendGoogleEvent('Seeked');
},
cssSelectorAncestor: "#jp_container",
swfPath: "/assets/jplayer/jplayer",
supplied: "m4a,ogg,webma,mp3",
useStateClassSkin: true,
autoBlur: false,
smoothPlayBar: true,
keyEnabled: true,
remainingDuration: true,
toggleDuration: true,
});
});
function sendGoogleEvent(event){
var playerTime = Math.round($("#jquery_jplayer").data("jPlayer").status.currentPercentAbsolute);
var realplayerTime = $("#jquery_jplayer").data("jPlayer").status.currentTime;
//if(playerTime >= 0 && event === 'Seeked'){
//event = 'Stopped';
//var percent = (Math.round(playerTime / 10) * 10);
//event = 'Stopped ' + percent + '%';
//}
gtag('event', event, {'event_category' : 'PodCast Events', 'event_label' : '[[*pagetitle]]', 'value' : playerTime});
console.log('sendGoogleEvent: playertime/event/actual = ' + playerTime + ' / ' + event + ' / ' + realplayerTime);
}
$('.jp-stop-custom').click(function(event){
event.preventDefault();
//$("#jquery_jplayer").data("jPlayer").status.currentTime;
var playerTime = Math.round($("#jquery_jplayer").data("jPlayer").status.currentPercentAbsolute);
var percent = (Math.round(playerTime / 10) * 10);
$("#jquery_jplayer").jPlayer('stop');
gtag('event', 'Stopped', {'event_category' : 'PodCast Events', 'event_label' : '[[*pagetitle]]', 'value' : percent});
console.log('sendGoogleEvent: STOP = ' + playerTime);
});
</script>
and an example of the console output:
inspector track progress event = 0 2
inspector track progress event = 19 2
inspector track progress event = 22 2
inspector track progress event = 75 2
inspector track progress event = 78 3
inspector track progress event = 80
sendGA event progress event = 80
sendGoogleEvent: playertime/event/actual = 80 / Progress / 1228.78693
so the first question is really, how does the progress event actually work? when does it fire and why does it seem to be so sporadic?
Second, is there a better way to get progress from jPlayer and send it to GA ?
-thanks
-sean