So fügst du ein Klaviyo-Einbettungsformular zu deiner BigCommerce-Website hinzu
Übersicht
Hier erfährst du, wie du ein Klaviyo-Einbettungsformular zu deiner BigCommerce-Website hinzufügst. Dazu musst du das Formular in Klaviyo erstellen und dann den Einbettungscode 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
Bevor du ein Einbettungsformular in Klaviyo erstellst, musst du zuerst BigCommerce integrieren und dann die Funktion für Anmeldeformulare aktivieren (auch „Onsite-Tracking“ genannt). Wenn du beim Integrieren mit BigCommerce die Einstellung Klaviyo Onsite-JavaScript automatisch hinzufügen ausgewählt hast, bist du startklar.
Wenn nicht:
- Wähle in Klaviyo die Registerkarte Integrationen.
- Klicke auf BigCommerce.
- Aktiviere die Einstellung Klaviyo-Onsite-JavaScript automatisch hinzufügen.
- Klicke auf Speichern.
Das Beispiel in diesem Artikel verwendet das Standard-Theme Cornerstone von BigCommerce. Beachte, dass sich dein Theme unterscheiden kann, ebenso wie die Namen einiger Dateien oder die Speicherorte von Code-Fragmenten.
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.
- Falls noch nicht geschehen, kopiere den Einbettungscode für dein Einbettungsformular. Du kannst den Einbettungscode des Formulars aufrufen, indem du das Formular im Editor öffnest und in den Bereich Targeting & behavior klickst.
- 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 Kästchen Newsletter-Abonnements zulassen. Damit kannst du das Einverständnis für E-Mails von Besucher*innen auf deiner Website erfassen und außerdem wird auf deiner BigCommerce-Website ein Standardfeld zur E-Mail-Anmeldung hinzugefügt. Wenn dieses Kästchen bereits aktiviert ist und du trotzdem kein Standardformular siehst, enthält dein Theme möglicherweise keines.
- Öffne dein BigCommerce-Dashboard und navigiere dann zu Storefront > Themes.
- 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.
- Ö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.
- Verwende die Suchfunktion (Command+F auf Mac oder Control+F auf Windows), um im Footer-Datei nach dem Wort „newsletter“ zu suchen.
- Suche im darunterstehenden Code nach der Referenz auf das Formular. Im Beispiel wird das Formular in einem anderen Dateipfad referenziert: {{> components/common/subscription-form}}.
- 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.
- Da die Kopfzeile und Sprache des Standardformulars mit den Stilen unserer Website übereinstimmen, ersetzen wir nur das eigentliche Formulareingabefeld. Im Quellcode siehst du, dass das Eingabefeld des Standardformulars im <form> -Element enthalten ist.
- Markiere alles zwischen dem öffnenden und dem schließenden <form> -Tag und füge dann den Einbettungscode ein, den du von Klaviyo kopiert hast, um den hervorgehobenen Text zu ersetzen.
- 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.
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.