Die naheliegende Idee ist, den Suchstring einfach mit Hilfe einer CSS-Klasse transparent zu machen, so dass Besucher ihn nicht sehen. So weit, so gut. Aber wie können Website-Besucher dann die korrekte Call-Tracking-Telefonnummer sehen? #

Der Schlüssel dazu liegt im Anrufverfolgungs-Snippet #

Das Snippet ist eine hochkomplexe Sache, die viel mehr kann, als Sie als erfahrener Programmierer zunächst denken oder sich vorstellen können. Für diese Anfrage nutzen wir die Tatsache, dass das Snippet uns mitteilen kann, wenn der Suchbegriff gefunden und durch die Rufnummer der Anrufverfolgung ersetzt wurde. Wir warten auf diese Antwort und entfernen dann einfach die CSS-Klasse wieder.

Wie sieht das nun aus? #

Im folgenden Beispiel sehen Sie, wie wir den „Callback“ unter dem Snippet-Code verwenden, um die Transparenz des Suchstrings zu entfernen, sobald die Ersetzung erfolgt ist. Wir warten auf eine Nachricht (registerCallback), die uns mitteilt, dass die Ersetzung erfolgt ist (replacementDone).

Sie können das folgende Beispiel kopieren und auf Ihrer Website verwenden. Um sicherzustellen, dass es korrekt funktioniert, muss die Domäne natürlich korrekt im Kontrollpanel registriert und Search & Replace für den Pool konfiguriert sein.

Was soll ich tun, wenn es einen Skript- oder Werbeblocker gibt? #

Es gibt Fälle, in denen der Suchtext nicht durch eine Call Tracking Nummer ersetzt werden kann. Skript- und Werbeblocker verhindern manchmal, dass Skripte auf Websites ausgeführt werden. Einzelne Browser verfügen inzwischen auch über optionale Einstellungen, die in ähnlicher Weise vor Tracking schützen sollen (DNT).

In diesem Fall bleibt der transparente Suchstring auch transparent und die Besucher der Website sehen keine Telefonnummer.

SOLUTION #

Die Verwendung des Tags <noscript> bedeutet, dass der Suchtext angezeigt werden kann, wenn Skripte blockiert sind. So wird der Suchtext auch in diesen Fällen angezeigt.
HTML-Beispiel :

<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>