Shadowbox.js Flash media and Google Analytics
Written on July 8, 2009 at 7:19 am, by Jeff McIntosh
Category: Articles
One breakthrough that I made when developing my new website was the ability to track when Shadowbox.js was initiated to view an FLV file. Traditionally the standalone JW FLV Media Player that Shadowbox.js utilizes can call the flashvar “callback” with the value “analytics”. Unfortunately it looks like this flashvar is no longer supported and if it was it would not work because Shadowbox.js uses AJAX to load its player and content.
The premise of the solution comes from Google’s Analytics Help article: How do I track files (such as PDF, AVI, or WMV) that are downloaded from my site? The solution is to place a piece of JavaScript code within the HTML link’s <a> tag. Here is an example that relates to calling Shadowbox.js content from a website:
<a href="myvideo.mp4" rel="shadowbox;width=640;height=480;" onclick="javascript: pageTracker._trackPageview('/videos/myvideo');">Click here to play my video</a>
Here is the breakdown of what is happening: the video myvideo.mp4 is being called to play in my Shadowbox player at a resolution of 640×480. An onclick JavaScript is also being called at the same time telling Google Analytics to track the page view for the category “videos” for the item “myvideo”. The category does not have to be named “videos” however you will want to choose a name that helps keep things organized because this is what will come up in your Google Analytics Top Content Report.
One last note is that you need to place your Google Analytics Tracking code at the top of your page within your <body> tag and not at the bottom. This is necessary because the tracking code needs to be initiated before the onclick Javascript links can work.
Written by Jeff McIntosh
by JMDesign | Pro blog » Blog Archive » JMDesign Website Technologies
On August 26, 2009 at 6:03 pm
[...] Google provides one of the best and free ways to track visitors to your site. Check out my post here on how you can track Shadowbox.js usage using Google [...]