Start a Project  

Tracking Link Clicks & PDF Downloads With Google Analytics Events

by

Google-Analytics-IconLet’s say you have a very important PDF (ie a brochure, a schedule, instructions, an agreement, etc) or a very important  button/link (ie event registration sign up, email subscription sign up, etc). For this example we’ll use the example of a PDF link. This PDF is so important that you have created 3 different links to that same PDF on your website: one link within the header, one link in the sidebar and one in the footer. You’d like to know if people are using these links or not and which is clicked most frequently so that you can analyze and optimize their placement, style, location, mobile friendliness, etc.

If you are just trying to track how many people viewed the PDF and you don’t care about specific link clicks then you don’t need to use Event Tracking. You can quickly set up a Destination Goal and Google Analytics will track how many people arrived at the specified URL. Since we do care about tracking which specific links were clicked by users we will be using Event Tracking.

For the purposes of this article, I will assume that you already have a Google Analytics account. You will most likely already have this code embedded but if not be sure to add this Javascript snippet:

  1. This code should be added before your closing </head> tag as per Google’s instructions.
  2. IMPORTANT: You must replace the string UA-XXXXX-Y within the above snippet with the property id or tracking id of the Google Analytics property that you intend to track.

 

The below code will be used for each unique event that you want to track:

Let’s briefly look at the HTML code for our 3 links:

  1. The id attribute must be set to something unique. In this case each includes the string header, sidebar and footer within the id respectively. This will enable the Javascript code to locate each unique link and track whether it was clicked or not.
  2. The href attribute is set to the same path across all 3 links since we stated we were linking to the same PDF. It will be set to something like http://www.mysite.com/brochures/summer-brochure.pdf.
  3. These links will need to be placed within the header, sidebar and footer HTML code respectively.
  4. NOTE: These links can be styled entirely different and/or have display different text.

Once the links are set up, we need to figure out when the user has clicked on one of these links and report it to Google Analytics.

If you are using jQuery you can use the following code:

Let’s examine a single event handler (the header handler) and break it down so we can understand each element.


  1. $(document).ready(CALLBACK) will wait to run our CALLBACK function until after the page has loaded giving the browser time to render the anchor elements. If we were to call our CALLBACK  function before these elements were rendered, the script would not be able to find our links and would fail. Using jquery ready allows you to place this script anywhere on the page. Some people don’t like this method and so you can remove the $(document).ready() wrapper and simply place this script snippet at the bottom of your page.


  2. $(SELECTOR_STRING) will collect for us a single element or a group of elements on the page. In this case we specified “#my_header_pdf_link” as the SELECTOR_STRING. The “#” symbol tells jQuery we are searching for an element with a specific ID attribute equal to “my_header_pdf_link” (remember when we set the “id” attribute of all the links?).


  3. The structure of this call is .click(EVENT_HANDLER); and in our case the EVENT_HANDLER is an anonymous function. This will register an event handler with jQuery for all elements returned from the previous step (in this case only the single header pdf link since we specified it by id) that will fire the EVENT_HANDLER function each time the link is clicked.


  4. This is the code snippet that notifies Google Analytics that our event took place. Keep in mind that hitType MUST be set to eventeventCategoryeventAction and eventLabel can be set to whatever you like. The only requirement is that you distinguish each event from the other, otherwise Google Analytics will only be able to tell you the one of the three links was clicked but not which link was clicked. I did this by setting eventLabel to header, sidebar and footer respectively.

  5. Notice that this code is repeated 3 times, once for each link, varying the SELECTOR_STRING (in order to specify the exact link we want to register the event handler for) and the eventLabel (in my case, this is how I distinguish between pdf link clicks).

Now that we are registering the link click events, you will start to see them in the Behavior > Events section of your Google Analytics Reporting! Now you can sit back and watch the events pile up or set up goals to help you monitor these events.

Note: Events can be tracked on almost all clickable html elements, this example simply uses an anchor/link.

Once you have enough data, be sure to analyze the new information and take corresponding action. There is no point in collecting data if you don’t use it to your benefit!

Here are some other references that you might find helpful:

  1. Adding analytics.js to Your Site (Google Developers)
  2. About Events (Google Support)
  3. Event Tracking (Google Developers)
  4. jQuery Ready vs Bottom Of Page (Stack Overflow)
  5. Google Tag Assistant (Chrome Webstore)