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 nutzen viele E-Commerce-Seiten dies, um Benutzer sanft daran zu erinnern, zurückzukehren und ihren Kauf abzuschließen, wenn sie die Registerkarte wechseln. Es ist subtil, nicht aufdringlich und kann die Konversionsraten auf Ihrer gesamten Website steigern.

In diesem Leitfaden zeigen wir Ihnen, wie Sie ganz einfach Browser-Tab-Benachrichtigungen in WordPress hinzufügen, damit Sie Besucher fokussiert halten und sie immer wieder zurückbringen 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.

Warum Browser-Tab-Benachrichtigungen in WordPress hinzufügen?

Browser-Tab-Benachrichtigungen helfen dabei, Besucher zu Ihrer Website zurückzubringen, nachdem sie zu einem anderen Tab gewechselt haben. Anstatt einen Besucher komplett zu verlieren, können Sie subtile Benachrichtigungen verwenden, um sie an Ihre Inhalte, Produkte oder Sonderangebote zu erinnern.

Dies macht Browser-Tab-Benachrichtigungen zu einer einfachen, aber effektiven Möglichkeit, das Engagement und die Konversionen zu steigern. Hier sind einige der größten Vorteile der Verwendung von Browser-Tab-Benachrichtigungen:

• Ablenkende Besucher erneut einbinden: Ermutigen Sie Benutzer, nach dem Wechsel zu einem anderen Tab zu Ihrer Website zurückzukehren.
• Warenkorbabbrüche reduzieren: Erinnern Sie Käufer an Produkte, die sie in ihrem Warenkorb gelassen haben, bevor sie Ihren Shop verlassen.
• Konversionen steigern: Lenken Sie die Aufmerksamkeit auf Sonderangebote, Lead-Magnete und wichtige Handlungsaufforderungen.
• Markensichtbarkeit verbessern: Halten Sie Ihre Website mit benutzerdefinierten Nachrichten oder visuellen Benachrichtigungen präsent.
• Benutzerengagement steigern: Ermutigen Sie Besucher, Artikel weiterzulesen, Formulare auszufüllen oder Ihre Inhalte zu erkunden.

Eine Browser-Tab-Benachrichtigung funktioniert typischerweise, indem sie den Tab-Titel ändert, eine benutzerdefinierte Nachricht anzeigt, das Favicon aktualisiert oder eine Benachrichtigungsanzahl anzeigt, wenn ein Besucher Ihre Website verlässt.

Zum Beispiel könnte ein Online-Shop eine Nachricht wie „Vergessen Sie nicht Ihren Warenkorb!“ anzeigen, während ein Blog „Kommen Sie für mehr Tipps zurück!“ anzeigen könnte, wenn ein Besucher einen anderen Tab öffnet.

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

Arten von Browser-Tab-Benachrichtigungen

Abhängig von Ihren Zielen können Sie verschiedene Arten von Browser-Tab-Benachrichtigungen verwenden, um die Aufmerksamkeit der Besucher zu erregen und sie zur Rückkehr auf Ihre Website zu ermutigen.

Hier ist ein schneller Vergleich der beliebtesten Optionen:

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 ganz einfach Browser-Tab-Benachrichtigungen auf Ihrer Website hinzufügen, indem Sie benutzerdefinierten Code in WordPress einfügen. Normalerweise müssen Sie die functions.php-Datei Ihres Themes bearbeiten, aber selbst ein kleiner Fehler kann Ihre Website lahmlegen.

Deshalb empfehlen wir die Verwendung von WPCode. Vertraut von über 3 Millionen Websites, ist es das beste WordPress-Code-Snippets-Plugin auf dem Markt.

Wir haben festgestellt, dass dies der sicherste und einfachste Weg ist, benutzerdefinierten Code zu Ihrer Website hinzuzufügen. Sie können benutzerdefinierten JavaScript-Code über eine spezielle Benutzeroberfläche einfügen, ohne Theme-Dateien bearbeiten zu müssen. Dies verhindert versehentliche Website-Fehler.

