Google Analytics with Jwplayer Video Events tracking last time i was stuck to find some good solution related to jwplayer event tracking and i got that hear are my solution
create an HTML and past the code you will see the play,pause,complete,volume event in jquery.
<html>
<head>
<title>test page</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="http://www.longtailvideo.com/jwplayer/jwplayer.js"></head>
<body>
<div id="mediaplayer">
</div>
<ul>
<li>State: <span id="stateText">IDLE</span></li>
<li>time: <span id="elapsedText">0</span></li>
</ul>
<script type="text/javascript"> jwplayer.key = "yourkey=";</script>
<script type="text/javascript">
jwplayer("mediaplayer").setup({
file: 'yourvideofile.mp4',
width: 465,
height: 300,
autostart: true,
events: {
onComplete: function (event) {
var elapsedTime = jwplayer("mediaplayer").getPosition();
var timedurationvalue = ((elapsedTime / 60).toFixed(2));
updateValues();
//ga('send', 'event', 'Video Completes', 'ULR of video or Title', 'Page URL', timedurationvalue);
},
onReady: function (event) {
var elapsedTime = jwplayer("mediaplayer").getPosition();
var timedurationvalue = ((elapsedTime / 60).toFixed(2));
updateValues();
// ga('send', 'event', 'Video Plays', 'ULR of video or Title', 'Page URL', timedurationvalue);
},
onPlay: function (event) {
var elapsedTime = jwplayer("mediaplayer").getPosition();
var timedurationvalue = ((elapsedTime / 60).toFixed(2));
// ga('send', 'event', 'Video Plays', 'ULR of video or Title', 'Page URL', timedurationvalue);
// ga('send', 'event', 'category', 'action', 'label', value);
},
onVolume: function (event) {
updateValues();
alert("onvolume called!");
},
onPause: function (event) {
var elapsedTime = jwplayer("mediaplayer").getPosition();
var timedurationvalue = ((elapsedTime / 60).toFixed(2));
// ga('send', 'event', 'Video Paused', 'ULR of video or Title', 'Page URL', timedurationvalue);
updateValues();
alert("onpause called!");
}
}
});
function setText(id, messageText) {
document.getElementById(id).innerHTML = messageText;
}
function updateValues() {
var state = jwplayer("mediaplayer").getState();
var elapsed = jwplayer("mediaplayer").getPosition();
setText("stateText", state);
setText("elapsedText", (elapsed / 60).toFixed(2));
}
</script>
</body>
</html>
No comments:
Post a Comment