So fügen Sie einen Push-Benachrichtigungs-Abonnement-Button zu Popups hinzu

Suchen Sie nach einer Möglichkeit, Ihrer Pop-up-Umgebung einen Push-Benachrichtigungs-Abonnement-Button hinzuzufügen?

Pop-ups sind eine großartige Möglichkeit, Ihre Konversionen zu steigern und eine E-Mail-Liste zu erweitern. Aber das ist nicht alles, was Sie damit tun können. Wenn Sie den richtigen Pop-up-Builder verwenden, können Sie alles an Ihren Pop-ups anpassen.

Standardmäßig werden Push-Benachrichtigungen auch mit Pop-up-Modals geliefert. Aber mit einem Pop-up-Builder erhalten Sie weitaus mehr Anpassungsoptionen.

Wir werden also einen Pop-up-Builder verwenden, um das Pop-up zu erstellen und einen Abonnement-Link hinzuzufügen, um Push-Abonnenten zu sammeln.

Sie können ganz einfach einen Button hinzufügen, um Push-Benachrichtigungsabonnenten direkt aus Ihren Pop-ups zu sammeln. Und das ist super einfach. Alles, was Sie brauchen, ist ein Pop-up-Builder und eine Push-Benachrichtigungssoftware, um benutzerdefinierte Pop-ups zum Sammeln von Push-Abonnenten einzurichten.

Legen wir los.

So erstellen Sie ein Pop-up, um Push-Abonnenten zu sammeln

Beginnen wir mit der Erstellung eines Pop-ups. Wir empfehlen die Verwendung von OptinMonster, um alle Ihre Pop-ups zu erstellen.

OptinMonster ist das weltweit führende Conversion-Toolkit, und wir haben es selbst verwendet. OptinMonster macht es super einfach, leistungsstarke Pop-ups zu erstellen, die konvertieren. Und Sie müssen niemals irgendwelche Codes verwenden.

OptinMonster bietet so ziemlich alles, was Sie brauchen, um Ihren Lead-Generierungsprozess zu starten, zu erweitern und zu skalieren.

Hier ist eine kurze Übersicht darüber, was Sie mit dem Toolkit tun können:

• Push-Benachrichtigungsabonnenten mit einem Pop-up sammeln
• Konvertieren Sie Erstbesucher in Stammleser
• Reduzieren Sie die Abbruchrate von Warenkörben und Browsing-Abbrüchen
• Erstellen Sie zeitlich begrenzte Angebote mit echten Countdowntimer
• Erhöhen Sie eBook-Downloads und Verkäufe digitaler Produkte
• Erstellen Sie einen Funnel für Live-Events
• Verbessern Sie die Website-Bindung mit Gamification-Popups
• Leiten Sie Ihren Traffic auf Seiten und Beiträge um, die Ihnen Geld einbringen

Wir verwenden OptinMonster ziemlich oft und haben sogar einen vollständigen Testbericht über OptinMonster geschrieben. Sie können sich das ansehen oder sofort mit Ihrer Kampagne beginnen. Alles, was Sie tun müssen, ist sich bei OptinMonster anzumelden und dem Rest dieses Artikels zu folgen.

Schritt #1: Erstellen Sie eine Pop-up-Kampagne, um Abonnenten zu sammeln

Gehen Sie zu Ihrem OptinMonster-Dashboard und klicken Sie auf die Schaltfläche Erstellen:

Wählen Sie die Option Vorlage, um mit der Erstellung eines Opt-ins mit einer vordefinierten Vorlage zu beginnen:

Für dieses Tutorial erstellen wir ein Pop-up für Black Friday. Wählen Sie den Kampagnentyp Pop-up und suchen Sie nach einer Kampagnenvorlage

Sie können jede Vorlage wählen, die Ihnen gefällt, aber für dieses Tutorial verwenden wir die Vorlage für die Black Friday-Kampagne.

Nachdem Sie Ihre Vorlage ausgewählt haben, geben Sie Ihrer Kampagne einen Namen. Denken Sie daran, dass dieser Kampagnenname für Sie bestimmt ist und Sie wahrscheinlich eine ganze Reihe dieser Pop-ups mit unterschiedlichen Targeting-Optionen erstellen werden. Geben Sie der Kampagne also einen aussagekräftigen Namen, sonst werden Sie später wirklich verwirrt sein.

