So fügen Sie ganz einfach Browser-Tab-Benachrichtigungen in WordPress hinzu

Browser-Tab-Benachrichtigungen sind eine dieser einfachen, aber effektiven Funktionen, die Besucher leise bei Laune halten und sie ermutigen, wiederzukommen.

Zum Beispiel verwendet WPForms dies, um Benutzer sanft daran zu erinnern, zurückzukehren und ihren Kauf abzuschließen, wenn sie die Tabs wechseln. Es ist subtil, nicht aufdringlich und kann die Konversionsraten auf Ihrer gesamten Website steigern.

In dieser Anleitung zeigen wir Ihnen, wie Sie diese aufmerksamkeitsstarken Tab-Benachrichtigungen einfach zu Ihrer WordPress-Site hinzufügen können. 🙌

Sobald Sie es ausprobiert haben, werden Sie sehen, warum es ein so nützliches Werkzeug ist, um Besucher fokussiert zu halten und sie wiederkommen zu lassen.

Was ist eine Browser-Tab-Benachrichtigung?

Eine Browser-Tab-Benachrichtigung ist eine Nachricht, die im Tab Ihrer Website erscheint, wenn einer unserer Besucher eine andere Seite in seinem Browser betrachtet.

Durch das Hinzufügen einer Browser-Tab-Benachrichtigungsfunktion auf Ihrer WordPress-Website können Sie die Aufmerksamkeit des Benutzers in dem Moment auf sich ziehen, in dem er einen anderen Tab öffnet, um Ihre Seite zu verlassen.

Sie können zum Beispiel das Favicon Ihrer Website ändern, es animieren, eine benutzerdefinierte Nachricht schreiben oder einfach den Tab blinken lassen.

Wenn Sie einen Online-Shop haben, können Browser-Tab-Benachrichtigungen wirklich hilfreich sein. Diese Benachrichtigungen holen abgelenkte Kunden zurück, senken die Warenkorbabbrüche und erhöhen die Kundenbindung.

Mit dieser Funktion können Sie Ihre Kunden über Warenkorbabbrüche informieren oder ihnen sogar einen Rabatt anbieten, wenn sie ihre Aufmerksamkeit wieder auf Ihre Website lenken.

Hier ist ein Beispiel für eine Browser-Tab-Benachrichtigung.

Das heißt, wir zeigen Ihnen, wie Sie ganz einfach verschiedene Arten von Browser-Tab-Benachrichtigungen in WordPress hinzufügen können.

Sie können die folgenden Links verwenden, um zur gewünschten Methode zu springen:

WPCode installieren, um Browser-Tab-Benachrichtigungen hinzuzufügen

Sie können Browser-Tab-Benachrichtigungen einfach auf Ihrer Website hinzufügen, indem Sie benutzerdefinierten Code in WordPress hinzufügen. Normalerweise müssen Sie die functions.php-Datei Ihres Themes bearbeiten, aber das kann Ihre Website bei einem kleinen Fehler beschädigen.

Deshalb empfehlen wir die Verwendung von WPCode, dem besten WordPress-Code-Snippet-Plugin auf dem Markt.

Wir haben festgestellt, dass dies der sicherste und einfachste Weg ist, benutzerdefinierten Code zu Ihrer Website hinzuzufügen. Details finden Sie in unserem WPCode-Testbericht.

Zuerst müssen Sie das WPCode Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.

Besuchen Sie nach der Aktivierung die Seite Code-Snippets » + Snippet hinzufügen in der Admin-Seitenleiste Ihres WordPress-Dashboards.

Bewegen Sie nun die Maus über die Option „Benutzerdefinierten Code hinzufügen (Neues Snippet)“ und klicken Sie darunter auf die Schaltfläche „+ Benutzerdefiniertes Snippet hinzufügen“.

Wählen Sie dann den Code-Typ aus der Liste der Optionen, die auf dem Bildschirm erscheinen.

Danach werden Sie zur Seite „Benutzerdefiniertes Snippet erstellen“ weitergeleitet.

Unabhängig davon, welche Art von Browser-Tab-Benachrichtigung Sie verwenden, geben Sie den Code hier ein.

Typ 1: Neue Updates als Browser-Tab-Benachrichtigung anzeigen

Diese Methode ist für Sie, wenn Sie möchten, dass Ihre Benutzer über neue Updates informiert werden, die auf Ihrer Website veröffentlicht werden. Eine Zahl erscheint im Tab, um ihnen mitzuteilen, wie viele neue Elemente sie verpassen.

Wenn Sie beispielsweise einen WooCommerce-Shop haben und gerade einige neue Produkte zum Inventar hinzugefügt haben, sieht der Benutzer in der Browser-Tab-Benachrichtigung eine Zahl, die angibt, wie viele neue Produkte hinzugefügt wurden.

Dies können Sie im folgenden Bild sehen:

Sobald Sie sich auf der Seite „Benutzerdefinierten Code erstellen“ befinden, müssen Sie Ihrem Code einen Namen geben. Sie können alles wählen, was Ihnen hilft, den Code zu identifizieren.

