Dynamic Number Replacement Exhibiting a Flicker When Number Swapping

[InvocaKnowledge]

Symptoms

When a webpage is loading the hardcoded site number first appears before the Invoca dynamic number replacement swaps it with an Invoca number, creating a flickering effect.

Applies To

Customers using the Invoca Tag for Dynamic Number Insertion on their webpages.

Resolution

This solution will require development on the part of the customer within their own code base.

• If utilizing an Invoca numberSelector then you will target that CSS selector in the next step. Otherwise, create a new CSS class for phone numbers on your page. In the next step, the CSS class, ".InvocaNumber" is used as an example.
• Insert the following code in the custom code block of your Invoca Tag Wizard:

function showNumber(){

 var elements = document.querySelectorAll(".InvocaNumber");

 elements.forEach(function (el) {

 el.style.opacity = 1;
})

// or this code if your site uses JQuery.  
$(".InvocaNumber").animate({'opacity': 1}, 250);

};

options.onComplete = showNumber;

setTimeout(function(){

 showNumber();

}, 3000);

return options;

• onComplete: It is the go-right case where we'd show the number by updating the style as soon as our tag returns with a DNI number and has swapped it in.
• setTimeout:  The reason for this in that code is as a fallback, in the event our tag doesn't run or there is an error reaching our server (and thus the onComplete would never run), so the idea is we need to show the container where the number is to show the customer's original number.

Cause

Number flicker can be caused by the asynchronous loading of the Invoca Tag JavaScript on customer sites. This means that JavaScript commands run one after the other, and the Invoca Tag is set to run after the commands that load the phone number on the webpage.

Additional Information

• This code requires that you have the default style of the elements with the CSS class as opacity: 0.