Je nach Ihrem Tarif können Sie OptinMonster auch auf mehreren Websites verwenden. Wählen Sie also auch die Website aus, auf der Sie Ihre Kampagne anzeigen möchten. Klicken Sie auf Mit dem Erstellen beginnen , wenn Sie fertig sind.

Schritt #2: Bearbeiten Sie Ihr Pop-up, um das Aussehen anzupassen

Mit OptinMonster erhalten Sie einen visuellen Drag-and-Drop-Pop-up-Builder. Sobald Sie Ihrer Kampagne einen Namen gegeben haben, können Sie selbst die kleinsten Details Ihres Pop-ups bearbeiten.

Das Erstaunlichste hier ist, dass Sie einfach auf den Text klicken, den Sie bearbeiten möchten, und ihn direkt ändern. Sie müssen kein Formular ausfüllen oder HTML-Code im Pop-up bearbeiten.

Sie können alles bearbeiten, was Sie an Ihrem Popup ändern möchten, einschließlich Bildern. Wenn Sie mit dem Erscheinungsbild des Opt-ins zufrieden sind, können Sie zu erweiterten Einstellungen übergehen.

Die Art und Weise, wie diese spezielle Vorlage eingerichtet ist, besteht darin, dass das Popup aus drei Teilen besteht. Sie haben einen anfänglichen Ja/Nein-Bildschirm, auf dem der Besucher einen Gutschein am Black Friday wählt. Das ist es, was Sie im obigen Bild sehen. Standardmäßig ist es ein Gutschein für kostenlosen Versand. Sie können jedoch jedes Angebot oder Gutschein hinzufügen, das Sie möchten.

Wenn Ihre Besucher auf die Schaltfläche Ja im Popup klicken, werden sie zum Optin-Bildschirm weitergeleitet. Hier würden Sie Abonnenten sammeln. Standardmäßig sammelt der Optin-Bildschirm E-Mails. Wir werden dies durch eine Schaltfläche zum Sammeln von Push-Abonnenten ersetzen.

Schließlich haben Sie einen Erfolgs-Bildschirm, der angezeigt wird, wenn sich Ihr Besucher anmeldet.

Machen wir das Schritt für Schritt.

Schritt 3: E-Mail-Optin aus dem Popup entfernen

Sie können jedes Modul im Popup bearbeiten, das Sie möchten. Gehen Sie zum Optin-Bildschirm in der unteren Leiste:

Hier können Sie mit der Maus über das E-Mail-Optin-Modul fahren und einfach auf die Schaltfläche zum Löschen klicken, um es zu entfernen:

Nachdem das E-Mail-Optin entfernt wurde, fügen wir eine Schaltfläche hinzu, die Push-Benachrichtigungsabonnenten sammelt.

Schritt 4: Schaltfläche „Zum Abonnieren klicken“ zu Ihrem Popup hinzufügen

Fügen Sie zuerst einen HTML-Block zu Ihrem Popup aus der Seitenleiste in OptinMonster hinzu.

Hier fügen wir den Code zum Sammeln von Push-Benachrichtigungsabonnenten hinzu. Fügen Sie zuerst den folgenden Code ein, um eine klickbare Schaltfläche zu erstellen:

<button class = "btn" onclick="subscribeOnClickButton()">Get Updates via Push Notifications Instead</button>

Fügen Sie den Code dort ein, wo steht, dass Sie HTML hinzufügen können. An diesem Punkt sollten Sie eine neue Schaltfläche in Ihrem Popup sehen:

Scrollen Sie als Nächstes nach unten und fügen Sie das folgende CSS in den CSS-Container ein:

html div#om-{{id}} .btn
{
    font-family: Arial, sans-serif;
    font-weight: 0;
    font-size: 14px;
    color: #fff;
    background-color: #cf1f31;
    padding: 10px 30px;
    width: 100%;
    margin: auto;
    border: solid #cf1f31 2px;
    box-shadow: rgb(0, 0, 0) 0px 0px 0px 0px;
    border-radius: 50px;
    transition : 1000ms;
    transform: translateY(0);
    display: grid;
    align-text: center;
    cursor: pointer;
}