Wählen Sie als Nächstes „JavaScript-Snippet“ als „Code-Typ“ aus dem Dropdown-Menü auf der rechten Seite aus.

Dann müssen Sie nur noch den folgenden Code-Snippet kopieren und in das Feld „Code-Vorschau“ einfügen:

let count = 0;
const title = document.title;
function changeTitle() {
    count++;
    var newTitle = '(' + count + ') ' + title;
    document.title = newTitle;
}
function newUpdate() {
    const update = setInterval(changeTitle, 2000);
}
document.addEventListener('DOMContentLoaded', newUpdate );

Sobald Sie dies getan haben, scrollen Sie nach unten zum Abschnitt „Insertion“. Sie finden zwei Optionen: „Auto Insert“ und „Shortcode“.

Wählen Sie einfach die Option „Automatisch einfügen“ und Ihr Code wird automatisch auf Ihrer Website eingefügt und ausgeführt.

Sie können die Methode „Shortcode“ verwenden, wenn Sie neue Updates nur auf bestimmten Seiten anzeigen möchten, auf denen Sie den Shortcode hinzufügen.

Scrollen Sie danach zurück zum Seitenanfang und schalten Sie den Schalter von 'Inaktiv' auf 'Aktiv'.

Klicken Sie abschließend auf die Schaltfläche „Snippet speichern“, um Ihre Einstellungen zu speichern.

Wenn das erledigt ist, wird Ihr benutzerdefinierter Code-Schnipsel zu Ihrer Website hinzugefügt und beginnt zu funktionieren.

Typ 2: Favicons als Browser-Tab-Benachrichtigung ändern

Mit dieser Methode zeigen Sie ein anderes Favicon im Browser-Tab Ihrer Website an, wenn Benutzer zu einem anderen Tab navigieren.

Ein Favicon ist ein kleines Bild, das in Webbrowsern angezeigt wird. Die meisten Unternehmen verwenden eine kleinere Version ihres Logos.

Um Favicons in Ihrem Browser-Tab zu ändern, verwenden wir das WPCode-Plugin.

Besuchen Sie zuerst die Seite Code-Snippets » + Snippets hinzufügen in Ihrem WordPress-Adminbereich und klicken Sie unter der Option „Benutzerdefinierten Code hinzufügen (Neues Snippet)“ auf die Schaltfläche „Snippet verwenden“.

Dies führt Sie zur Seite „Benutzerdefinierten Snippet erstellen“, wo Sie mit der Eingabe eines Titels für Ihr Code-Snippet beginnen können.

Wählen Sie nun einfach „HTML-Schnipsel“ als „Code-Typ“ aus dem Dropdown-Menü auf der rechten Seite aus.

Kopieren Sie anschließend den folgenden Code und fügen Sie ihn in das Feld 'Code-Vorschau' ein:

<link id="favicon" rel="icon" href="https://example.com/wp-content/uploads/2022/10/favicon.png"/>

<script>var iconNew = 'https://example.com/wp-content/uploads/2022/10/favicon-notification.png';

function changeFavicon() {
    document.getElementById('favicon').href = iconNew;
}
function faviconUpdate() {
    const update = setInterval(changeFavicon, 3000);
    setTimeout(function() { 
        clearInterval( update ); 
    }, 3100);
}

Nachdem Sie den Code eingefügt haben, entfernen Sie einfach die Beispiel-Favicon-Links aus dem Code und ersetzen Sie sie durch Ihre eigenen Bildlinks.

Sie können die Links in unserem Code unten hervorgehoben sehen.

Denken Sie daran, dass die Bilder, die Sie als Favicons auswählen, bereits in die Mediathek Ihrer WordPress-Website hochgeladen sein sollten.

Andernfalls funktioniert der Code nicht und Ihr Favicon ändert sich nicht.

Wenn Sie das getan haben, scrollen Sie nach unten zum Abschnitt „Einfügung“.

Sie können die Option 'Automatisch einfügen' wählen, wenn Sie den Code automatisch auf jeder Seite einbetten möchten.

Um das Favicon nur auf bestimmten Seiten zu ändern, wählen Sie die Option „Shortcode“ und fügen Sie ihn in einen beliebigen Bereich ein, der Shortcodes unterstützt, wie z. B. Sidebar-Widgets oder am Ende des Inhaltseditors.

Gehen Sie als Nächstes zum Seitenanfang und schalten Sie den Schalter in der oberen rechten Ecke von „Inaktiv“ auf „Aktiv“ um. Klicken Sie dann auf die Schaltfläche „Snippet speichern“.

Danach wird Ihr Favicon als Browser-Tab-Benachrichtigung angezeigt.

Typ 3: Ändern des Seitentitels als Browser-Tab-Benachrichtigung

Diese Methode ist für Sie, wenn Sie den Seitentitel ändern möchten, um die Aufmerksamkeit Ihrer Besucher zurückzugewinnen.

Durch die Verwendung dieses Code-Schnipsels ändert sich der Titel Ihrer Website und zeigt eine auffällige Nachricht an, wenn Benutzer zu einem anderen Tab im Browser wechseln.

