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 an 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?
It basically works like this:
- The Play button is clicked -> Google Analytics
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 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.
This is one example of the source code you might use. Consult the FlowPlayer documentation for more detailed information.
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.