html div#om-{{id}} .btn:hover
{
    transition : 1000ms;
    padding: 10px 35px;
    transform : translateY(-0px);
    background-color: #ffffff;
    color: #cf1f31;
    border: solid 2px #ffffff;
}

An diesem Punkt sollten Sie eine schön aussehende Schaltfläche in Ihrem Popup sehen:

Schritt 5: Abonnementcode von PushEngage abrufen

Push-Benachrichtigungen helfen Ihnen, den Traffic und das Engagement Ihrer Website automatisch zu steigern. Web-Push-Benachrichtigungen sind eine effektive Möglichkeit, Benutzer zurückzugewinnen, die ihre Sitzung abgebrochen oder die Website verlassen haben. Sie helfen dabei, Benutzer erneut anzusprechen, indem sie sie über neue Inhalte, Angebote oder Veranstaltungen informieren.

Push-Benachrichtigungen enthalten auch klare und umsetzbare Nachrichten und Call-to-Action-Schaltflächen, die Benutzer dazu ermutigen, bestimmte Aktionen auszuführen, wie z. B. das Lesen eines Artikels, den Abschluss eines Kaufs oder die Teilnahme an einer Veranstaltung.

Sie können Push-Benachrichtigungen basierend auf den Vorlieben, dem Verhalten und den Interessen der Benutzer anpassen, um sicherzustellen, dass die Nachrichten für jeden Benutzer relevant und wertvoll sind. Benutzer müssen zustimmen, Web-Push-Benachrichtigungen zu erhalten. Dies stellt sicher, dass die Nachrichten nicht als Spam angesehen werden und dass sie mit der Erlaubnis der Benutzer gesendet werden.

Der coolste Teil ist, dass Sie Push-Benachrichtigungsabonnenten aus Ihrem E-Mail-Popup sammeln können. Wenn Ihre Website-Besucher also ihre E-Mail-ID nicht angeben möchten, können Sie sie trotzdem dazu bringen, sich über Web-Push-Benachrichtigungen anzumelden.

Wir empfehlen die Verwendung von PushEngage zum Senden von Web-Push-Benachrichtigungen.

Hier ist ein kurzer Überblick darüber, was Sie mit PushEngage erhalten:

• Hochkonvertierende automatisierte Kampagnen
• Mehrere Targeting- und Kampagnenplanungsoptionen
• Zielverfolgung und erweiterte Analysen
• Intelligente A/B-Tests
• Ein engagierter Success Manager

Sie können kostenlos starten, aber wenn Sie Ihr Geschäft ernsthaft ausbauen wollen, sollten Sie einen kostenpflichtigen Plan kaufen. Außerdem sollten Sie, bevor Sie einen Push-Benachrichtigungsdienst kaufen, diesen Leitfaden zu Kosten für Push-Benachrichtigungen lesen.

Und wenn Sie einen Online-Shop betreiben, hilft Ihnen PushEngage auch, Ihren Umsatz zu steigern, indem Sie automatisierte E-Commerce-Push-Benachrichtigungen erstellen.

Sie werden feststellen, dass PushEngage zweifellos die beste Wahl ist, wenn Sie Traffic, Engagement und Verkäufe für Ihr Unternehmen aufbauen möchten. Und wenn Sie ein begrenztes Budget haben, können Sie immer ein wenig kreativ mit Ihren Push-Benachrichtigungen werden.

Gehen Sie zur PushEngage-Startseite und klicken Sie auf die Schaltfläche Los geht's:

Wählen Sie dann den kostenlosen Plan, um PushEngage auszuprobieren, oder wählen Sie einen kostenpflichtigen Plan, wenn Sie Ihr Geschäft ernsthaft ausbauen möchten. Die kostenpflichtigen Pläne bieten mehr Kampagnenoptionen und die Möglichkeit, noch größere Abonnentenlisten aufzubauen.

Navigieren Sie in Ihrem PushEngage-Dashboard zu Site Settings » Site Details und klicken Sie auf die Schaltfläche Click Here for Setup Instructions. Unter Any Site erhalten Sie Ihren Installationscode:

WARNUNG: Sie müssen den Code kopieren, den Sie von Ihrem Dashboard erhalten. Der Code ist für jeden PushEngage-Benutzer eindeutig. Sie können den Code im Bild nicht kopieren und Push-Benachrichtigungsabonnenten sammeln.

