Tracking mailto: and tel: links in Google Analytics

You probably have event tracking set up for filling out a contact form but many websites also contain direct mailto: and tel: links. Customers that pick up the phone and call are usually very valuable but can be hard to track. With some Javascript you can very easily track these conversions in Google Analytics.

I’ve found this to be a great metric to track on sites that contain site-wide (e.g. footer) links with direct contact methods. With client work it’s become default to set up conversions for these mailto: and tel: clicks. Here’s how you can do it as well.

What are tel: links? (Click to call)

<a href="tel:+310123456789">Click to call us!</a>
Example: Click to call us!

Almost all mobile devices support this format. Opening a tel: link on mobile opens the phone app and start dialing the number. On desktop the link usually does nothing by default. On Mac the Facetime app may be opened and some versions of Skype support tel links.

What are mailto: links? (Click to email)

<a href="mailto:info@example.com">Click to email us!</a>
Example: Click to email us!

Much more widely supported is the mailto: link format. This opens the default email client and composes a new message with the “to” field prefilled. Works on almost all devices, both desktop and mobile. You can also set all other fields.

Remember: The first value should start with a ? and following should be separated by &.

<a href="mailto:info@example.com?subject=Hi,%20I%20want%20to%20learn%20about%20your product&cc=alice@example.com,bob@example.com">Click to email us!</a>

Example: Click to email us!

How to track mailto: and tel: clicks in Google Analytics?

You can use Google Analytics events to track these kind of things. The code examples assumes you use the latest version of Google Analytics (global site tag aka gtag.js).

Option A: Manually tracking clicks

If you want to track specific or only a few links the easiest way is to modify the link itself in your CMS.

<a href="tel:+310123456789" onclick="gtag('event', 'Click', { 'event_category': 'Call' });">Click to call us!</a>

Example: Click to call us!

<a href="mailto:info@example.com" onclick="gtag('event', 'Click', { 'event_category': 'Email' });">Click to email us!</a>

Example: Click to email us!

Option B: Automatically track all mailto/tel links

If instead you want to track all links on your website without modifying the links you can add the following script to your pages. This example uses jQuery, you can remove the first line if your site already includes jQuery.

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$("[href*='tel:'], [href*='mailto:']").click(function(e) {

  e.preventDefault();
  var href = $(this).attr('href');

  // tel:
  if (href.toLowerCase().indexOf("tel:") >= 0) {
    eventCategory = 'Call';
    eventLabel = href.replace('tel:', '');

  }

  // mailto:
  if (href.toLowerCase().indexOf("mailto:") >= 0) {
    eventCategory = 'Email';
    eventLabel = href.replace('mailto:', '');
  }

  gtag('event', 'Click', {
    'event_category': eventCategory,
    'event_label': eventLabel
  });

  setTimeout(function() {
    window.location = href;
  }, 500);

});
</script>

Setting it up in Google Analytics

Lastly you have to set up the tracking in Google Analytics.

Setting up tracking for mailto: links.

1. Sign into Google Analytics
2. Click Admin, and navigate to the desired view.
3. In the VIEW column, click Goals.
4. Click + NEW GOAL
5. Set the Name to Click mailto:
6. Set the Type to Event
7. Set the Category to Email
8. Set the Action to Click

Setting up tracking for tel: links.

1. Sign into Google Analytics
2. Click Admin, and navigate to the desired view.
3. In the VIEW column, click Goals.
4. Click + NEW GOAL
5. Set the Name to Click tel:
6. Set the Type to Event
7. Set the Category to Call
8. Set the Action to Click

All done! You are now tracking clicks on mailto and tel links. Give it a test by click on one of the links on your site and checking the Realtime rapport in Google Analytics.