How to track and measure phone number views with JavaScript

Use this tutorial to create phone number links and track/measure views.

As phone numbers are clickable (and work) only on mobile devices, there’s no way to track how many users copy them or write them down. Well, unless they’re hidden and require user access. Here’s how to do it.

Create a clickable phone number link:

<a href="tel:09483473843" class="reveal-number" data-number="094 834 73 843">094 834 73 843</a>

Add a function to hide the last 4 characters and show them on click. Additionally, there’s a timeout event to explain the user what to do next.

function reveal_number_init() {
    let phoneNumbers = document.getElementsByClassName('reveal-number');

    let replaceLastNChars = function(str, replace, num) {
        return str.slice(0, -num) + Array(num + 1).join(replace);
    };

    for (i = 0; i < phoneNumbers.length; i++) {
        var element = phoneNumbers[i];

        element.href = 'javascript:void(0);';
        element.innerText = replaceLastNChars(element.innerText, '*', 4);

        element.addEventListener('click', function (event) {
            element.innerText = element.dataset.number;

            setTimeout(function () {
                element.href = 'tel:' + element.dataset.number;
                element.innerHTML += '<br><small class="phone-reveal-help">Click again to call.</small>';
            }, 1000);
        });
    }
}

Initialise the function:

document.addEventListener('DOMContentLoaded', function () {
    if (document.querySelector('.reveal-number')) {
        reveal_number_init();
    }
});

Next, you can use an AJAX call to store the phone number clicks, depending on your content management system or your database structure.

Previous article

How to show an outdated browser alert on Internet Explorer 11

Next article

How to Change Page Title Using JavaScript

Ciprian Popescu

Technical SEO specialist, JavaScript developer and senior full-stack developer. Owner of getButterfly.com.

If you like this article, go ahead and follow me on Twitter or buy me a coffee to support my work!

Related posts

May 11, 2021

Carbon: Basic Syntax Highlighting with Zero Overhead Using JavaScript

February 9, 2021

How to Get and Set Query Parameters From URL

May 17, 2022

JavaScript Bookmarklets Collection