So bindest du ein Anmeldeformular auf deiner Bestellbestätigungsseite ein

Du wirst lernen

Erfahre, wie du ein Anmeldeformular auf deiner Bestätigungsseite einbindest, um zusätzliche Informationen von Kunden zu sammeln, nachdem sie den Bezahlvorgang abgeschlossen haben. Diese neuen Kunden sind bereits an deiner Marke interessiert, also ist die Bestätigung eine großartige Gelegenheit, weiter mit ihnen in Kontakt zu treten.

Die genauen Schritte, die du unternimmst, um ein Formular auf deiner Bestellbestätigungsseite einzubinden, hängen weitgehend von deiner E-Commerce-Plattform ab, aber der Prozess besteht darin, die Code-Dateien deines Ladens mit einem kurzen Snippet zu aktualisieren. In diesem Leitfaden haben wir beschrieben, wie du das für 2 E-Commerce-Plattformen erreichen kannst:

• Shopify
• BigCommerce

Bevor du beginnst

Wenn du Shopify oder BigCommerce verwendest oder das Klaviyo Plug-in für Magento oder WooCommerce hast, kannst du im folgenden Abschnitt mit der Erstellung deines Formulars beginnen.

Wenn du jedoch eine E-Commerce-Plattform verwendest, die nicht nativ mit Klaviyo integriert ist, musst du sicherstellen, dass du das Active on Site Tracking für deine Website aktiviert hast. Bei den oben genannten Plattformen geschieht dies automatisch, bei anderen Plattformen musst du dies manuell tun. Nur so kann Klaviyo das Anmeldeformular auf deiner Website veröffentlichen. 

Erstelle dein Formular

Du kannst ein Anmeldeformular erstellen und es auf deiner Bestätigungsseite einbinden, um deinen Kunden relevante Fragen zu stellen, nachdem sie den Bezahlvorgang abgeschlossen haben. Du könntest zum Beispiel Fragen stellen, um mehr darüber zu erfahren, wie oft ein Kunde deine Produkte benutzt oder welche neuen Produkte er kaufen möchte.

So erstellst du dein Anmeldeformular:

1. Navigiere auf Klaviyo zu Anmeldeformular > Anmeldeformular erstellen > Von Grund auf neu erstellen.
2. Im erscheinenden Menü gibst du deinem Formular einen Namen und wählst eine Liste für neue Abonnenten aus, an die es gesendet werden soll. 
3. Wähle als Formulartyp Einbetten aus.
   
4. Klicke auf Speichern und fahre mit dem Entwurf fort. 
5. Dadurch gelangst du in den Formulareditor, wo du die folgenden Stile bearbeiten kannst:
   • Stile: Bearbeite das Aussehen deines Formulars, damit es zu deiner Marke passt, z. B. Formular- oder Eingabefeldstile und Schriftart. Du kannst auch jeden Text bearbeiten, indem du ihn anklickst und die Standardsprache durch deine eigene Sprache ersetzt. 
   • Block hinzufügen: Hier kannst du Inhalte zu deinem Formular hinzufügen, um Informationen zu sammeln, z. B. ein Textfeld für eine Frage oder ein Datumsfeld für einen Geburtstag. Achte darauf, dass du für jedes Feld, das du hinzufügst, eine Profileigenschaft festlegst und Kunde nicht mit zu vielen Fragen überforderst.
   • Targeting und Verhalten: Wähle aus, ob das Formular auf dem Desktop, dem Handy oder beidem erscheinen soll. Stelle dein Formular so ein, dass es entweder für alle Besucher angezeigt wird oder für bestehende Klaviyo Profile nicht angezeigt wird.  
6. Wähle in der Menüleiste Erfolg, um die Seite zu bearbeiten, die angezeigt wird, nachdem jemand dein Formular abgeschickt hat.
7. Wenn du mit dem Design deines Formulars zufrieden bist, klicke auf Veröffentlichen.
8. Kopiere deinen Einbettungscode aus dem angezeigten Modal, damit du ihn gleich einfügen kannst. 
   
9. Klicke auf Veröffentlichen.