Sobald Sie den Code in Ihrem PushEngage-Dashboard haben, nehmen Sie das zweite Skript und fügen Sie ihm zusätzlichen Code hinzu. Ihr endgültiger Code sollte ungefähr so aussehen:

<script src="https://clientcdn.pushengage.com/core/02a6e92667ae2279fcba8932356c1d93.js" async></script>
<script> window._peq = window._peq || [];
function subscribeOnClickButton(){
window._peq.push(['subscribe',{}.pe,function(res){
console.log(res);
}]);
}
</script>

Schritt 6: Fügen Sie Ihren Abonnementcode zum HTML-Block in Ihrem Popup hinzu

Fügen Sie diesen Code zum HTML-Block in OptinMonster hinzu und Sie sind fertig!

Wenn Sie fertig sind, klicken Sie einfach auf die Schaltflächen Save und Publish.

Schritt 7: Hinzufügen von Klick-Tracking und Kampagnenschließung

Das Letzte, was wir tun müssen, ist das Hinzufügen von Klick-Tracking-Code, um jeden Abonnenten als Konversion in OptinMonster zu betrachten. Wenn der Besucher abonniert, möchten Sie ihn entweder zum Success-Bildschirm weiterleiten oder die Kampagne beenden.

Fügen Sie innerhalb des Javascript-Snippets die folgenden Codezeilen hinzu:

Um die Konversionsverfolgung zu aktivieren, fügen Sie diesen Code hinzu:

om{{id}}.Listeners.convert(); //Track submission as a conversion in OptinMonster

Um Ihren Abonnenten zum Erfolgsbildschirm weiterzuleiten, fügen Sie diesen Code hinzu:

om{{id}}.changeView('success'); // Show Success view on submission

Um die Kampagne bei Abonnement zu schließen, fügen Sie diesen Code hinzu:

om{{id}}.startClose();// Close campaign on submission

Sie können auch mehrere Code-Snippets hinzufügen. Wir empfehlen, Abonnenten zum Erfolgsbildschirm weiterzuleiten und die Konversion zu verfolgen. Der endgültige Code-Snippet, den wir für die Verwendung empfehlen (einschließlich der Schaltfläche und aller Javascript), lautet daher:

<script src="https://clientcdn.pushengage.com/core/02a6e92667ae2279fcba8932356c1d93.js" async></script>
<script> window._peq = window._peq || [];
function subscribeOnClickButton(){
window._peq.push(['subscribe',{}.pe,function(res){
console.log(res);
om{{id}}.Listeners.convert(); //Track submission as a conversion in OptinMonster
om{{id}}.startClose();// Close campaign on submission
}]);
}
</script>
<div>
	<button class="btn" onclick="subscribeOnClickButton()">Get Updates via Push Notifications</button>
</div>

Oder Sie können stattdessen diesen Code verwenden, um die Kampagne direkt zu schließen:

<script src="https://clientcdn.pushengage.com/core/02a6e92667ae2279fcba8932356c1d93.js" async></script>
<script> window._peq = window._peq || [];
function subscribeOnClickButton(){
window._peq.push(['subscribe',{}.pe,function(res){
console.log(res);
om{{id}}.Listeners.convert(); //Track submission as a conversion in OptinMonster
om{{id}}.changeView('success'); // Show Success view on submission
}]);
}
</script>
<div>
	<button onclick="subscribeOnClickButton()">Get Updates via Push Notifications</button>
</div>

Kopieren Sie den Code einfach und fügen Sie ihn in den HTML-Block Ihres OptinMonster-Popups ein.

Und für jedes Code-Snippet denken Sie daran, das folgende CSS im CSS-Bereich Ihres HTML-Blocks hinzuzufügen:

html div#om-{{id}} .btn
{
    font-family: Arial, sans-serif;
    font-weight: 0;
    font-size: 14px;
    color: #fff;
    background-color: #cf1f31;
    padding: 10px 30px;
    width: 100%;
    margin: auto;
    border: solid #cf1f31 2px;
    box-shadow: rgb(0, 0, 0) 0px 0px 0px 0px;
    border-radius: 50px;
    transition : 1000ms;
    transform: translateY(0);
    display: grid;
    align-text: center;
    cursor: pointer;
}