Wir werden das WPCode-Plugin verwenden, um Ihren Website-Titel als Browser-Tab-Benachrichtigung zu ändern.

Um zur Seite 'Benutzerdefiniertes Snippet erstellen' zu gelangen, besuchen Sie die Seite Code-Snippets » +Snippet hinzufügen in der Admin-Seitenleiste und klicken Sie unter der Option 'Eigene Codes hinzufügen (Neues Snippet)' auf '+ Benutzerdefiniertes Snippet hinzufügen'.

Als Nächstes müssen Sie „JavaScript Snippet“ als Code-Typ aus der Liste der Optionen auswählen, die auf dem Bildschirm erscheinen.

Jetzt, da Sie sich auf der Seite „Benutzerdefiniertes Snippet erstellen“ befinden, geben Sie zunächst einen Titel für Ihr Code-Snippet ein. Dies kann alles sein, was Ihnen hilft, sich daran zu erinnern, wofür der Code bestimmt ist.

Dann müssen Sie nur noch den folgenden Code-Schnipsel kopieren und in das Feld „Code Preview“ einfügen:

function changeTitleOnBlur() {
	var timer     = null;
	var	title     = document.title;
	var altTitle  = 'Return to this page!';
	window.onblur = function() {
		timer = window.setInterval( function() {
			document.title = altTitle === document.title ? title : altTitle;
		}, 1500 );
	}
	window.onfocus = function() {
		document.title = title;
		clearInterval(timer);
	}
}

changeTitleOnBlur();

Nachdem Sie den Code eingefügt haben, können Sie ihn bearbeiten und einfach die gewünschte Nachricht in Ihrem Browser-Tab im Code schreiben.

Um Ihre gewünschte Nachricht zu schreiben, gehen Sie einfach zur Zeile var altTitle = 'Return to this page!'; und ersetzen Sie den Platzhaltertext durch die Nachricht für Ihre Browser-Tab-Benachrichtigung.

Scrollen Sie als Nächstes zum Abschnitt „Einfügen“ und wählen Sie den Modus „Automatisch einfügen“, um Ihre Browser-Tab-Benachrichtigung auf jeder Seite zu aktivieren.

Wenn Sie Ihre auffällige Nachricht jedoch nur auf bestimmten Seiten anzeigen möchten, können Sie die Option „Shortcode“ wählen.

Zum Beispiel möchten Sie diesen Code vielleicht nur auf der „In den Warenkorb“-Seite hinzufügen, damit die Abbruchraten Ihres Warenkorbs auf Ihrer Website gesenkt werden können.

Wenn dies der Fall ist, können Sie die Option Shortcode wählen.

Scrollen Sie danach nach unten zur Option „Standort“ und klicken Sie auf das Dropdown-Menü daneben.

Wählen Sie von hier aus die Option „Site-Wide Footer“.

Scrollen Sie schließlich zurück zum Seitenanfang und schalten Sie den Schalter von „Inaktiv“ auf „Aktiv“.

Klicken Sie dann auf die Schaltfläche 'Snippet speichern', um Ihre Einstellungen zu speichern.

Das war's! Jetzt benachrichtigt Ihr Browser-Tab-Hinweis Benutzer, die Ihre Website verlassen.

Bonus: Web-Push-Benachrichtigungen zu Ihrer WordPress-Website hinzufügen

Eine weitere Möglichkeit, Besucher zurückzugewinnen und die Abbruchrate des Warenkorbs zu senken, ist der Versand von Web-Push-Benachrichtigungen an Ihre Nutzer. Diese Benachrichtigungen sind klickbare Kurznachrichten, die an Ihre Besucher gesendet werden, auch wenn diese nicht auf Ihrer Website sind.

Dies können Sie ganz einfach mit PushEngage tun, der besten Push-Benachrichtigungssoftware auf dem Markt.

Es ermöglicht Ihnen, neue Blogbeitragsbenachrichtigungen oder benutzerdefinierte Nachrichten automatisch zu senden und Drip-Kampagnen ohne Code einzurichten. Wir verwenden es sogar bei WPBeginner und hatten eine ausgezeichnete Erfahrung.

Details finden Sie in unserem PushEngage-Testbericht.

Das Plugin bietet auch andere Funktionen wie vorgefertigte Vorlagen, A/B-Tests, Benutzersegmentierung, intelligente Erinnerungen zur Anmeldung, benutzerdefinierte Kampagnen und interaktive Nachrichtenoptionen.

Sie können all diese Funktionen nutzen, um Benachrichtigungen über abgebrochene Warenkörbe zu erstellen, Nachrichten zu planen und Preisnachlass-Warnungen zu senden, was zu mehr Website-Traffic führt.

Weitere Informationen finden Sie in unserem Leitfaden für Anfänger zum Thema Hinzufügen von Web-Push-Benachrichtigungen in WordPress.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Browser-Tab-Benachrichtigungen in WordPress hinzufügen. Möglicherweise möchten Sie auch unser Tutorial zum Hinzufügen von Feature-Boxen mit Icons in WordPress ansehen und unsere Liste mit Möglichkeiten zum Hinzufügen einer mobilfreundlichen WordPress-Website durchgehen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.