Tracking Flash Videos In Google Analytics

Interested in easily tracking YouTube Videos? We have some updated code. Check out our post here about Easily Tracking YouTube Videos in Google Analytics

In my last post, I talked about why we’d want to track interactions with video in Google Analytics. Here’s the first example of how to actually do that.

Flash video players have been the ubiquitous way of embedding video in web pages for a long time. HTML5’s media elements are beginning to erode the use of Flash for video, but it’s still very common, and it’s really the only way to ensure compatibility with older browsers.

Flash video in a nutshell

The way Flash video works is this: there’s the video file itself (maybe a MPEG or something like that), and there’s a Flash wrapper around the video that handles the playback controls, seeking and streaming, volume control, full-screen view, etc. Ultimately, it’s a .swf file, a Flash file that you can embed in a web page. The browser’s Flash plugin interprets the file and displays it to you.

Tracking Flash in Google Analytics

Flash files are basically self-contained. They have all the content and code inside them to do whatever it is they do (in this case, play a video). So what happens if we want to track this video with Google Analytics?

Adobe actually provides a semi-official code library for doing this; it’s hosted on the Google Code site for Google Analytics. It basically works by bridging between ActionScript (which is the scripting language inside the Flash file) and JavaScript (which is the scripting language on the HTML page on which the Flash file is embedded and how our Google Analytics code is executed).

It basically works like this:

• Something happens in ActionScript -> Tell the Google Analytics JavaScript to send some information (_trackEvent or _trackPageview)

For example:

• The Play button is clicked -> Google Analytics _trackEvent("Video","Play")

So actually getting this to work involves working in the Flash source file and putting in some ActionScript.

What’s that you say? You don’t know ActionScript? You don’t have a dedicated Flash developer? You maybe don’t even have access to the Flash source file? Yeah, I hear you; me neither. So let’s look at an easier alternative that takes care of some of this stuff for you.

FlowPlayer

FlowPlayer is an open-source Flash video player. Basically, it’s the “wrapper” I described above that handles playback controls for a video, and you simply supply your video. (The free version is FlowPlayer-branded, but for a reasonable price you can also use your own branding on the player.)

So, two things already going for it: it’s free, and it’s attractive and configurable. But best of all for our purposes, the contributors to FlowPlayer have already created a plugin that does Google Analytics event tracking for us, automatically. (FlowPlayer is just one example that I’ve used before, but there may be other good, free, GA-supporting Flash video players out there. Leave suggestions in the comments if you’ve used one.)

You can find the details of the setup for the Google Analytics plugin on the FlowPlayer site. You want the “Bridge mode”, assuming you’re embedding videos in your own site with GA tracking code already on the pages. (There’s also “AS3 mode”, which is completely self-contained; you could track your videos embedded on other people’s websites.)

FlowPlayer tracks your video events like this:

• Category: URL of page in which the video is embedded
• Action: various things that happen such as Play, Pause, Finish, Mute, Full Screen, etc.
• Label: filename of the video
• Value: timestamp of the video at which the event occurred (in seconds)

You have some control over the Actions: which events are tracked (do you really want to know if people Mute?) and how they are labeled. You can change these with a simple configuration method right in the code.

Category, Label, and Value can’t be changed in the same way, so you get what you get. However, remember that this is open source, so if you want to alter one of those values (perhaps, especially, the Category value) to better fit in which other Events you might be tracking on your site, you can do that. It’s way easier to start with someone else’s code and make a small change than it is to build it all from scratch yourself.

Example

This is one example of the source code you might use. Consult the FlowPlayer documentation for more detailed information.

Stay Tuned

So far, we’ve covered Flash video players. I’m also going to talk specifically about the case of YouTube video embedded in your site. And I’ll come back to Flash video as a fallback for browsers that don’t support the HTML5 <video> element when we get to that as well.