A jQuery snippet to help track link clicks with Google Analytics events

Tracking link clicks with Google Analytics can be a bit tricky. When a user clicks a link they’re transported to the destination leaving behind the previous page and the analytics code. This can mean that even adding tracking at the onclick level to a link could result in some clicks not being tracked. To help combat this problem Google has provided a hitCallback method that can be used to let you know the event data has been stored. Using it can be a bit tricky. We have put together the following plug and play snippet that you can integrate into your website to improve your tracking.

If you’re trying to track internal or outbound HTML links or even other clickable content like a play video button this snippet is incredibly useful. The code we have provided below will capture the click, pass the event to Google Analytics, and once received redirect the user to their destination. It is a very flexible solution that allows you to set your links and event data as desired and it will handle the interaction.

Setup:

Note this code uses the jQuery library. You will need to have jQuery enabled for this code to work properly. This code is also designed for Google’s Universal Analytics so if you are using an older version of Google Analytics you will need to upgrade to take advantage of this snippet.


This code can be copied into your existing Javascript or added as a separate file. If you add it in a separate file and include it don’t forget to take off the script tags.

Note: This script has a console.log() that will output an error if you do not have Google Analytics installed, however, you’re unlikely to see it because the page will most likely refresh before it shows in the console message or it will show very briefly. If you are having problems getting this snippet working and want to confirm that the proper version of analytics is installed then uncomment the e.preventDefault() line directly above the console.log(). This will disable your link’s redirect property allowing you to see whether you have a functional edition of Google Analytics installed.

Using it:

Using this code is quite simple. You will create your HTML link just like normal and you will add a class and some data attributes to the link designed to warehouse the data that will be passed with the event.

Link to Track

When a link is clicked the values in data-category, data-action, data-label, and data-value are captured and transferred to Google Analytics. If one or move of these values is not included then the script will pass empty or 0 values allowing you to use only the values you want to track. You should be able to log into your analytics account and watch the event occur under the “Real-Time” section and the “Events” sub-section. Your event should show in real-time here with proper data. If you find that not to be the case there could be an issue with your analytics setup or your execution of the script. Check your console for errors. If you need further assistance feel free to reach out to our online marketing team here at Zipline and we can help you get up and running.

Ready to start your project?

Scroll to Top