Make Phone Numbers Clickable (and Trackable!) Across Mobile Devices with Javascript


Unfortunately, this post won't work for payphones.

Unfortunately, this post won’t work for payphones.

Sometimes when dealing with a website, it’s easy to throw on the classic tracking events – PDFS, mailto links, etc… But what if we wanted to track when people clicked on our phone links? In a perfect world, this should be easy. However, phone numbers can be written in many, many different ways and we don’t always have control over the content to add in appropriate phone tags. As if that’s not enough, dealing with different browsers on different devices supremely complicates the matter.

Fear not, through the power of javascript and regular expressions, we can certainly tackle this! This post gets a little long, but I wanted to explain why I made all of the decisions that I did.

If you’re just looking for the code – click here for the javascript.

For this demonstration, I’ll use our office number: 1 (412) 381-5500.

Telephone Numbers on Mobile Websites

There are lots of opinions out there about the best way to write a telephone number on a website. For this post, I’m only going to focus on mobile devices. To summarize the debate quickly, if you’re using a telephone number on a mobile website, the most common way is to wrap phone numbers like so: <a href=”tel:+14123815500″>1 (412) 381-5500</a>. For most mobile browsers, this will allow a user to click directly on your link, which will initiate a phone call to that number. Some desktop sites will use “callto:” which works with Skype and other companies. If you deal with international audiences, the + before the country code is important, though the plus sign is not necessary for in-country calling. This blog post is geared towards North American styled telephone numbers, but feel free to adapt it as needed!

If you can currently format all of the phone numbers like this on your website reliably, then it may be as easy as adding in some javascript to look for those perfectly formatted phone links.

Unfortunately, sometimes we don’t have the option of manually correcting all of our phone numbers. We may have way too many pages to check every one, or we may have dynamic content that we don’t control. Perhaps you have a client that you can support through Google Tag Manager, but that you can’t make any direct changes to content. Or perhaps you share content creation responsibilities and just want a surefire solution to catch mistakes that other people might make.

So moving forward, let’s assume your phone numbers are just plaintext on the page, in a variety of different formats. How do mobile devices currently handle this?

The Major Players

Both Chrome on Android and Safari on Apple devices recognize their own definitions of phone numbers, and take actions to make them clickable for your average user. That being said, they go about it different ways, and their definitions of phone numbers don’t necessary jive with what our definition is. For instance, Apple doesn’t like phone numbers separated by periods, like 1.412.381.5500. Plus – Chrome on an Apple device behaves differently, and there are other mobile browsers that users can download.

Safari on Apple devices will take a phone number on a page and will actually rewrite it onto the page inside of an <a> tag and append “tel:” to the number, like so: <a href=”tel:1 (412) 381-5500″>1 (412) 381-5500</a>. Note that they keep the original formatting of the phone number as it appeared on the page. In addition, this <a> tag will use any existing CSS on the page for <a> tags.

Chrome on Android will make the numbers clickable, but does so in a less obvious way. Links are not rewritten, and the phone numbers don’t appear as links. So while phone numbers are automatically made clickable, this doesn’t help out ability to track these phone numbers. A better solution for us would be to follow the Safari logic and rewrite these links inside of <a> tags.

New Assumptions

Now that we’ve talked about how the major players handle telephone links, we need to revise our assumptions. Even though we started out having only plaintext phone numbers on the page, without our knowledge or consent, we now may have some mix of correctly linked numbers (numbers that Safari recognized) and plaintext numbers (original numbers and numbers in Chrome).


With this mix of good and bad phone links on the site, we want a way to make all of the links good. I’m using good in this case to mean that we are A) capturing the full range of phone numbers that we define, B) making them all appear as clickable links, and C) making those links trackable. We can do all of this through a combination of javascipt, jQuery, and regular expressions, which then can be put into Google Tag Manager.

Step One

It’s time to define what we think counts as a phone number. I created a regular expression to do so below, but feel free to edit this as needed. It’s a tricky problem to solve, as you want to include the most probable phone numbers as possible, accounting for different symbols and syntaxes. The North American Number Plan has some rules that I’ve incorporated as well. You don’t need to understand regular expressions to get this to work, but if you want a handy guide – check out my blog post from December 2013. Another important thing to note – the code below is written as javascript strings, which we later use to put together the whole regular expression. Therefore, it’s important to double escape characters that you would want to appear in the regular expression.

In my definition of a phone number, I’ve said the following:

  • There may or not may not be a + sign at the beginning
  • There may or may not be a country code at the beginning
  • After the country code, there can be a space or any of the delimiters that I’ve defined
  • There must be an area code, which may or may not be surrounded by parentheses
  • The  first digit of the area code must be between 2-9, followed by any 2 numbers
  • After the area code, there can be a space or any of the delimiters that I’ve defined
  • The next number must be between 2-9, followed by any 2 numbers
  • The next character has to be a delimiter that I’ve defined, it cannot be a space.
  • The last block is 4 digits long, and can be numbers or letter

