The obvious idea is to simply make the search string transparent with the help of a CSS class, so that visitors won’t see it. So far, so good. But how can website visitors then see the correct call tracking phone number? #

The key lies in the call tracking snippet #

The snippet is a highly complex thing that can do much more than you might initially think or might imagine as an experienced programmer. For this request, we use the fact that the snippet can tell us when the search string has been found and replaced by the call tracking phone number. We wait for this response and then simply remove the CSS class again.

What does this look like? #

In the following example, you will see how we use the “callback” under the snippet code in order to remove the transparency of the search string as soon as the replacement is made. We listen for a message (registerCallback), which tells us that the replacement has been made (replacementDone).

You can copy the example below and use it on your website. To ensure it functions correctly, obviously the domain must be registered correctly in the control panel and Search & Replace configured for the pool.

What should I do if there is a script or ad blocker? #

There are cases in which the search string cannot be replaced by a call tracking phone number. Script and ad blockers sometimes prevent scripts from running on websites. Individual browsers now also have optional settings that protect against the perceived security risk in a similar way.

In this case, the transparent search string will remain transparent and website visitors will see no phone number.

SOLUTION #

Using the tag <noscript> means that the search string can be displayed if scripts are blocked. The search string will also be displayed in this case.
HTML example :

<html>
<!-- This example only works if it is uploaded to a domain which is registered in the matelso system.
If you have any questions on how to set up calltracking on your domain, please contact your account management-->
<head>
<meta charset="utf-8" />
<title>S&R Demo Site</title>
<script>
// matelso calltracking snippet
(function(m,a,t,e,1,s,o) {m["CallTrackingObject"]=1;m[1]-m[1]||function(){ (m[1].q=m[1].q||[]).push(arguments)}; s=a.createElement(t);
o-a.getElementsByTagName(t)[0];s.async=1;s.src=e;o.parentNode.insertBefore(s,o) })(window,document,"script","//rns.matelso.de/webtracking/4/","mtls");
// use callback to remove the transparency when replacement is done window[window.CallTrackingObject]('registerCallback', 'replacement Done', function() {
});
var element = document.getElementById("searchTextElement');
element.classList.remove('transparent');
</script>
<style>
.transparent {
opacity: 0;
}
</style>
</head>
<body style="text-align: center;">
<div>
<h1>Search and Replace Demo: transparent searchtext</h1>
Below there is a transparent search text that will only
show up when the number replacement ist done.
<h2>how this works?</h2>
The matelso snippet recognizes if a replacement is done. <br>
We use this info to then remove the transparency from the search text.<br>
Doing this your website visitors will only see the replaced number,
and not a searchtext.
<h2><p>Searchtext:</p></h2>
<p id="searchTextElement" class="transparent">searchtext</p>
<noscript><p>searchtext</p></noscript>
</div>
</body>
</html>