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.
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!
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.357.2016. 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.
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.
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
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.
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.
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.
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.
We have all the pieces, now let’s put it all together. The general idea here is to:
- Wait until the page is loaded
- Check to see that it’s mobile
- Grab the HTML from the specific section of the site we want
- Run that HTML through our special code
- Replace our section with the updated HTML
- 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
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.