Tracking Downloads with Google Analytics using Custom Events

I think it a better option to use Google Analytics to keep track of analytics in the page. You can implement AJAX calls to send analytics data to your own server, but why do it when Google Analytics is giving a nice dashboard to see your data ?

You can implement Google Analytics Custom Events with Javascript to track custom events on your page — for example you may want to keep track of files that are being downloaded from your page. Another example could be that you are interested in knowing how many users actually play a video available on the page & whether they watch the full video, or leave it midway.

This tutorial shows how to implement custom events through an example of tracking file downloads. You can extent the same concept to get analytics for an event of your choice.

Adding Google Analytics Javascript Snippet to Page

Although very likely you must already have added Google Analytics to your page, I'm showing this just for the sake of it.

It is recommended to add this code near the top of the head tag. The Javascript library will be downloaded asynchronously, so it won't affect the loading speed of the main content.

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

// Replace with your Tracking ID
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>

Using Google Analytics send Command to Track Custom Events

Once Google Analytics Javascript library has been loaded, it gives access to a send command. You can then call a function to track a custom event.

ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue]);

Use the first two parameters as it is. The rest of the paramters are explained below :

1. [eventCategory] refers to the type of the object the event is referring to. An example can be 'File' - it roughly means that the user is interacting with a File object on the page (a File that is supposed to be downloaded).

   Required : YES

   Data type : Text

2. [eventAction] refers to the action your are performing on the object. An example can be 'download' - it roughly means that the user is performing a "download" action on the File placed on the page.

   Required : YES

   Data type : Text

3. [eventLabel] refers to a label or name that can be assocciated with the action. An example can be "Sample ZIP" - it roughly means that the user has downloaded a file named "Sample ZIP". (You obviously would like to know the name or url of the file that the user is downloading).

   Required : NO

   Data type : Text

4. [eventValue] refers to a numeric value that can be assocciated with the action. An example can be "121" - it roughly means that the user has downloaded a file with ID "121". (Useful in cases where there is a numeric ID involved).

   Required : NO

   Data type : Integer

   Please note that you have to pass a number for this parameter (all others require a text type).

Implementation in the Code

The HTML markup of the download link would be something like :

<a href="http://your-server.com/downloads/sample.zip" class="download-link" target="_blank">Download</a>

Note that a class or id attribute has been added in the <a> element. Using this you can add a click event handler on the link.

$(".download-link").on('click', function() {
	ga('send', 'event', 'File', 'download', 'Sample ZIP');
});

Thats it. Only a line of Javascript code will send data to Google Analytics.

Accessing the Data in Google Analytics Dashboard

You can access the data under Behaviour / Events in the dashboard.