In my search for a nice tool to view basic statistics how many times a video has been played on my website, I discovered that this is possible using Piwik and JWPlayer combined with the Madlytics plugin,
In this tutorial I will try to explain briefly how to:
- Set a goal for your website
- Use JWPlayer to trigger a goal when the video reached the point where it is playing 33%
When you have never used goals in Piwik, you will need to activate the Goal-plugin.
This is done by entering the Settings page and activate the Goals plugin in Plugins Management
Now you will be able to create a goal by going to your Dashboard and select Goals.
Add a new goal and give it the name (e.g.) MyVideo
As from Piwik version 0.4.3, you can now set “Goal is triggered” to “manually”.
Prior version: Goal is triggered when visitors: "Visit a given URL (page or group of pages)"
where the URL “contains” : “MyVideo”
For Piwik, this is just enough. Now comes the part where to figure out which id your newly created goal has.
Under Goals, you will now see your newly created goal “MyVideo”.
When clicking Edit existing goals, you will find the Id of your newly made goal.
This is the number you will need to remember once you want to trigger this goal.
For now, I’ll presume it is goal number 1 (idGoal=1)
To place a video using JWPlayer, you will need to visit their website and read the tutorials there.
But to make a quick jump here, I will place the entire code I use on my page which should be simple enough to copy and edit for your needs.
Notice that there is a second plugin here, which is the Autostarter. A nice plugin which will make sure that repeating visitors will see the video play automatically for only 3 times. After that, it will stop auto-play.
At the bottom, I have made a function based on the Piwik code to track a page, but now to track a goal.
This is an additional function, so you do not have to alter your Piwik code at the bottom!
So get the JWPlayer[/url], the [url=http://code.google.com/p/swfobject/]swfObject 2.x and this code, and off you go!
<div id="vplayer1" align="center"><a href="http://www.adobe.com/go/EN_US-H-GET-FLASH">
<img border="0" src="http://www.mysite.nl/images/template/get_flash_player.gif" /></a></div>
<script type="text/javascript">
//<![CDATA[
function createPlayer() {
var flashvars = {
'file':'http://www.mysite.nl/images/video/MyVideo.flv',
'autostart':'true',
'repeat':'false',
'plugins':'madlytics-1,autostarter',
'madlytics.callbacktype':'javascript',
'madlytics.callbacklistener':'logme',
'madlytics.completedpoint':'33',
'autostarter.count':'3',
}
var params = {
'allowfullscreen':'true',
'allowscriptaccess':'always'
}
var attributes = {
'id':'vplayer1',
'name':'vplayer1'
}
swfobject.embedSWF("http://www.mysite.nl/functions/player.swf", "vplayer1", "737", "434", "9.0.115", false, flashvars, params, attributes);
}
createPlayer();
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
function logme()
{
try {
var piwikGoalTracker = Piwik.getTracker(pkBaseURL + "piwik.php", YOURSITE_ID_HERE);
piwikGoalTracker.trackGoal(1); //Equals your idGoal!
}
catch( err ) {}
}
//]]>
</script>