Details finden Sie in unserer WPCode-Bewertung.

Zuerst müssen Sie das WPCode-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung, wie man ein WordPress-Plugin installiert.

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 originalTitle = document.title;
let titleInterval;

function startCounting() {
    if (!titleInterval) { // Only start if not already running
        titleInterval = setInterval(() => {
            count++;
            document.title = '(' + count + ') ' + originalTitle;
        }, 2000);
    }
}

function stopCounting() {
    clearInterval(titleInterval);
    titleInterval = null;
    document.title = originalTitle;
    count = 0; // Reset count when returning
}

window.addEventListener('blur', startCounting);
window.addEventListener('focus', stopCounting);

Dieser Code aktualisiert kontinuierlich den Titel des Browser-Tabs mit einer inkrementierenden Zahl, wenn der Benutzer den Tab verlässt, und simuliert so fortlaufende Aktivität.

Wenn der Benutzer zu Ihrer Website zurückkehrt, wird der Titel auf normal zurückgesetzt und die Zählung 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.

Für die dynamische Änderung des Favicons ist es am besten, das href des bestehenden Favicon-Links zu ändern, der von Ihrem WordPress-Theme bereitgestellt wird (normalerweise über document.querySelector('link[rel="icon"]') zu finden).

Dies ist besser, als ein neues <link>-Tag einzufügen, was zu Konflikten oder unerwartetem Verhalten führen kann.

Um dies zu erreichen, verwenden wir einen JavaScript-Snippet, der das Bild austauscht, wenn der Benutzer die Seite verlässt, und es wiederherstellt, wenn er zurückkehrt.

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:

// This script assumes an existing favicon link in the head (e.g., from your theme).
// If your theme doesn't provide one, you might need to add a default <link> tag
// using an HTML snippet in WPCode, inserted into the site-wide header.

document.addEventListener('DOMContentLoaded', function() {
    const faviconLink = document.querySelector('link[rel="icon"]'); // Find the existing favicon link
    if (!faviconLink) {
        console.warn("No favicon link found. Please ensure your theme adds one or add it manually in the head.");
        return;
    }

    const originalFavicon = faviconLink.href;
    // Replace with the full URL of your desired notification image
    const notificationFavicon = 'https://example.com/wp-content/uploads/2022/10/favicon-notification.png';

    window.addEventListener('blur', function() {
        faviconLink.href = notificationFavicon;
    });

    window.addEventListener('focus', function() {
        faviconLink.href = originalFavicon;
    });
});

Nachdem Sie den Code eingefügt haben, müssen Sie die URL in der Zeile const notificationFavicon = durch den Link zu Ihrem eigenen Benachrichtigungsbild ersetzen.

Laden Sie einfach Ihr neues Favicon in die Mediathek von WordPress hoch und kopieren Sie die vollständige URL des hochgeladenen Bildes (z. B. https://example.com/wp-content/uploads/2024/05/favicon-notification.png).

Fügen Sie es dann in die Anführungszeichen im 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 es in einen beliebigen Shortcode-fähigen Bereich ein, z. B. in Sidebar-Widgets oder am Ende des Content-Editors.

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-Snippets wird der Titel Ihrer Website geändert, um eine auffällige Nachricht anzuzeigen, 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 „In den Warenkorb“-Seite 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 für eine breitere Reichweite erkunden

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 unseren vollständigen PushEngage-Testbericht.

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 man Web-Push-Benachrichtigungen in WordPress hinzufügt.

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.

Weitere Informationen finden Sie in unserem Tutorial zur Erstellung 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 verwenden oder WPCode verwenden, um benutzerdefinierte Skripte einzufügen.

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 für einen 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 Hinweise, die auf jeder Seite angezeigt werden, empfehlen wir die Verwendung eines Floating Bar-Plugins 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 prüfen.

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.