Popup-Formular von Brevo für Newsletter Anmeldung einbinden

[Dagmar-Lioba]

Hey ihr Lieben,

ich möchte gerne, dass sich nach ein paar Sekunden, in denen jemand auf meiner Seite ist, das übliche Popup Formular mit '15% Rabatt bei Newsletter-Anmeldung' öffnet. Dieses hab ich bereits bei Brevo erstellt. Am Ende der Formular-Erstellung wurden ein paar Optionen genannt, wie man dieses nun im Shop einbinden kann. Die angeblich einfachste Möglichkeit: einbinden eines Iframes in mein Theme (meins: IMPULSE). Jetzt finde ich dort aber nirgends eine Möglichkeit, den Code einzubinden. In einem unabhängigen Youtube-Tutorial hat jemand gezeigt, an welcher Stelle im Theme Liquid man den iframe reinkopieren soll - als ich das versucht habe, hatte ich statt eines Popups das Formular statisch über meinem Header. Jetzt trau ich mich nicht mehr, irgendwas am Code zu verändern. Vielleicht stehe auch nur auf dem Schlauch, aber es kann doch nicht so schwer sein, so ein Popup-Formular im Shop einzubinden - dieses blöde Ding poppt doch auf jeder x-beliebigen Seite auf. Auch über die Suche-Lupe hier bin ich nur auf einen Eintrag gestoßen, aber die Antwort von Gabe hat mich auch eher ratlos zurückgelassen und mein Fazit war: es scheint wohl doch komplizierter zu sein, als man denken würde. Gibt es hier jemanden, der mir genau sagen kann, wie das geht? (Falls ich doch nur auf dem Schlauch stehe) - Oder, wenn es zu kompliziert ist, mir das gegen ein kleines Entgelt einrichten würde? 
(Die Brevo-App ist übrigens bereits einwandfrei mit meinem Shopify-Shop verbunden, das ist also nicht das Problem.)

[Gabe · Accepted solution]

Hey @Dagmar-Lioba 

Danke für die Fragen und bei so einem Fall wäre ein befristeter Vorschaulink zu einem Beispiel sehr hilfreich das schneller zu analysieren. Und wie sieht es mit unserem Angebot an andere Newsletter Apps die tolle Popups anbieten wie beispielsweise Klaviyo? Brevo scheint irgendwie einen Popup wie du den brauchst NICHT anzubieten und somit musst du zu den "iFrame" Massnahmen greifen, die ich weiter unten beschreibe. Wäre eine App wie Klaviyo oder der nativ im Theme eingebaute Popup nicht eine einfachere Lösung?

Dann ist eine Best-Practice den Newsletter Popup nicht so früh erscheinen zu lassen, sondern erst viel später im Klick-Funnel (was ein klassischer Fehler vieler Shopinhaber ist, mit Bezug auf UX Design Thinking und die Customer journey). Der Kunde kennt in den ersten Sekunden ja noch gar nicht dein Shop, deine Brand Identity, und deine Produkte und Angebote und ist somit eher nicht dazu bereit, sich im Newsletter Popup anzumelden - hier muss man sich in die Psychologie und Perspektive des Besuchers im Shop hineinversetzen können, was nicht viele Shopinhaber machen wollen oder können.

Erst später wenn man als Besucher zum Shop das Shop und die Angebote durchstöbert hat, und eine Awareness und Interesse für die Angebote entwickelt hat, denkt man sich "Ah ok, ich bin jetzt interessiert, einen Newsletter zu bekommen". Somit kannst du ganz effektiv deine Subscriber Rates von sehr klein auf viel grösser wachsen lassen. Bzgl. UX Design Thinking, Customer journey, Psychologie des Sales-Funnel usw. findest du vieles in unseren Blog Serien die viele hilfreiche Information bieten hier.

Dein Popup Problem und ein paar Lösungsansätze:

Das Einbinden eines Popups auf einer Webseite erfordert in der Regel ein bisschen mehr als nur das Einfügen eines Iframe-Codes an irgendeiner Stelle im Theme-Code. Ein Popup-Fenster soll ja bei bestimmten Bedingungen (in deinem Fall nach einigen Sekunden oder erst viel später im Klick-Funnel, je nachdem wie du dich entscheidest) erscheinen und nicht ständig sichtbar sein, wie in deinem Fall - ein statisches Element. Es wird aber einen Eingriff in dein Theme Code verlangen und beachte auch, dass es wichtig ist, vor jeder Code-Änderung eine Sicherungskopie des aktuellen Themes zu erstellen.

Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

