Hello everyone,
Here’s a quick HOWTO about tracking flowplayer video-clips with piwik. It’s easy to do and it may come in handy to somebody:
Flowplayer is free even for commercial use, it’s highly adjustable and nice looking.
To track video-clip actions you need to use manual type of goals. I’ll assume you have two:
- Video clip started (goal id = 1)
- Video clip has been finished (goal id = 2)
<head>
...
<script src="/flowplayer/flowplayer-3.2.4.min.js" type="text/javascript"></script>
...
</head>
<body>
...
<!-- this A tag is where your Flowplayer will be placed. it can be anywhere -->
<a
href="path to your clip"
style="display:block;width:520px;height:330px"
id="player">
</a>
<!-- Here we configure flowplayer and do some goal tracking! -->
<script type="text/javascript">// <![CDATA[
flowplayer("player", "/flowplayer/flowplayer-3.2.5.swf",{
clip:{
url: '/flowplayer/videoclip.flv',
onStart: function() { piwikTracker.trackGoal(1); }, // track goal no. 1
onFinish: function() { this.stop(); piwikTracker.trackGoal(2); }, // track goal no. 2
autoPlay: false, // do not auto start playing
autoBuffering: true, // auto buffering
scaling: 'orig' // by default flowplayer changes aspect ratio in full-screen mode. this option prevents this behavior
}
});
// ]]></script>
...
</body>
Hope this will help someone.