Extend your Google Analytics GA4 to track telephone clicks

Add a new event to GA4 to track phone calls

When you add a telephone number to your website, it is likely to be added as a link so that people viewing on a mobile phone can click the telephone number, and it automatically dials the number.

This is a good idea as it makes calling you so much easier, but how do you track how well this is being used? Understanding this can be valuable information for your marketing strategies.

The new (ish) Google Analytics 4 (GA4) measures website interactions as events. The old way of setting goals is no longer a thing. By default, GA4 sets a lot of standard events, but it is easy to extend this by adding some code to the GA4 snippet on your website.

To install GA4,  you add a snippet of code to your website, it will look something like this (replacing GA_MEASUREMENT_ID with the actual measurement ID you will get from your Google Analytics dashboard):

<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>  
  window.dataLayer = window.dataLayer || [];  
  function gtag(){dataLayer.push(arguments);}  
  gtag('js', new Date());  
  gtag('config', 'GA_MEASUREMENT_ID');
</script>

But you can extend this to add a new event that specifically targets your telephone links.

Add this code, as a separate script just after the main snippet above:

<script>  
 document.addEventListener('click', function(e) {    
  if (e.target && e.target.matches('a[href^="tel:"]')) {
    gtag('event', 'tel_link_click', 
     {'event_category': 'Phone Calls',
     'event_label': e.target.href,
     'value': 1
    });
  }
});
</script>

How does this code work?

The code is doing is the following:

It waits for a click event on the page, specifically any link that is a telephone number (which in HTML will look like this: <a href=”tel:01724 410480”>01724 410480</a> using our own telephone number in this example.

If a click on the telephone link happens, this script extends the main Google Analytics script. It tells it to create a new event called “tel_link_click” and group it in a new category called “Phone Calls”. It also assigns a label which is the URL of the page the user was on when the link was clicked and finally assigns a value of 1, to indicate that one phone call was made.

This is all now viewable in your Google Analytics dashboard, so you can see exactly how many people are clicking your telephone number link on your website, and from what page.

To better explain each of the snippet sections added:

• gtag: This is the function used to send data to Google Analytics.
• 'event': This is the type of data that we're sending. In this case, we're sending an event.
• 'tel_link_click': This is the name or ID of the event that we're sending. You can choose any name that makes sense to you, but it should be something descriptive.
• 'event_category': This is a category that you can use to group similar events. In this case, we're using "Phone Calls" as the category to group all phone call events together.
• 'event_label': This is an optional label that you can use to provide more detail about the event. In this case, we're using e.target.href to capture the URL of the telephone number that was clicked.
• 'value': This is an optional value that you can use to assign a numerical value to the event. In this case, we're using a value of 1 to indicate that one phone call event has occurred.
  

How to check everything is working

Events in GA4 don’t happen in real-time, they can take a day or so to appear. To test that your code is working, you need to use Debug View in your Google Analytics account. For this to work, you also need to add a Google extension to your Chrome browser.

Using Chrome, add Google's dedicated extension: https://bit.ly/googledebug

Once installed, run it (the icon will say “ON”) and refresh your website.

Back in Google Analytics, click the Admin (cog icon; bottom left) and in the second column click debug.

This view will now show you events in real-time, such as how your page is being scrolled, page clicks and the new “tel_link_click” event.

If you are using Google Tag Manager

For this post, I have assumed that you have added your GA4 code via the tag script directly to your website. If you are using Google Tag Manager, the process will be slightly different. I can't go into the in's and out's of using GTM here but I will update this post with an overview of how to do this ASAP.

Need help with GA4?

If you have found this useful but would like more help getting Google Analytics 4 setup on your website (or any other website support), contact us to discuss your requirements and we will be happy to help.