If you are using the WordPress AudioPlayer plugin on your site, you know that it’s a versatile flash player with many options. The missing option from my point of view is tracking the playing of the audio tracks themselves. I’ll show you how to add Google Analytics tracking to the player, so you can get an idea of which of your tracks are most popular.
This technique should work on any flash swf that has an external javascript controller. The same principles apply. It also works just fine with WordPress AudioPlayer’s standalone version that does not require WordPress on your site.
Your site must be using the new Google asynchronous tracking code, and it must be in your page header, not your page footer. If you don’t want to put the code in yourself, check out the WP plugin Google Analyticator. You can, of course, just paste the async code directly in your header if you want to be old-school about it. Remember to remove your old tracking code in your footer.
Once you have migrated your site to the new code (and it’s benefits), you’ll want to open your /wp-content/plugins/audioplayer/assets/audioplayer.js file. This is a little hard to read, as it’s been compressed to make pageload faster. You can see the whole file, in it’s uncompressed state on the AudioPlayer’s SVN server. We’ll be looking for the activate() function in the javascript, which is the function call that interacts with the swf when the player is, well, activated.
It looks like this in the uncompressed version:
[code lang=”js”]
activate: function (playerID, info) {
if (activePlayerID && activePlayerID != playerID) {
getPlayer(activePlayerID).close();
}
activePlayerID = playerID;
},
[/code]
And like this in the compressed version:
[code lang=”js”]
activate:function(I,J){if(D&&D!=I){B(D).close()}D=I},
[/code]
Before editing this code, you’ve got to decide on a URL structure you’ll be reporting to Google. I’m suggesting that you choose something that is unlike any other content on your site, so you can isolate your audioplayer plays. Choose a URL prefix that is unlike anything else in your site. For this example, we’ll report “/audioplayer/” as the base URL. Your URL should not be that of a real page on your site. We’re pushing “fake” pages to google to record our plays.
Now (after backing up audioplayer.js), edit the javascript file, and find the line for “activate”, and right after the D=I;, add our google page tracker:
[code lang=”js”]
activate:function(I,J){if(D&&D!=I){B(D).close()}D=I;
_gaq.push([‘_trackPageview’, ‘/audioplayer/’+ J[‘trackInfo’][‘artist’].replace(/\s/g,’_’) +’/’+ J[‘trackInfo’][‘title’].replace(/\s/g,’_’) ]);
},
[/code]
J is the javascript object holding information about the track, so by sending the J[‘trackInfo’][‘artist’] and J[‘trackInfo’][‘title’] as the page visited, we end up with URL’s in our google reports like /audioplayer/<artist_name>/<title>/
We are also replacing spaces in the the artist name and track name with underscores. The sites I run audioplayer on do not have multiple tracks per player, if you do have that on your site, you may find that what your are sending to Google is an array of title, which will appear as [object Object]. I’ll (perhaps) tackle that in a future article.
Troubleshooting: To see the data array, in Firefox, add this to your code right before the _gaq.push line:
[code lang=”js”]alert(J.toSource());[/code]
You’ll get a popup javascript alert that will show you the whole info array. (remember to take out the code when you are done looking!). This technique requires you to edit plugin files directly. You’ll have to patch your audioplayer every time you update it in WordPress. That’s a small price to pay for the extra functionality, and we hope that 1PixelOut extends their fantastic audioplayer to have these settings built right in the core in the future.
If you are interested in hiring us for javascript customization or other design / programming needs, send us a message