Dynamic Number Replacement Exhibiting a Flicker When Number Swapping

A brief flicker of the original phone number before it swaps is caused by the Invoca Tag’s asynchronous loading — hide it with custom code that reveals the number only once swapping completes.

​

Symptoms

​

Cause

​

Resolution

1. If you’re using an Invoca numberSelector, target that CSS selector in the next step. Otherwise, create a new CSS class for phone numbers on your page — the example below uses .InvocaNumber.
2. 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: covers the normal case — showing the number by updating its style as soon as the tag returns with a DNI number and swaps it in.
• setTimeout: a fallback for cases where the tag doesn’t run, or there’s an error reaching the Invoca server (so onComplete never fires) — this ensures the container showing the number still displays the original number.

​

Where to go next

• Tag Wizard: Custom Code
• Tag Wizard: Custom Code Settings