Google Analytics is an amazing tool. The notion that something so powerful could be free for so many is astonishing. OK, now that you know I love Google Analytics, lets dive into tackling something that many people would want to do, but is not automatically configured when you begin using the service.
You have a website and you link to PDFs, Word, PowerPoint, video, and other files and you want to know stats on each one. This is quite easy to configure with the addition on a little JavaScript.
JavaScript
Google Analytics comes in two flavors using ga.js or the newer analytics.js. I'm going to use the Classic Google Analytics ga.js as that's what I have on the site. Using ga.js you can achieve the download stats for files using two different methods. But first we'll set up the script we'll use regardless of the method you choose.Collect the Links Using jQuery
$("a[href$='.pdf'],a[href$='.doc']")
This tells jQuery to find all of the "A" tags with an href containing the search string of .pdf or .doc. You can add more to catch all the document types you need.
Change Target to "_blank"
$("a[href$='.pdf'],a[href$='.doc']").attr('target', '_blank')
This tells the browser to spawn a new window for the file. This seemed to fix an issue where the click was not being logged by GA. Most likely a timeout issue.
Add "Onclick" Function
$("a[href$='.pdf'],a[href$='.doc']").attr('target', '_blank').click(function() {
// call Google Analytics to record in stats
});
This adds the onclick function to every link collected.
Decide Between _trackPageview & _trackEvent
You can simply provide a snippet of code using _trackPageview to "fool" ga.js into thinking the visitor is viewing a "page". In actuality that page is a file. Or if this is part of a larger application or you want more sophisticated categorizing and aggregate tracking of the types of clicks, you can use _trackEvent._trackPageview
As stated, this simply logs the "hit" as a pageview. You still get all the visitor data, but it's essentially categorized as a visit to a URL. Below is the line of code to execute this asynchronously from your page or app. You can learn more about this by visiting the Google Developers page for Tracking Code Basic Configuration._gaq.push(['_trackPageview', '/docs/myFileName.doc']);
_trackEvent
Tracking events allows you to add a bit more context around the event and to aggregate that data for reporting. It's pretty sophisticated and I suggest you read up more at the Google Developers page for Event Tracking with ga.js._gaq.push(['_trackEvent', 'Downloads', 'DOC', '/docs/myFileName.doc']);
Put it Back Together
Now that you've picked the method you want to use we can put that line into our "onclick" function and use some more variables to make the whole thing automatic. Our original jQuery already selected all the links we care about. Now we need to take the file name, type, and URL and put them into the call to Google Analytics. The results look something like this:_trackPageview
$("a[href$='.pdf'],a[href$='.doc']").attr('target', '_blank').click(function() {
var url = $(this).attr("href");
_gaq.push(['_trackPageview', url]);
});
_trackEvent
$("a[href$='.pdf'],a[href$='.doc']").attr('target', '_blank').click(function() {
var url = $(this).attr("href");
url_array = url.split("/");
file_name = url_arra[url_arra.length - 1];
file_type_array = file_name.split(".");
file_type = file_type_array[file_type_array.length - 1];
file_path = "/downloads/" + arrayparts[arrayparts.length - 1];
_gaq.push(['_trackEvent', 'Downloads', file_type.toUpperCase(), url]);
});
Get Reports
All you need to do now is go into Google Analytics and either look for your file(s) in the Behavior section if you used _trackPageview or in the Events section if you used _trackEvent.
Watch Out
This simple JavaScript assumes that the HREF attribute has meaningful enough information to disseminate which file is which. For example, the HREF of two links to the same file could be written one as relative, and the other absolute. They would be recorded as separate files.Best to always use "/folder/file_name.doc" with this for all links. Or you could do more string manipulation to add enough path info to the url variable.
window.pathname and window.href could be used for this purpose.
No comments: