So fügen Sie Browser-Tab-Benachrichtigungen in WordPress ganz einfach 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
• Typ 1: Neue Updates als Browser-Tab-Benachrichtigung anzeigen
• Typ 2: Favicons als Browser-Tab-Benachrichtigung ändern
• Typ 3: Ändern des Seitentitels als Browser-Tab-Benachrichtigung
• Bonus: Web-Push-Benachrichtigungen zu Ihrer WordPress-Website hinzufügen
• Häufig gestellte Fragen zum Hinzufügen von Browser-Tab-Benachrichtigungen

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

Sie können Browser-Tab-Benachrichtigungen ganz 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 selbst ein kleiner Fehler kann Ihre Website 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 auf dem Bildschirm aus.

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 großartig, wenn Sie die Aufmerksamkeit der Benutzer auf sich ziehen möchten, indem Sie Aktivität auf Ihrer Website simulieren. Eine Zahl erscheint im Tab-Titel, wodurch es so aussieht, als ob eine neue Nachricht oder ein neues Update auf den Benutzer wartet.

Zum Beispiel verwenden Websites wie Facebook und LinkedIn dies, um ungelesene Benachrichtigungen anzuzeigen. Sie können diesen psychologischen Auslöser nutzen, um Benutzer zu ermutigen, zu Ihrem Tab zurückzukehren, um zu sehen, was sie verpassen.

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 Menü 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 );

Dieser Code weist den Browser an, mit dem Zählen zu beginnen, wenn der Benutzer zu einem anderen Tab wechselt. Sobald er zu Ihrer Website zurückkehrt, wird der Titel zurückgesetzt.

Sobald Sie dies getan haben, scrollen Sie nach unten zum Abschnitt „Einfügen“. Wählen Sie einfach die Option „Automatisch einfügen“ und lassen Sie den Speicherort auf „Website-weiter Header“.

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 an, wenn Benutzer zu einem anderen Tab navigieren. Dies ist eine subtile Möglichkeit, sie daran zu erinnern, dass Ihre Website noch geöffnet ist.

Dazu verwenden wir einen JavaScript-Snippet, der das Bild austauscht, wenn der Benutzer die Seite verlässt.

Besuchen Sie zuerst die Seite Code-Snippets » + Snippet hinzufügen und klicken Sie auf „+ Benutzerdefiniertes Snippet hinzufügen“.

Wählen Sie auf der Erstellungsseite im Menü „JavaScript-Snippet“ als „Code-Typ“ aus.

Sobald Sie dies getan haben, kopieren Sie 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);
}

Nach dem Einfügen des Codes müssen Sie die URL in der Zeile Favicon durch den Link zu Ihrem eigenen Benachrichtigungsbild ersetzen.

Laden Sie einfach Ihr neues Favicon in die WordPress Mediathek hoch und kopieren Sie den Dateinamen (in meinem Beispiel ist es daisy.jpeg). Fügen Sie ihn dann in Anführungszeichen in den Code ein.

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 Website-Titel ä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 in eine 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.

Klicken Sie hier unter der Option „Ihren benutzerdefinierten Code 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 auf der Seite „Benutzerdefiniertes Snippet erstellen“ sind, 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-Snippet kopieren und in das Feld „Code-Vorschau“ 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 möglicherweise nur zur Seite „In den Warenkorb legen“ hinzufügen, um den Warenkorbabbruch auf Ihrer Website zu reduzieren.

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

Browser-Tab-Benachrichtigungen sind effektiv, aber sie haben eine große Einschränkung. Sie funktionieren nur, wenn der Benutzer Ihren Tab geöffnet lässt.

Wenn Sie Besucher auch nach dem Schließen Ihrer Website erreichen möchten, benötigen Sie Web-Push-Benachrichtigungen. Im Gegensatz zu Tab-Warnungen sind dies aktive Nachrichten, die direkt an das Gerät oder den Browser des Benutzers gesendet werden.

Der einfachste Weg, dies einzurichten, ist mit PushEngage. Es ist die beste Push-Benachrichtigungssoftware auf dem Markt.

PushEngage ermöglicht es Ihnen, automatische Updates für neue Blogbeiträge, Preisnachlässe oder abgebrochene Warenkörbe zu senden. Wir verwenden es hier bei WPBeginner, um unsere Abonnenten über neue Tutorials zu informieren, und es ist eine Top-Quelle für wiederkehrenden Traffic für uns.

Um mehr darüber zu erfahren, lesen Sie unsere vollständige PushEngage-Bewertung.

Es enthält leistungsstarke Funktionen wie A/B-Tests, Auto-Push, Benutzersegmentierung und intelligente Opt-in-Erinnerungen. Diese Tools helfen Ihnen, ein treues Publikum aufzubauen, das immer wieder zurückkehrt.

Weitere Details finden Sie in unserem Leitfaden für Anfänger, wie Sie Web-Push-Benachrichtigungen in WordPress hinzufügen.

Häufig gestellte Fragen zum Hinzufügen von Browser-Tab-Benachrichtigungen

Hier sind einige Fragen, die unsere Leser häufig stellen, wenn es um das Hinzufügen von Browser-Tab-Benachrichtigungen in WordPress geht:

Wie füge ich eine Ankündigungsleiste in WordPress hinzu?

Der einfachste Weg, eine Ankündigungsleiste hinzuzufügen, ist die Verwendung eines Plugins wie OptinMonster. Es ermöglicht Ihnen, feste Leisten zu erstellen, die oben oder unten auf Ihrer Website angezeigt werden, um Updates, Verkäufe oder Benachrichtigungen anzuzeigen, ohne Code schreiben zu müssen.

Für weitere Informationen lesen Sie unser Tutorial zum Erstellen einer Benachrichtigungsleiste in WordPress.

Wie füge ich Benachrichtigungen in WordPress hinzu?

Um On-Site-Benachrichtigungen hinzuzufügen, können Sie ein Plugin wie PushEngage oder WPCode verwenden.

PushEngage kümmert sich um aktive Web-Push-Benachrichtigungen, die an Browser gesendet werden, während WPCode es Ihnen ermöglicht, benutzerdefinierte Skripte für passive Tab-Titel-Warnungen hinzuzufügen, wie die in dieser Anleitung.

Wie aktiviere ich Webbrowser-Benachrichtigungen?

Sie müssen sich bei einem Web-Push-Benachrichtigungsdienst wie PushEngage anmelden.

Sobald Sie deren WordPress-Plugin installiert haben, kann Ihre Website Besucher automatisch um Erlaubnis bitten, Warnungen an ihren Browser/ihr Gerät zu senden, auch wenn sie sich gerade nicht auf Ihrer Website befinden.

Wie füge ich eine Notiz in WordPress hinzu?

Sie können eine einfache Notiz innerhalb eines Beitrags mit dem Standard-Gruppenblock und einer Hintergrundfarbe im WordPress-Editor hinzufügen.

Für seitenweite Notizen, die auf jeder Seite erscheinen, empfehlen wir die Verwendung eines Plugins für eine schwebende Leiste wie OptinMonster oder SeedProd.

Wie füge ich ein Popup-Banner in WordPress hinzu?

Das beste Werkzeug zum Hinzufügen von Popup-Bannern ist OptinMonster.

Es bietet einen Drag-and-Drop-Builder zum Erstellen von Lightboxes, Slide-ins und schwebenden Bannern, die basierend auf spezifischem Benutzerverhalten ausgelöst werden, wie z. B. Verweildauer auf der Seite oder Exit-Intent.

Um loszulegen, sehen Sie sich unser Tutorial zum Hinzufügen eines Popups in WordPress an.

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.