Preventing phone number flicker

Normally, the contents of the element which contains your phone number will be your auto-discovery number. This can show a brief flicker as numbers are replaced when the page loads.

To prevent this, you can add the data-ict-discovery-number attribute to an empty element, this way the element will not show any content until number replacement is complete.

In this example, we have also included a phone number within a noscript element, this will be shown if the visitor's browser is not running JavaScript.

When using the noscript approach, we recommend using a fixed number specifically for this so that you can see when it drives calls from untracked visitors.

<span class="InfinityNumber" data-ict-discovery-number="0123 4567 891"></span>
<noscript>0123 4567 XXX</noscript>

Please refer to the documentation for further information on use of the discovery number attribute.

You should include in your script a fallback for any numbers which do not get replaced.

setTimeout(function() {
    var elements = document.getElementsByClassName('InfinityNumber');
    for (var i = elements.length - 1; i >= 0; i--) {
        var element = elements[i];
        if (element.innerHTML === '') {
            element.innerHTML = element.getAttribute('data-ict-discovery-number');
        }
    }
}, 2000);

The above example simply replaces any empty numbers with the auto discovery number after a 2 second delay. Please note that getElementsByClassName is only available in Internet Explorer 9 and above. You may have to modify this example to suit your requirements.

Phone Number Flicker

Preventing phone number flicker

Phone Number Flicker

Related Articles