Setup google analytics Events and Cuepoints - Demo 3 / 7

Introduction

Flowplayer can work hand-in-hand with Google Analytics. Analytics has a wonderful feature called Event Tracking which is just perfect for Video applications. You can track when your visitors hit play, pause or stop and gather information about the video and at what second each action occurred. Here is a screenshot about statistics that was generated from this page over a one day period.

Analytics Setup

A working demo

Now that you know how to use events it is trivial to setup Google Analytics. What it means is that each time your user does something with your video the event will be sent to Google Analytics. Typically you want to know when a video is started and finished. Here is the JavaScript setup for Analytics:

<!-- inclyde google analytics javascript file -->
<script src="http://www.google-analytics.com/ga.js"></script>

<!-- get handle to google page tracker -->
<script type="text/javascript">
var _tracker = _gat._getTracker("[YOUR TRACKING CODE]");
</script>

Now when you have the analytics variable ready you can use it inside Flowplayer events as follows:

$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.4.swf", {

	clip: {
		// track start event for this clip
		onStart: function(clip) {
			_tracker._trackEvent("Videos", "Play", clip.url);
		},

		// track pause event for this clip. time (in seconds) is also tracked
		onPause: function(clip) {
			_tracker._trackEvent("Videos", "Pause", clip.url, parseInt(this.getTime()));
		},

		// track stop event for this clip. time is also tracked
		onStop: function(clip) {
			_tracker._trackEvent("Videos", "Stop", clip.url, parseInt(this.getTime()));
		},

		// track finish event for this clip
		onFinish: function(clip) {
			_tracker._trackEvent("Videos", "Finish", clip.url);
		}
	},

	// show stop button so we can see stop events too
	plugins: {
		controls: {
			stop: true
		}
	}

});

If you have Firebug installed you can see from the Net panel that Google requests are indeed being made. Firebug is highly recommended in Google Analytics development.

Accessing events from Analytics interface

You should find the Event information on the Google Analytics interface under Content -> Events. However, event tracking is still in beta and you may not see this link on your interface. Luckily there is a workaround for this. Go to Content -> Overview and you will end up with this kind of URL:

https://www._tracker.com/analytics/reporting/content?id=11880....

Now change that URL so that you replace content with events as follows:

https://www._tracker.com/analytics/reporting/events?id=118808....

And BANG you can see events. You can see overview of all your events.

Viewing statistics

There are lots of things you can do there. For example, you can study each action separately. Here we have an overview of all pause events that happened during a one day period on this page.

You can see that on average pause has been pressed at 2.670 seconds. Maybe there was something interesting there? Of course you can track any event you want such as entering fullscreen, seeking, resuming from pause etc. You may want to put scripting inside your event calls and only track when certain conditions are met. It's up to you to determine how you want to organize your event tracking.

DEMO AREA Scripting and JavaScript plugins

Flowplayer Twitter feed