*December 2017 Update for gtag.js
Event tracking is important on a website. It’s the only way to track user engagement. There are certain links that don’t naturally trigger any kind of tracking via Google Analytics, whether you’re using async (ga.js) or universal analytics. The most common are:
- PDF Downloads – <a href=”someurl.pdf”>Download my PDF</a>
- Mailto (Email) Links – <a href=”mailto:[email protected]”>Email Me</a>
- Phone Links – <a href=”tel:+18885556792″>Call Me</a>
There are a couple ways to track these. You can use Google Tag Manager to create a tag then make a rule. I’m not yet a GTM expert. I personally like good old fashioned jQuery.
How It Used To Be Done
What I used to do is I’d go through a website page-by-page, and find the type of links mentioned above. To each one I would add an onclick code to insert event tracking tag onto it. The links would look something like this:
<a href=”someurl.pdf” onclick=”_gaq.push([‘_trackEvent’, ‘pdf’, ‘download’, ‘name of pdf’]);”>Download my PDF</a>
Depending on the site, this could take forever. Not only would it take forever, but you risk missing one or more doing it this way.
Is There a Better Way?
Does a bear s…..
I mean would I be writing this post if there wasn’t? I did just come up with a much faster, more fool proof, way to do this. You ready for it?
If you use Async Analytics (ga.js):
jQuery(function() {
jQuery(‘a[href$=”.pdf”]’).click(function(){
var pdf=jQuery(this).attr(‘href’);
_gaq.push([‘_trackEvent’, ‘pdf’, ‘download’, pdf]);
});
jQuery(‘a[href^=”mailto:”]’).click(function(){
var mailto=jQuery(this).attr(‘href’);
_gaq.push([‘_trackEvent’, ‘contact’, ‘mailto’, mailto]);
});
jQuery(‘a[href^=”tel:”]’).click(function(){
var ctc=jQuery(this).attr(‘href’);
_gaq.push([‘_trackEvent’, ‘contact’, ‘click-to-call’, ctc]);
});
});
</script>
And if you use Universal Analytics (analytics.js):
jQuery(function() {
jQuery(‘a[href$=”.pdf”]’).click(function(){
var pdf=jQuery(this).attr(‘href’);
ga(‘send’,’event’, ‘pdf’, ‘download’, pdf);
});
jQuery(‘a[href^=”mailto:”]’).click(function(){
var mailto=jQuery(this).attr(‘href’);
ga(‘send’,’event’, ‘contact’, ‘mailto’, mailto);
});
jQuery(‘a[href^=”tel:”]’).click(function(){
var ctc=jQuery(this).attr(‘href’);
ga(‘send’,’event’, ‘contact’, ‘click-to-call’, ctc);
});
});
</script>
And if you use the new gtag.js
jQuery(function() {
jQuery(‘a[href$=”.pdf”]’).click(function(){
var pdf=jQuery(this).attr(‘href’);
gtag(‘event’, ‘download’, { event_category: ‘download’, event_action: ‘pdf’, event_label: pdf});
});
jQuery(‘a[href^=”mailto:”]’).click(function(){
var mailto=jQuery(this).attr(‘href’);
gtag(‘event’, ‘contact’, { event_category: ‘contact’, event_action: ‘mailto’, event_label: mailto});
});
jQuery(‘a[href^=”tel:”]’).click(function(){
var ctc=jQuery(this).attr(‘href’);
gtag(‘event’, ‘contact’, { event_category: ‘contact’, event_action: ‘click-to-call’, event_label: ctc});
});
});
</script>
BAM!
What you’re going to want to do is place that code just before the </body> tag, so it’s at the very bottom of the pages. That way it doesn’t cause the site to load any slower and it catches all the links possible. Hopefully you have a template with a footer section where you can add this so it’ll go on all pages easily.
The script requires that you have a jQuery library in your source code. WordPress has one by default. If you don’t have it, it’s a simple line of code usually like this:
That code goes somewhere before the </head> tag. If you need help finding a jQuery Library, Google has a page with just about every one imaginable.
And that’s it! All your PDF’s, all your mailto links, and all your phone links will now trigger an event in Google Analytics! Of course you should be testing it out to make sure it works. Unless you don’t have jQuery installed, there’s no reason it shouldn’t…knock on wood.
If you have any questions about it, just let me know.
If you like this post and want to find others related to it, then follow me on Twitter: Follow @PaulKragthorpe