In deinem Theme, gehe zu „Aktionen“ -> "Duplizieren" -> „Code bearbeiten“.

JS-Bibliothek einbinden (falls noch nicht vorhanden): Damit wir später JavaScript verwenden können, um das Popup anzuzeigen, müssen wir sicherstellen, dass die jQuery-Bibliothek eingebunden ist. Gehe zu theme.liquid und schaue, ob ein jQuery-Link vorhanden ist. Wenn nicht, füge einen Snippet wie den folgenden Code in den <head>-Bereich ein:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Iframe einfügen: Füge den Iframe-Code (von Brevo) am Ende der theme.liquid Datei ein, aber mache ihn standardmäßig unsichtbar mit style="display: none;".

Beispiel:

<iframe src="Ihr_Brevo_Link" style="display: none;" id="brevo-popup"></iframe>

JavaScript-Code hinzufügen: Jetzt füge am Ende der theme.liquid Datei den folgenden JavaScript-Code ein:

<script>
$(document).ready(function() {
    setTimeout(function() {
        $('#brevo-popup').fadeIn();
    }, 5000); // Das Popup erscheint nach 5 Sekunden. Sie können die Zeit ändern, indem Sie 5000 (5 Sekunden) durch die gewünschte Anzahl von Millisekunden ersetzen.
});
</script>

Speichere das und jetzt sollten hoffentlich das Popup nach der angegebenen Zeit (hier 5 Sekunden) aufpoppen, sobald du den Shop betrittst. Falls du unsicher damit bist oder Probleme hast, empfehle ich, einen Webentwickler oder Shopify-Experten zu beauftragen.

Viele bieten solche kleinen Anpassungen für einen angemessenen Preis an. Es ist immer besser, sicherzustellen, dass alles richtig und professionell gemacht wird, besonders wenn es um deinen Online-Shop geht.

---
Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Oder lass wissen, wenn du weitere Fragen dazu hast oder zum Shop und Business und gerne können wir das hier weiter besprechen! Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[Dagmar-Lioba]

Lieber Gabe,
wow, vielen Dank für deine ausführliche Antwort.
Ich denke, ich werde einen Experten dazu befragen, da ich schon beim Lesen merke, dass es mich überfordern würde, den Code zu ändern.
Deinen Tipp, das Popup nicht zu früh erscheinen zu lassen, werde ich beherzigen, vielen Dank dafür!! Du hast total Recht mit dem, was du schreibst, ich hatte das bisher nicht bedacht, aber es macht natürlich total Sinn, den Gast auf meiner Seite erst mal mit meiner Marke warm werden zu lassen. Ich werde es so machen, wie du schreibst, bzw. erst mal die Artikel zum Thema UX DESIGN THINKING & CUSTOMER JOURNEY zu lesen. Sehr spannend! Danke!
Und was ich noch überlegen werde, aber ich denke, das werde ich dann einfach den Experten fragen, ist, ob es sinnvoller ist, "einfach" den iframe von Brevo  in den Code einzubauen, um deren Popup nutzen zu können, oder ob ich mir das Popup-Newsletter-Ding von einem anderen Anbieter hole und nur den restlichen Newsletter-Workflow dann über Brevo mache. Denn von dem Popup-Thema abgesehen finde ich das Gestalten der Newsletter mit Brevo super, es ist ein sehr intuitives Programm und man kann damit echt easy seine Newsletter gestalten. Aber die von dir genannten Apps schau ich mir auf jeden Fall an! 
Danke!!

Dagmar

[Gabe]

Hey Dagmar! @Dagmar-Lioba 

Das freut mich, dass das hilfreich war! Und vielleicht ist das Newsletter Popup von Brevo doch eine super Kundenerfahrung. 

Ich hoffe die haben eine einfache Lösung für dich den Popup dynamisch einzubauen! Halte mich auf dem Laufenden was die sagen.

VG,