html div#om-{{id}} .btn:hover
{
    transition : 1000ms;
    padding: 10px 35px;
    transform : translateY(-0px);
    background-color: #ffffff;
    color: #cf1f31;
    border: solid 2px #ffffff;
}

Wenn Sie fertig sind, klicken Sie auf Save. Wenn Sie Ihre Website überprüfen, sollten Sie jetzt das Popup sehen, das sowohl E-Mail- als auch Push-Benachrichtigungsabonnenten sammelt:

Und so sammeln Sie Push-Abonnenten aus Ihrem Popup. Push-Benachrichtigungen haben ihre eigenen Popup-Modals. Aber sie sind etwas schwierig anzupassen. Sie können also schöne Popups mit OptinMonster erstellen und sie dann als Ihre Push-Benachrichtigungs-Popups verwenden.

Schritt 8: Veröffentlichen Sie Ihr Exit-Intent-Popup in WordPress

Wenn Sie eine neue Kampagne erstellen, ist diese standardmäßig Paused.

Gehen Sie zum Tab Publish im oberen Menü, um die Publish Options zu sehen. Setzen Sie dann den Status auf Publish und wählen Sie die Website-Plattform aus:

Wenn Sie eine WordPress-Site betreiben, übernimmt das OptinMonster-Plugin die restliche Einrichtung automatisch. Dasselbe gilt für Shopify und BigCommerce. Für jede andere Website klicken Sie auf Beliebige Website und fügen Sie den Einbettungscode in den Kopfbereich Ihrer Website ein:

Und fertig!

Bonusschritt: Deaktivieren Sie die Schnelleinrichtung in PushEngage

Die Schnelleinrichtung ist eine Methode, um Push-Benachrichtigungsabonnenten zu einer Website ohne SSL-Zertifikat hinzuzufügen. Heutzutage haben fast alle Websites ein SSL-Zertifikat, aber nur für den Fall, dass Sie keines installiert haben, empfehlen wir Ihnen dringend, sofort eines installieren zu lassen. Lesen Sie diesen Artikel darüber, wie Sie ein SSL-Zertifikat in WordPress installieren.

Bevor Sie also mit dem Sammeln von Abonnenten auf Ihrer Website beginnen, empfehlen wir Ihnen, auch die Schnelleinrichtung zu deaktivieren. Gehen Sie zum PushEngage-Dashboard und navigieren Sie zu Design » Popup-Modals. Deaktivieren Sie dann Schnelleinrichtung:

Und jetzt sind Sie bereit, Ihre Website zu bewerben und mehr Abonnenten für den Black Friday zu sammeln!

Was tun, nachdem Sie mit dem Sammeln von Push-Abonnenten begonnen haben

Das war's für dieses Mal, Leute!

Lassen Sie uns wissen, ob dieser Artikel geholfen hat. Das Erstellen von Popups auf Ihrer Website kann Ihnen helfen, Ihren Traffic in Push-Abonnenten und echte Geschäftskontakte umzuwandeln. Und wir empfehlen Ihnen dringend, sofort mit der Erstellung von Exit-Intent-Popups zu beginnen.

Und wenn Sie nach einer erschwinglichen Möglichkeit suchen, Ihren Traffic zu steigern, empfehlen wir die Verwendung von Push-Benachrichtigungen. Push-Benachrichtigungen können Ihnen helfen, mehr wiederkehrenden Traffic und Website-Engagement zu erzielen. Sie können auch automatisierte Push-Benachrichtigungs-Kampagnen erstellen, die Verkäufe generieren.

Nicht überzeugt? Sehen Sie sich diese Ressourcen an:

• 7 clevere Strategien zur Steigerung des Kundenengagements
• Sind Push-Benachrichtigungen effektiv? 7 Statistiken + 3 Expertentipps
• Einrichtung von Push-Benachrichtigungen für abgebrochene Warenkörbe (einfaches Tutorial)
• So fügen Sie Ihrer Website ein Web-Benachrichtigungs-WordPress-Plugin hinzu

Wir empfehlen die Verwendung von PushEngage, um Ihre Push-Benachrichtigungskampagnen zu erstellen. PushEngage ist die weltweit führende Software für Push-Benachrichtigungen. Wenn Sie also noch nicht dazu bereit sind, beginnen Sie noch heute mit PushEngage!