Step Two

Now that we have what we count as a phone number, we want to have a way to look for it on the page. We can use jQuery to easily grab the HTML of a given section of your page. It’s important to grab HTML instead of just text, as some of these phone numbers may already be wrapped in <a> tags. If you have a big site, it may be helpful to narrow down which section or sections on your site might contain phone numbers. For instance, on our site, I might grab two divs called “address” and “contact”. You may have a page container that you could use, or an article container. To get the HTML of these elements, I can use the following code:

It’s helpful to use the smallest section of your site necessary, as we will be rewriting this section later. If you have other automatic tracking in place, you’ll want to run that AFTER this script runs.

Step Three

Find and replace! We can use the replace function in javascript to look through the html and replace all phone numbers that we find. This is the really tricky part. If we just look through the code and replace all phone numbers, we’re may run into issues where the phone number appears in the href attribute of an <a> tag as well as in the text of the link. So the function we use has to look for both plaintext numbers and numbers inside of phone links.

To do this, again we’ll look to regular expressions to help us out. You can see that I’ve combined this expression with the definition of a phone number from above. If you can, work through the regular expression to see each of the steps. I’ve started by checking through for any links that already exist using the “callto:” method. While these work well for Skype on a desktop, I’d prefer to use the “tel:” method. I’ve added a rule here saying that the phone number cannot have a number at the beginning or end of it, thus preventing us from finding a phone number in the middle of say, an order number or credit card number. If it finds a plaintext phone number, it will wrap that phone number in an <a> tag, with the link set to “tel:” and a stripped version of the phone number without special characters. If it finds a correctly formatted phone number, it will simply leave it as is.

Step Four

Let’s add in the tracking.  You’ll need to have jQuery added to your page already in order for this particularly code to work. The code would be the same basic idea as if you were tracking PDF downloads or MAILTO clicks. Now that our phone numbers are properly encased in <a> tags, we can look for all telephone links on the page, newly created or previously on the page, and add in Google Analytics tracking. I’ve also added in a few lines here that will make our phone numbers more uniform when they go into Google Analytics, removing special characters, and making the numbers consistently 11 characters. When someone clicks on one of these links, we’ll stop the link from firing, send an event to Google Analytics, then after 300 milliseconds, redirect like the page like nothing ever happened.

Step Five

We need to decide when we want this to fire. I’ve decided to narrow this down to just after the page is loaded, and only on mobile devices. The code I used is below, but feel free to use your own method of detecting mobile devices.  Again, using jQuery to help with this.

Implementing the Code – Pure Javascript

We have all the pieces, now let’s put it all together.   The general idea here is to:

  1. Wait until the page is loaded
  2. Check to see that it’s mobile
  3. Grab the HTML from the specific section of the site we want
  4. Run that HTML through our special code
  5. Replace our section with the updated HTML
  6. Add in the tracking

A few notes here – again, you want to make sure this fires before your other link trackers, etc… because it will actually rewrite the content of that <div> or whatever container you specified. Also, to be more specific – this code will track when someone on a mobile device CLICKS on your phone number.  After that, most devices will usually pop up a message asking if you want to call the phone number or not. There’s no guarantee that someone actually went through the phone call – they may have canceled out or just added the phone number to their contacts.

Implementing with Google Tag Manager

With this javascript written and customized to how you like it, implementing it with Google Tag Manager should be a breeze. You can set up a custom macro to return whether or not the user is on mobile using the following javascript:

Then only fire this JavaScript on mobile pages.

If you wanted to use a Tag to fire the event, you can certainly do so. For simplicity, I did this all through a custom javascript Tag, but you could certainly add a link click listener and create a rule to look for any link clicked that begins with “tel:”, then use that to fire your Google Analytics Event.


Hopefully this helpful to some people! It’s not a perfect script, but it gets the job done. Let me know if you have any questions in the comments, or, since we’re talking about phone numbers, feel free to call us here at LunaMetrics at 1-877-220-LUNA for all of your Google Analytics or Google Tag Manager needs!

Here is a screenshot of my data after phone tracking was implemented. Name and numbers have been changed to protect the innocent, but it’s clear that phone numbers were a large interaction that we were previously missing for this particular client.  I’ve also combined Phone, Email, and Contact Form into one Event Category called “Contact” to help keep things organized.

Google Analytics screenshot with Phone Tracking enabled


