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.

Author:

Ryan Stemkoski

Creative Technologist

Ryan is a Creative Technologist at Zipline Interactive. He has over 15 years of experience planning, designing, developing, deploying, and marketing websites and mobile applications for businesses of all shapes and sizes.
More Articles
Ryan is a Creative Technologist at Zipline Interactive. He has over 15 years of experience planning, designing, developing, deploying, and marketing websites and mobile applications for businesses of all shapes and sizes.
More Articles

LEAVE A COMMENT ON THIS ARTICLE

Ask a question, make a comment, or tell us we're wrong.

Related Articles

A sampling of other articles you may enjoy if you liked this one.

The Importance and Advantages of Using an SSL

Secure socket layer or (SSL) is a standard security technology that establishes an encrypted link be...

Read More
How Gamification Can Transform your Website or App

What is Gamification? Games aren’t just for kids. What was once a niche hobby the kids do...

Read More
How to Grow Your Instagram Followers Authentically

When it comes to brand visibility and user engagement, Instagram is the best social network out the...

Read More