image date

Google Analytics Event Tracking: All Calls, Emails, and PDFs

Google Analytics Event Tracking

*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):

<script type="text/javascript">
  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):

<script type="text/javascript">
  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

<script type="text/javascript">
  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:

jquery  snippet

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:

Like this post? Rate it, Save it, Share it!

Post Rating: 4.86
based on 7 rating(s)

Click a star to rate:
1 Star2 Stars3 Stars4 Stars5 Stars
Loading...
vader small
ADD COMMENT

Reader Comments

  • Mike Brown | February 26, 2018

    Great work, but I’ve tried every version of this, with each associated version of GA and different JQuery installation. I can’t get it to work! Could you have a look at the source of my site and let me know where I’m going wrong?

  • Mindaugas | April 26, 2018

    Thank you, I was looking for the simplest code implementation that would work with the new gtag.js Greetings from Lithuania 🙂

  • Me | May 23, 2018

    Thanks! I’ve been looking for a gtag implementation for several hours – yours has ended the search!

    At first it didn’t work because copying from the page included ‘smart quotes’ and had to be switched for straight apostrophes – other than that, all good.

  • SEMpdx Board Member

    Board Member
    2012-2019
  • MNSearch Board Member
    Co-founder
  • Boost CTR Best PPC blogs
  • Techipedia Best of 2010
close pop

WebRanking Newsletter

Sign up to stay up to date on the latest digital marketing news, trends and strategies.



No thanks I don't to want stay up to date

joe gengquotelWe started working with WebRanking about 11 years ago and they have been amazing. Read More...
Joe Geng - Superior Glove