Dein Formular wird erst dann auf deiner Website angezeigt, wenn du den Einbettungscode in deinen Website-Code eingefügt hast. In den nächsten beiden Abschnitten erfährst du, wie du den Code für eine Shopify Website und dann für eine BigCommerce Website einfügst.

Füge die Einbettung zu deiner Shopify-Website hinzu

1. Navigiere zum Backend deines Shopify Ladens.
2. Gehe zu Einstellungen > Bezahlvorgang > Auftragsabwicklung.
3. Füge unter Zusätzliche Skripte den Einbettungscode ein.

Um zu testen, wie das Formular live aussieht, erstelle eine Musterbestellung und schließe den Bezahlvorgang ab. Je nach dem Thema deines Ladens musst du vielleicht noch einmal in den Formular-Editor gehen, um das gewünschte Aussehen zu erreichen. Achte darauf, dass du nach den Änderungen erneut veröffentlichst. Du musst den Einbettungscode jedoch nicht erneut hinzufügen, da alle Änderungen nach der Veröffentlichung automatisch übernommen werden.

In unserem Beispiel haben wir das Formular mit einem weißen Rand versehen, um mehr Platz zwischen der Nachricht "Danke" und dem Formular selbst zu schaffen. 

Füge die Einbettung zu deiner BigCommerce-Website hinzu

1. Navigiere zu deinem BigCommerce-Admin.
2. Gehe zu Storefront > Script Manager und klicke auf Create a Script .
3. Benenne das Skript und konfiguriere es wie folgt:
   • Standort: Kopf
   • Beschreibung (optional): Beschreibe den Zweck des Skripts
   • Seiten, auf denen das Skript eingefügt wird: Auftragsbestätigung
   • Schriftart: Skript
     
4. Lösche den Inhalt des Skripts und füge stattdessen den folgenden Code ein, um Klaviyo.js zu deiner Bestätigungsseite hinzuzufügen. Beachte, dass du dies auch dann tun musst, wenn du Klaviyo.js bereits auf deiner Website installiert hast:
   

     <script src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js" async="" ></script>
     <script>
        document.addEventListener("DOMContentLoaded", function() {
          var elem = document.createElement('div');
        elem.className = 'klaviyo-form-FORM_ID'
        document.body.appendChild(elem);
        });</script>

5. Ersetze PUBLIC_API_KEYim obigen Snippet durch den öffentlichen API-Schlüssel deiner Website.
6. Ersetze im obigen Snippet FORM_ID durch die ID deines Formulars. Um deine Formular-ID zu finden, navigiere zu dem eingebetteten Formular in deinem Klaviyo-Konto. Die Formular-ID ist der 6-Buchstaben-Code am Ende der URL.
   
7. Wenn du alle Details für das Skript ausgefüllt hast, klicke auf Speichern.

Dein eingebettetes Formular wird jetzt unten auf der Seite angezeigt, nachdem jemand eine Bestellung aufgegeben hat. Je nach Theme kannst du den Rahmen, die Polsterung oder die Größe deines Formulars im Abschnitt "Stile" bearbeiten, um sicherzustellen, dass es zum Erscheinungsbild deiner Bestellbestätigungsseite passt; veröffentliche deine Änderungen, um sie zu sehen.

Nächste Schritte

Wenn du anfängst, Antworten mit deinem eingebetteten Formular zu sammeln, wird jede Übermittlung als benutzerdefinierte Eigenschaft in das Profil des Kunden geladen und kann in Segmenten, Flows und E-Mail-Vorlagen verwendet werden.

Anhand der Antworten kannst du die Post-Purchase-Erfahrung verzweigen. Vielleicht möchtest du auch deinen Willkommensfluss auf der Grundlage dieser Daten verzweigen oder relevante Segmente erstellen, an die du Kampagnen senden kannst. Nehmen wir zum Beispiel an, wir wollen eine neue Wimperntusche auf den Markt bringen. Da wir in diesem eingebetteten Formular Daten über das Produktinteresse sammeln, können wir alle, die uns mitgeteilt haben, dass sie an Mascara interessiert sind, über die Produktveröffentlichung informieren.

Zusätzliche Ressourcen

• Erste Schritte mit dem Anmeldeformular
• So bindest du ein Anmeldeformular auf deiner Website ein