Tweaks für die Rufnummernersetzung

Im Regelfall fällt dem Website Besucher eine Ersetzung durch die Call Tracking Rufnummer nicht auf. Bei Seiten mit längeren Ladezeiten kann es jedoch durchaus vorkommen, dass der Suchtext wenige Millisekunden zu sehen ist. Das lässt sich umgehen. Wie? Das erklären wir hier.

Inhaltsverzeichnis

  1. Optimierungspotenzial ausschöpfen
  2. CSS als Möglichkeit, den Suchtext zu verstecken
  3. Das Potenzial liegt im calltracking Snippet
  4. Wie sieht das aus?
  5. Was tun bei Script- oder AdBlocker?
    1. Lösung
  6. HTML Beispiel zum Kopieren

Optimierungspotenzial ausschöpfen

Das Maximum an Performance und Usability für den Website Besucher herauszuholen ist der Anspruch eines jeden Web Designers. Daher ist es nur verständlich wenn man kein sogenanntes ‘Flackern’ der Rufnummern auf der Website sehen möchte. Am Besten wäre es doch, wenn der Besucher einer Website ausschließlich die Call Tracking Rufnummer sieht, und sich nicht wundert, warum die Rufnummern gerade einmal kurz noch anders zu sehen war. Am Ende geht es ja auch um die Frage um ‘Trust’ (Vertrauen aufbauen) gegenüber meinen/Ihren Kunden.

CSS als Möglichkeit, den Suchtext zu verstecken

Der Gedanke liegt doch nah. Einfach mit Hilfe einer CSS-Klasse den Suchtext transparent machen. Dann sieht der Nutzer den Suchtext nicht. Soweit so gut. Aber wie kann dann der Besucher der Website die richtige Call Tracking Rufnummer sehen?

Das Potenzial liegt im calltracking Snippet

Das Snippet ist ein hochkomplexes Schnipselchen das viel mehr kann, als Sie auf den ersten Blick sehen oder als versierter Programmierer erfassen können. Für diese Anforderung bedienen wir uns der Tatsache, dass das Snippet mitteilen kann, wenn der Suchtext gefunden und durch die Call Tracking Rufnummer ersetzt wurde. Genau auf diese Antwort warten wir und nehmen dann die genannte CSS-Klasse einfach wieder weg.

Wie sieht das aus?

Im folgenden Beispiel sehen sie wie wir unter dem Snippet Code den ‘Callback’ nutzen, um die Transparenz des Suchtexts zu entfernen sobald die Ersetzung abgeschlossen ist. Wir hören hier auf eine Meldung (registerCallback), die uns sagt, dass die Ersetzung abgechlossen ist (replacementDone).

Das unten stehende Beispiel können Sie sich zur Vorlage kopieren und auf Ihrer Website verwenden. Vorraussetzung für die korrekte Funktion ist natürlich dass die Domain korrekt im Control Panel registriert ist die Search & Replace Konfiguration für den Pool durchgeführt wurde.

Was tun bei Script- oder AdBlocker?

Es gibt Fälle, in denen der Suchtext nicht von einer Call Tracking Rufnummern ersetzt werden kann. Script- oder Ad-Blocker lassen auf Websites die Ausführung von Scripten teilweise nicht zu. Auch einzelne Browser haben mittlerweile Einstellungsmöglichkeiten, die vor einem vermeintlichen Sicherheitsrisiko auf diese Art schützen wollen.

In diesem Fall wird dann der transparente Suchtext genau so bleiben. Der Website Besucher würde in dem Fall keine Rufnummer sehen.

Lösung

Mit dem Tag <noscript> kann der Suchtext angezeigt werden, wenn Scripte geblockt werden. So wird auch in diesem Fall der Suchtext angezeigt.

HTML Beispiel zum Kopieren

<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,l,s,o){m["CallTrackingObject"]=l;m[l]=m[l]||function(){
            (m[l].q=m[l].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', 'replacementDone', 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>