ConvertTab – Do-It-Yourself (DIY) Anleitung – Teil 1

Was ist ConvertTab und worum geht es?

ConvertTab ist ein Conversion-Tool von Sven Hansen und Tommy Seewald. Also, ein Tool, um deine Besucher in Kunden umzuwandeln. Dabei konzentriert sich ConvertTab vor allem auf Besucher, die deine Webseite bereits verlassen haben, indem sie auf den Zurück-Button im Browser oder auf einen anderen Browser-Tab geklickt haben.

ConvertTab sorgt nun dafür, dass dein Tab hervorgehoben wird, indem in diesem ein Nachrichten-Icon erscheint und der Titel des Browser Tabs automatisch geändert wird. Auf diesem Wege sollen die verloren geglaubten Besucher wieder zurückkehren und wieder mit deinem Angebot interagieren. Somit ist ConvertTab ein wirkungsvolles Werkzeug, deine Conversion-Rate spürbar zu steigern.

Da ich viele meiner Webseiten individuell und selber gestalte und während eines Projektes mich mit dieser Funktionsweise schon einmal beschäftigt habe, möchte ich dir in einem kleinen Praxisworkshop zeigen, wie du mit wenigen Handgriffen die beschriebene Technik ohne Hilfsmittel und zusätzliche Tools auf deiner Webseite umsetzen kannst.

Schau dir aber bitte zuerst einmal dieses kurze Video an, damit du dir ein Bild davon machen kannst, was ich gemeinsam mit dir umsetzen möchte und was ConvertTab überhaupt macht.

Du möchtest meine ConvertTab DIY-Anleitung als Video sehen? Kein Problem. Hier geht es direkt zum Video-Tutorial.

Unsere Umsetzung von ConvertTab

Wir konzentrieren uns bei der Umsetzung auf die Darstellung bei Desktops und Laptops, lassen also Tablets und Smartphones außen vor. Bei Smartphones macht dies eh keinen Sinn und bei Tablets ist die Umsetzung deutlich komplizierter. Meines Wissens nach bietet ConvertTab hier auch keine Unterstützung. Selber habe ich ConvertTab aber noch nicht getestet.

Bei ConvertTab bekommst du zur Einbindung in deine Webseite einen kleinen Code-Schnipsel. Diesen musst du einfach ziemlich am Ende deiner Webseite einfügen, das wars. Wir werden diesen Code-Schnipsel also quasi durch unseren eigenen Code ersetzen.

Unser Grundgerüst

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Meine Webseite</title>
  </head>
  <body>

    <h1>
     Meine tolle Webseite!
    </h1>

  </body>
</html>

Dies ist unser ganz simples HTML-Grundgerüst. Der Titel Meine Webseite erscheint als Titel im Browser-Tab. Ausgegeben wird ebenfalls eine Überschrift. Mehr brauchen wir nicht, um unser Vorhaben in die Tat umzusetzen.

Erstelle dir einfach einen Projektordner auf deiner Festplatte und speichere diesen Code in einer Datei mit dem Namen index.html. Du kannst aber auch jeden anderen Namen verwenden, lediglich die Endung musst du beibehalten.

Erstellen werden wir unser Projekt in purem Javascript. Keine Angst, dies ist einfacher als du denkst. Es ist aber auch nicht so wichtig, dass du alles bis ins letzte Detail verstehst. Wichtig sind das Grundprinzip und die Stellen, die du für deine individuellen Texte und Einstellungen benötigst.

Machen wir also weiter mit der Umsetzung unserer individuellen ConvertTab Lösung.

Als nächstes benötigen wir ein sogenanntes Favicon für unsere Webseite. Dies ist das kleine Bild neben deinem Titel im Browser-Tab. Dazu fügen wir eine weitere Zeile im head-Bereich unserer Webseite ein.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" id="favicon">
    <title>Meine Webseite</title>
  </head>
  <body>

    <h1>
     Meine tolle Webseite!
    </h1>

  </body>
</html>

Dieses Favicon fügen wir in Zeile 6 ein. Es trägt den Namen favicon-32x32.png und befindet sich im gleichen Ordner wie deine index.html. Unten kannst du mein Favicon einfach herunter laden. Dann kannst du sofort weiter machen.

Download Favicon

Dem Favicon haben wir eine id mit dem Namen favicon verpasst, damit wir es später gezielt ansteuern können. Denn hier soll ja beim Tab-Wechsel ein rotes Nachrichten-Icon erscheinen. Auch dies kannst du dir direkt runter laden und ins Stammverzeichnis kopieren.

Download rotes Nachrichten-Icon

.

Jetzt geht's richtig los...

Nun fügen wir unseren ersten Javascript-Baustein hinzu. Dieser Block wird mit <script> eingeleitet und mit </script> beendet.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" id="favicon">
    <title>Meine Webseite</title>
  </head>
  <body>

    <h1>
     Meine tolle Webseite!
    </h1>

    <script>
  		const favicon = document.getElementById('favicon');
  		const textArray = ["😎 Warte❗", "Du hast was vergessen❗", "🛑 Komm zurück"];
  		const title = document.title;
  		var counter = 0;

    </script>

  </body>
