How to hyperlink phone numbers to call or text in an html anchor tag


At work, we often sit down to a laptop or a desktop to view our corporate websites on a large screen… but if you take a look at the mobile visits to your website, you may be startled that the majority of visitors are arriving via mobile device. If you start to break down your traffic by referral source, you’ll probably be even more surprised that search engine users are predominantly mobile.

Ecommerce Marketing Automation

63% of search engine searches in the U.S. are through mobile technologies. 48% of global website visits come from mobile.

Zippia Mobile vs Desktop Statistics

With businesses now seeing a significant portion of their visitors arriving via mobile devices, having a mobile-ready website is no longer an option, it’s a necessity.

One element that’s often overlooked when building out a mobile experience is hyperlinking your phone numbers in HTML so that mobile users can simply click on them and start a phone call. Anchor tags are the actionable tags that browsers interpret and enable users to click. A typical anchor tag for a website is:

<a href="https://martech.zone">Martech Zone</a>

An anchor tag that opens an email is:

<a href="https://feed.martech.zone/link/8998/15431472/mailto:info@martech.zone">Click here to email us!</a>

With mailto, you can optionally include the subject and body of the email within the link. I would make sure that you URL encode the text, though. Some browsers will break on a space:

<a href="https://feed.martech.zone/link/8998/15431472/mailto:info@martech.zone?subject=Hi%20Doug&body=This%20is%20a%20test!">Click here to email us!</a>

Phone Number: Click To Call Hyperlink

The syntax for hyperlinking to a phone number in HTML is similar to the mailto syntax, just using tel: instead:

<a href="https://feed.martech.zone/link/8998/15431472/tel:+13172039800">Click here to call us!</a>

The syntax for your phone number doesn’t really matter. I’ve tested the value with and without plus signs, parentheses, periods, and dashes and everything appears to work on both iPhone and Android.

I do try to keep things clean by removing everything but the numbers. I would also recommend including the country code in the phone number with the plus sign – especially if you’re attracting business internationally.

When we optimize our clients’ sites, we ensure that all instances of phone numbers are hyperlinked. If it’s a call-to-action, we usually format the link as a button to make it very obvious that it can be clicked.

Phone Number: Click To Text Hyperlink

You can also have a hyperlink that automatically generates an SMS message:

<a href="https://feed.martech.zone/link/8998/15431472/sms:+13172039800">Click here to text us!</a>

You can optionally include a message as well:

<a href="https://feed.martech.zone/link/8998/15431472/sms:+13172039800?&body=Hello">Click here to text us!</a>

How To Capture A Phone Number Click In Analytics

We also ensure that we capture these events in Google Analytics! If you’re like to measure how many people are clicking these links, you can read our article on how to add a Google Analytics Event using Google Tag Manager.



Source link

30%* off! Big Savings For Your Small Business!

LEAVE A REPLY

Please enter your comment!
Please enter your name here