So fügst du ein Klaviyo-Einbettungsformular zu deiner BigCommerce-Website hinzu

Übersicht

Erfahre, wie du ein Klaviyo-Einbettungsformular zu deiner BigCommerce-Website hinzufügst. Dafür musst du das Formular in Klaviyo erstellen und dann den Einbettungs-Code in die Dateien deiner Website einfügen, wo es erscheinen soll (z. B. in der Fußzeile).

Diese Anleitung zeigt, wie du das BigCommerce-Standard-Anmeldeformular durch ein Klaviyo-Einbettungsformular ersetzt.

Bevor du anfängst

Um ein Klaviyo-Einbettungsformular auf deiner BigCommerce-Website anzuzeigen, integriere BigCommerce und installiere Klaviyos Onsite-JavaScript (Klaviyo.js). Dieses Skript aktiviert Anmeldeformulare und Onsite-Tracking. Wenn du beim Integrieren mit BigCommerce die Einstellung Klaviyo Onsite JavaScript automatisch hinzufügen (Empfohlen) aktiviert hast, bist du startklar.

Wenn nicht:

1. Wähle in Klaviyo im linken Navigationsbereich Integrationen aus.
   

2. Klicke auf BigCommerce und wähle dann den Tab Einstellungen aus.
3. Aktiviere die Einstellung Klaviyo Onsite Javascript automatisch hinzufügen (empfohlen).
4. Klicke auf Speichern.

Das Beispiel in diesem Artikel verwendet das standardmäßige Cornerstone-Theme von BigCommerce. Beachte, dass sich dein Theme unterscheiden kann, ebenso wie die Namen einiger Dateien oder die Speicherorte von Code-Fragmenten. Wenn du später das Theme wechselst, füge den Einbettungscode auch dem neuen Theme hinzu.

Hinzufügen des Einbettungscodes des Formulars zu deiner Website

Erstelle und veröffentliche zuerst ein Einbettungsformular in Klaviyo. In diesem Abschnitt werden die nächsten Schritte zum Einfügen des Einbettungscodes deines Formulars auf deiner BigCommerce-Website erläutert, damit es korrekt angezeigt wird und Daten richtig synchronisiert werden.

1. Wenn du den Einbettungscode noch nicht kopiert hast, öffne das Formular im Editor, wähle Targeting & behavior > Anzeige aus und kopiere den Code unter Einbettungscode.
   

2. Navigiere zu deiner Website und suche das Standard-Anmeldeformular von BigCommerce. Wenn du ein Cornerstone-Theme verwendest, befindet es sich in der Fußzeile der Website.
   

• Wenn du auf deiner Website kein Standardformular siehst:
  • Öffne dein BigCommerce Dashboard.
  • Navigiere zu Marketing > E-Mail-Marketing.
  • Aktiviere das Kontrollkästchen mit der Bezeichnung Newsletter-Abonnements zulassen. Dadurch kannst du die Einwilligung in E-Mail-Marketing von Besucher*innen auf deiner Website erfassen. Außerdem wird auf deiner BigCommerce-Website standardmäßig ein Kästchen zur E-Mail-Anmeldung hinzugefügt. Wenn dieses Kontrollkästchen bereits aktiviert ist und du trotzdem kein Standardformular siehst, enthält dein Theme möglicherweise keins.

3. Öffne dein BigCommerce-Dashboard und navigiere dann zu Storefront > Themes.
4. Klicke im Bereich Current Theme auf die Dropdown-Liste Advanced und wähle dann Edit Theme Files aus.
   

• Wenn du ein Standard-Theme verwendest, kannst du diese Option nicht auswählen. Stattdessen:
  
  • Klicke auf Kopie erstellen, benenne sie und wähle dann Kopie speichern.
  • Sobald es zum Abschnitt Themes hinzugefügt wurde, wähle die 3 Punkte aus und wähle dann Theme-Dateien bearbeiten. Beachte, dass alle Änderungen, die du vornimmst, nur auf das Theme angewendet werden, das du bearbeitest, und du das Theme auf deiner Website anwenden musst, damit die Änderungen sichtbar werden.

5. Öffne in der linken Seitenleiste die Datei, die dem Ort entspricht, an dem das Standardformular auf deiner Website angezeigt wurde. Wenn sich das Standardformular wie im Beispiel in der Fußzeile befand, navigiere zu Vorlage > components > common und klicke auf die Datei footer.html.
6. Verwende die Suchfunktion (Command+F auf Mac oder Control+F auf Windows), um im Footer-Datei nach dem Wort „newsletter“ zu suchen.
   

7. Suche im darunterstehenden Code nach der Referenz auf das Formular. Im Beispiel wird das Formular in einem anderen Dateipfad referenziert: {{> components/common/subscription-form}}.
   

8. In der linken Seitenleiste folgst du dem Dateipfad, auf den im Code verwiesen wird (in diesem Beispiel wählst du Komponenten > Allgemein > Abonnement-Formular). Von hier aus siehst du die eigentlichen Komponenten des Standardformulars.
   • In diesem Beispiel entsprechen die Überschrift und der Einführungstext des Standardformulars den Stilen des restlichen Designs der Website. Lass diesen Text außerhalb des <form> -Elements, wenn du das Formular ersetzt.
9. Markiere das gesamte <form> -Element, einschließlich des öffnenden <form ...> -Tags, des schließenden </form> -Tags und allem dazwischen. Füge den Einbettungscode ein, den du aus Klaviyo kopiert hast, um ihn zu ersetzen. Klaviyo erstellt ein eigenes Formular. Lass den Einbettungscode daher nicht innerhalb der ursprünglichen Formular-Tags stehen.
   

10. Klicke auf Datei speichern und übernehmen, um diese Änderungen auf deine Website anzuwenden.
    • Wenn auf der Schaltfläche nur Datei speichern steht, ist die Datei, die du gerade bearbeitet hast, noch nicht dein Aktuelles Theme. Du musst auf Datei speichern klicken, dann nach oben scrollen und oben rechts Theme-Dateien bearbeiten > Speichern > Als aktives Theme verwenden auswählen, um das Theme auf deine Website anzuwenden.

Nachdem du den Einbettungscode eingefügt, gespeichert und die Änderungen in BigCommerce angewendet hast, navigiere zurück zu deiner Website und aktualisiere die Seite. Dein Klaviyo-Einbettungsformular wird auf deiner Website angezeigt und beginnt damit, neue Abonnent*innen zur mit dem Formular verknüpften Klaviyo-Liste hinzuzufügen.

Dein Formular testen

1. Sende das Formular auf deiner Website mit einer E-Mail-Adresse ab, die noch nicht auf der mit dem Formular verbundenen Liste steht.
2. Wenn die Liste Double Opt-in verwendet, öffne die Bestätigungs-E-Mail und bestätige das Abonnement. Neue E-Mail-Abonnent*innen treten der Liste bei, nachdem sie bestätigt haben.
3. Überprüfe in Klaviyo, dass die E-Mail-Adresse der Liste hinzugefügt wurde, die mit deinem Formular verbunden ist.

Wenn du dein Formular nicht siehst, lies Fehlerbehebung bei Einbettungsformularen.

Nächste Schritte

Als Nächstes erstellst du einen Welcome-Serie-Flow, um bei deinen neuen Abonnent*innen sofort Wirkung zu erzielen.

Weitere Ressourcen