</html>

Dies geschieht in den Zeilen 15-21. Wir speichern unser aktuelles Favicon in der Konstanten favicon, unsere 3 anzuzeigenden Texte in einem Array namens textArray und unseren Webseiten-Titel unter title. Diesen ändern wir ja genauso wie unser Favicon, daher müssen wir den Titel speichern, um später wieder darauf zurückgreifen zu können. Die Texte unter textArray kannst du natürlich an deine eigenen Bedürfnisse anpassen.

Außerdem richte ich noch eine Variable counter ein, die für das Durchzählen der einzelnen Texte, die als Titel erscheinen, verantwortlich ist. Genauso, wie du es vielleicht schon bei ConvertTab gesehen hast. Da dies ja 3 verschiedene sind, wird counter später von 0-2 zählen müssen. Je nach Bedarf, werden wir noch weitere Variablen hinzufügen.

Den Tab-Wechsel im Browser erkennen...

Jetzt fügen wir schon unsere 2 Hauptfunktionen hinzu, die dann aufgerufen werden, wenn unser Browser-Tab sichtbar oder eben nicht sichtbar ist. Zum Glück hat hier Javascript schon etwas im Repertoire. Aber schau selber...

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" id="favicon">
    <title>Meine Webseite</title>
  </head>
  <body>

    <h1>
     Meine tolle Webseite!
    </h1>

    <script>
  		const favicon = document.getElementById('favicon');
  		const textArray = ["😎 Warte❗", "Du hast was vergessen❗", "🛑 Komm zurück"];
  		const title = document.title;
  		var counter = 0;

      window.onblur = function() {

      }

      window.onfocus = function() {

      }

    </script>

  </body>
</html>

Es sind nämlich 2 Ereignisse hinzugekommen. Einmal in der Zeile 21 das Ereignis onblur und in der Zeile 25 das Ereignis onfocus.

Was bedeutet dies jetzt? Diese beiden Ereignisse warten die ganze Zeit darauf, dass sie dran sind. Onblur tritt in Aktion, wenn der Browser-Tab inaktiv, also nicht mehr sichtbar ist. Und Onfocus kommt auf den Plan, wenn unser Tab wieder sichtbar ist, also in den Fokus kommt.

Wenn du jetzt die index.html mit einem Doppelklick startest, kann aber noch nichts passieren, weil wir innerhalb dieser Funktionen noch nichts eingetragen haben. Dies ändern wir aber gleich...

Endlich passiert was beim Tab-Wechsel...

Wir fügen 2 Zeilen zu unserem Code hinzu, und zwar jeweils eine für die beiden neuen Funktionen.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" id="favicon">
    <title>Meine Webseite</title>
  </head>
  <body>

    <h1>
     Meine tolle Webseite!
    </h1>

    <script>
  		const favicon = document.getElementById('favicon');
  		const textArray = ["😎 Warte❗", "Du hast was vergessen❗", "🛑 Komm zurück"];
  		const title = document.title;
  		var counter = 0;

      window.onblur = function() {
        document.title = "unsichtbar";
      }

      window.onfocus = function() {
        document.title = title;
      }

    </script>

  </body>
</html>

Ist unser Tab aktiv, wird unser gespeichert Titel in den Tab-Titel eingetragen. Dies geschieht mit document.title = title. Unter title haben wir unseren Titel ja vorher gespeichert.

Ist unser Tab inaktiv, schreiben wir zum Testen erst einmal unsichtbar in den Tab-Titel. Später werden wir hier natürlich unsere vorbereiteten Texte verwenden.

Damit sind wir mit diesem Artikel und dem ersten Teil am Ende angelangt. Im zweiten Teil der ConvertTab DIY-Anleitung werden wir dafür sorgen, dass unsere Funktionen nur durchlaufen werden, wenn wir nicht mit mobilen Endgeräten wie Tablet oder Smartphone unterwegs sind. Und natürlich werden wir unseren Text entsprechend unserer Vorgaben rollierend verändern sowie das Favicon durch unser Nachrichten-Icon ersetzen.

Und an dieser Stelle findest du ein komplettes Video-Tutorial über die Umsetzung dieses ersten Teils unserer ConvertTab DIY-Anleitung.

Ich hoffe, dir hat der erste Teil der Umsetzung gefallen und du bist beim  2. Teil wieder dabei. Natürlich ist mir klar, dass ConvertTab, insbesondere aus Sicht der einfachen Bedienung mehr zu bieten hat, aber das war ja auch gar nicht mein Ziel. Aber zum einen muss man nicht für jede Anwendung ein anderes Tool haben und zum anderen ist man so auch in der Lage, die Funktionalität zu erweitern. So finde ich es beispielsweise spannender, nicht unbedingt den Tab-Text permanent zu verändern, sondern zum Beispiel das Nachrichten-Icon blinken zu lassen. 

Wie ist deine Meinung hierzu? Hinterlasse mir doch einfach einen Kommentar. Damit kannst du mich vielleicht motivieren, weitere Artikel in dieser Richtung zu erstellen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.