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

Du wirst lernen

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 er erscheinen soll (z. B. in der Fußzeile).

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

Bevor du beginnst

Bevor du ein Einbettungsformular in Klaviyo erstellst, musst du zunächst die Integration mit BigCommerce vornehmen und dann die Anmeldeformular-Funktionalität aktivieren (auch "Onsite Tracking" genannt). Wenn du die Einstellung Automatically add Klaviyo onsite JavaScript when integrating with BigCommerce aktiviert hast, bist du bereit. 

Wenn nicht:

1. In Klaviyo klickst du unten links auf den Namen deiner Organisation und wählst dann Integrationen.
   
2. Klicke auf BigCommerce.
3. Aktiviere die Einstellung Automatically add Klaviyo onsite javascript.
4. Klicke auf Speichern.

Das Beispiel in diesem Artikel verwendet das Standardthema Cornerstone von BigCommerce. Denke daran, dass sich dein Theme unterscheiden kann, ebenso wie die Namen einiger Dateien oder die Speicherorte von Code-Fragment.

Den Einbettungscode des Formulars auf deiner Website einfügen

Als erstes erstellst und veröffentlichst du ein Einbettungsformular in Klaviyo. In diesem Abschnitt erfährst du, wie du den Einbettungscode deines Formulars auf deiner BigCommerce-Website einfügst, damit die Daten richtig angezeigt und synchronisiert werden.

1. Wenn du es noch nicht getan hast, kopiere den Einbettungscode für dein Einbettungsformular. Du kannst auf den Einbettungscode des Formulars zugreifen, indem du das Formular im Editor öffnest und auf den Abschnitt " Targeting & behavior" klickst.
   
2. Navigiere zu deiner Website und suche das Standard-Anmeldeformular von BigCommerce. Wenn du ein Cornerstone-Theme verwendest, findest du sie in der Fußzeile der Website.
   
   • Wenn du kein Standardformular auf deiner Website siehst:
     • Öffne dein BigCommerce Dashboard.
     • Navigiere zu Marketing > E-Mail-Marketing
     • Setze ein Häkchen in das Kästchen " Newsletter-Abonnements zulassen". Damit kannst du die E-Mail-Zustimmung von Besuchern deiner Website einholen und ein Standard-E-Mail-Registrierungsfeld auf deiner Website BigCommerce einrichten. Wenn dieses Kästchen bereits angekreuzt ist und du immer noch kein Standardformular siehst, dann enthält dein Theme möglicherweise keins.
3. Öffne dein BigCommerce Dashboard und navigiere dann zu Storefront > Themes.
4. Klicke im Abschnitt Aktuelles Thema auf das Dropdown-Menü Erweitert und wähle dann Themendateien bearbeiten.
   
   • 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 dem Themenbereich hinzugefügt wurde, wählst du die 3 Punkte und dann die Option Themendateien bearbeiten. Beachte, dass alle Änderungen, die du vornimmst, nur für das Theme gelten, das du gerade bearbeitest, und dass du das Theme auf deine Website anwenden musst, damit die Änderungen angezeigt werden.
5. Öffne in der linken Seitenleiste die Datei, in der das Standardformular auf deiner Website erscheint. Wenn sich das Standardformular in der Fußzeile befindet, wie im Beispiel, navigiere zu Vorlage > components > common und klicke auf die Datei footer.html.
6. Verwende die Tastenkombination "Suchen" (Befehl+F auf Mac oder Strg+F auf Windows), um das Wort "Newsletter" in der Fußzeile zu suchen.
   
7. Im Code darunter findest du den Verweis auf das Formular. In diesem Beispiel wird das Formular in einem anderen Dateipfad referenziert: {{> components/common/subscription-form}}.
   
8. Folge in der linken Seitenleiste dem Dateipfad, auf den im Code verwiesen wird (in diesem Beispiel wähle Komponenten > common > subscription-form). Von hier aus siehst du die eigentlichen Komponenten des Standardformulars.
   • Da die Überschrift und die Sprache des Standardformulars mit den übrigen Stilen unserer Website übereinstimmen, werden wir nur die eigentliche Formulareingabe ersetzen. Im Quellcode kannst du sehen, dass die Eingabe des Standardformulars in dem Element <form> enthalten ist.
9. 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 markierten Text zu ersetzen. 
   
10. Klicke auf Speichern und Datei anwenden, um die Änderungen auf deine Website anzuwenden.
    • Wenn auf der Schaltfläche nur Datei speichern steht, dann ist die Datei, die du gerade bearbeitet hast, noch nicht dein aktuelles Thema. Du musst auf Datei speichern klicken, dann nach oben scrollen und oben rechts auf Theme-Dateien bearbeiten > Speichern > Als aktives Theme verwenden klicken, um das Theme auf deine Website anzuwenden. 

Sobald du den Einbettungscode eingefügt, gespeichert und die Änderungen in BigCommerce übernommen hast, navigierst du zurück zu deiner Website und aktualisierst die Seite. Dein Klaviyo Einbettungsformular wird auf deiner Website angezeigt und fügt neue Abonnenten in die Klaviyo Liste ein, die mit dem Formular verknüpft ist. 

Wenn du dein Formular nicht siehst, siehe Fehlerbehebung für eingebettete Formulare.

Nächste Schritte

Als Nächstes erstellst du eine Willkommens-Serie, um einen unmittelbaren Eindruck bei deinem neuen Abonnenten zu hinterlassen.

Zusätzliche Ressourcen

• Wie man einen E-Mail-Willkommensfluss erstellt
• So deaktivieren Sie die E-Mail-Benachrichtigung von BigCommerce