Jon Meck is our Director of Marketing & Training, promoting our services and trainings to the world. He has a jack-of-all-trades background, working for companies large and small in social media, website design and maintenance, and analytics. He is an Excel enthusiast, he loves efficiency, and he is strong proponent of the “Work Smarter, Not Harder” mantra. Jon is also the author of two number puzzle books.

  • Yoray

    great job and investigation of this whole case.
    can you please share a screenshot from analytics just to understand how the data that you have work for so hard is now looked like? something like instead of “this” we now have “that”


  • Thanks Yoray! I’ve updated the post with a screenshot from our Google Analytics data for the past week. With this particular client, it’s clear that we were missing out on a lot of interactions with the site! The phone numbers and email addresses have been changed, but the stats are real.

  • my android phone and ipad both seem to be able to convert the basic text to a phone number to be able to dial it. ok no tracking of course.

    how would this method incorporate visual formatting? I currently use a but this cannot be enclosed within an tag apparently.

  • it deleted my text!! I currently use a P tag but that cannot be enclosed within the a tag that you suggest.

  • PS again: once you click on the link on a PC then you get an error as the tel url cannot be found by a PC with no dialing capability…(I haven’t looked at your javascript as it is a foreign language to me)

  • Hi Verity,

    A few points to make here – unfortunately this post is mainly dealing with North American phone numbers, which wouldn’t necessarily work for numbers that don’t follow the same standards.

    This script is also set up to help correct the issue of plaintext phone numbers on a page. If you have the ability to change the phone number links yourself, you won’t need to use anything like this.

    Lastly, one of the points I made above talks about how you can use Tag Manager or Javascript to only target mobile devices. This script is only meant to help capture the mobile users who are clicking on phone numbers.

  • Mark

    I tried adding 1 (412) 357-2016 on my phone number on my website. But when I click the number instead of sending me to my dial pad, it sends me to“tel:4123572016” , any idea what I might be doing wrong?

    • In the link that you add, you want it to appear like the following:


      Make sure there’s nothing in front of the phone number like “/4123572016” etc…

  • Scott

    If you’re looking to replace standard UK numbers, try the following phone definition (note, this only works with area codes that are 5 digits long, didn’t have a requirement for shorter so haven’t done that in the code)

    var phonedef = “\+?(?:(?:(?:” + countrycodes + “)(?:\s|” + delimiters + “)?)?\(?[0]\d{4}\)?(?:\s|” + delimiters + “)?[1-9]\d{2}(?:\s|” + delimiters + “)?[0-9]{3})”;

  • Manish

    Then i try to add 1 (412) 357-2016 to replace “#address” in blow line it starts giving error i don’t know what i am doing wrong i want to make it work for indian time zone.

  • I am not a developer. So I am unclear on phone numbers in Chrome. I subscribe to a cloud based system called Clientlook. On my Android phone using chrome I cannot click on a contacts phone number to make it dial my phone. Is this a Client look problem or Android problem or Chrome problem.

  • Mady Maiden

    It is very useful information. Find any contact number on Phonebook backward search

  • Kleofas Ogiński

    hulyakko dukko ahyndlaggd

  • vinoth kumar

    Hi it was very informative post. Thank you for sharing this information.
    how to unblock a phone number | how to block phone numbers

  • Clayton Clixo

    I have a nexus 5. On most websites (in Chrome) if I click the phone number, it will queue it up in the dialer. On one of my client’s websites, it queues up a Google Now on Tap sort of search. The format of the number is exactly the same xxx-xxx-xxxx in both cases. The client’s website is built in Kentico, a dotnet CMS. Could that be the problem? When I look at the html, I can’t see any difference between the site that works and the site that doesn’t. I’d prefer not to add a href markup if possible.

  • Mike

    How can I do this with my web app on desktop browser? Avaya phone system is attached to pc.

  • Chrissy

    As a user: this my biggest ios annoyance — a few times a day I have to select a phone number or remember it to dial it.

    Would you (or anyone here) create a flow that finds 7 digits on the page / email / thing and offers it as the thing I want to dial? I’d pay!

  • Andrew Wasyluk

    John – When using your script, Chrome on iOS 9.3.2 changes the link to a a link, but when I click it nothing happens. Is anyone else having this issue?

  • Nerdsamwich

    Any way to make this all work in email?

  • Utot

    damn.. this is what i’ve been looking for but how do i implement this on wordpress?

Contact Us.

Follow Us



We'll get back to you
in ONE business day.
Our Locations
THE FOUNDRY [map] LunaMetrics

24 S. 18th Street
Suite 100

Pittsburgh, PA 15203


4115 N. Ravenswood
Suite 101
Chicago, IL 60613


2100 Manchester Rd.
Building C, Suite 1750
Wheaton, IL 60187