So bettest du ein Anmeldeformular auf deiner Website ein

Übersicht

Erfahre, wie du ein Anmeldeformular auf einer bestimmten Seite oder an einer bestimmten Stelle deiner Website (z. B. in der Fußzeile) einbettest, damit sich Besucher*innen deiner Website, die mehr über deine Marke erfahren möchten, ganz einfach registrieren können. Das Einbetten eines Anmeldeformulars in die Fußzeile deiner Website, das mit deinen anderen veröffentlichten Formularen zusammenarbeitet, ist eine Klaviyo Best Practice zur Optimierung des Listenwachstums. 

Um ein Formular auf deiner Website einzubetten, musst du Folgendes tun:

1. Erstelle und passe ein neues Einbettungsformular in Klaviyo an.
2. Kopiere den Einbettungscode des Formulars aus dem modalen Fenster zur Veröffentlichung.
3. Füge den Einbettungscode in die Dateien deiner Website ein.

Bevor du anfängst

Bevor du dein Anmeldeformular erstellst, stelle sicher, dass die Anmeldeformular-Funktionalität in deinem Klaviyo-Konto aktiviert ist. Dadurch wird sichergestellt, dass die in Klaviyo veröffentlichten Formulare auf deiner Website richtig angezeigt und alle notwendigen Daten synchronisiert werden. 

Voraussetzungen für einzubettende Formulare:

• Aktiviere die Anmeldeformular-Funktionalität. Dies wird auch oft als „Onsite-Tracking“ bezeichnet.
• Füge den Einbettungscode auf deiner Website an der Position ein, an der du das Formular anzeigen möchtest.

Beachte, dass das Einfügen des Einbettungscodes nur bei Einbettungsformularen möglich ist. Pop-up-, Flyout- und Ganzseitenformulare erfordern kein Einfügen von Code und können direkt über den Klaviyo-Formular-Builder veröffentlicht werden.

Um das Kundenengagement genauer zu messen, werden ab dem 06. Dezember 2024 die Aufrufe für eingebettete Formulare neu berechnet. Aufrufe für eingebettete Formulare werden nun nur noch erfasst, wenn das Formular im Ansichtsfenster der Benutzer*innen sichtbar ist. Diese Änderung kann zu einer deutlichen Veränderung der Anzahl der Aufrufe und zu einem Anstieg der Übermittlungsraten führen, insbesondere bei Formularen, die in der Fußzeile einer Website eingebettet sind, da diese nur gezählt werden, wenn Besucher*innen so weit nach unten scrollen, dass sich das Formular teilweise im Ansichtsfenster befindet. 

Einfügen eines Einbettungsformulars in deine Website

Wenn du Shopify, BigCommerce oder WooCommerce verwendest, werden Abonnent*innen, die sich über das Einbettungsformular deiner Plattform registrieren, automatisch über die Integrationen zu deiner Klaviyo-Liste hinzugefügt. Aus diesem Grund musst du das Einbettungsformular aus deinen Integrationen nicht durch eines von Klaviyo ersetzen. Du kannst aber trotzdem eines in Klaviyo erstellen, wenn du möchtest, dass Abonnent*innen in einer anderen Liste erfasst werden. 

Erstellen und Anpassen eines neuen Einbettungsformulars in Klaviyo

1. Wähle die Registerkarte Anmeldeformulare im linken Navigationsbereich von Klaviyo aus.
2. Wähle Formular erstellen. Von hier aus hast du folgende Möglichkeiten:
   • Passe eine vorkonfigurierte Vorlage aus der Formularbibliothek an. Klicke auf das Drop-down neben Alle Typen und wähle dann Einbetten, um die Formularbibliothek so zu filtern, dass alle vorkonfigurierten Vorlagen angezeigt werden.
   • Beginne mit einer leeren Einbettungsvorlage, indem du in der oberen rechten Ecke Neues Formular erstellen wählst.
3. Im angezeigten Erstellungsfenster:
   • Benenne dein Formular. 
   • Wähle die Liste aus, zu der neue Abonnent*innen hinzugefügt werden sollen.
   • Bestätige Einbetten als deinen Formulartyp.
     
4. Klicke auf Speichern und gestalten.
5. Benutze den Editor, um dein Formular zu gestalten und füge alle gewünschten Blöcke oder Eingabefelder hinzu. Eine Anleitung zum Anpassen deines Formulars findest du unter Erste Schritte mit Anmeldeformularen.
   

   Wenn du dein Formular in die Fußzeile deiner Website einbetten möchtest, empfehlen wir dir, nur nach E-Mail-Adressen zu fragen, um die Anzahl der Opt-ins zu erhöhen.

6. Wenn du mit deinem Formular zufrieden bist, klicke auf Veröffentlichen. Beachte, dass das Formular noch nicht auf deiner Seite erscheint; du musst auch den Einbettungscode auf deiner Seite einfügen, damit es live ist.
7. Klicke im angezeigten modalen Fenster Erfolgreich veröffentlicht auf Kopieren, um den Einbettungscode in deine Zwischenablage zu kopieren. Das ist der Code, den du im nächsten Abschnitt dieses Artikels in deine Website-Dateien einfügen musst.
   

Beachte, dass der Einbettungscode eines Formulars auch auf der Registerkarte Targeting & Verhalten im Formulareditor zu finden ist.

Einfügen des Einbettungscode auf deiner Website

Nachdem du dein Formular in Klaviyo veröffentlicht und den Einbettungscode kopiert hast, musst du diesen Code in die Dateien deiner Website einfügen, damit das Formular angezeigt wird. Die Position, an der du den Code einfügst, hängt davon ab, wo das Formular angezeigt werden soll (z. B. in einer Themadatei oder einer bestimmten Seitendatei), und kann je nach Integrationen variieren. 

Suche die Plattform, die du verwendest, in der Liste unten und navigiere dann zu dem Artikel, der darunter verlinkt ist, um eine genauere Anleitung zum Einfügen des Einbettungscodes für diese Integrationen zu erhalten. 

Wenn deine Plattform hier nicht aufgeführt wird, navigiere zu dem Punkt „Andere Plattformen“.

• BigCommerce
  Für BigCommerce fügst du den Einbettungscode in die Dateien deiner Website an der Stelle ein, an der er angezeigt werden soll. 
  • Gehe zu Einbettungscode zu deiner BigCommerce-Website hinzufügen.
• Shopify
  Für Shopify fügst du die Klaviyo Embedded Form App zu deiner Seitenvorlage hinzu und fügst den Einbettungscode des Formulars ein.
  • Gehe zu Einbettungscode zu deiner Shopify-Website hinzufügen.
• Square
  Für Square fügst du den Einbettungscode an der Stelle in die Dateien deiner Website ein, an der er erscheinen soll.
  • Gehe zu Einbettungscode zu deiner Square-Website hinzufügen.
• WooCommerce
  Für WooCommerce fügst du den Einbettungscode in den HTML-Code deiner Website ein. 
  • Gehe zu Einbettungscode in die Fußzeile deiner WooCommerce-Website hinzufügen.
• Andere Plattformen
  Wenn deine Plattform oben nicht aufgeführt wird oder du eine benutzerdefinierte Integration verwendest, die nicht nativ in Klaviyo integriert ist, musst du sicherstellen, dass 2 Code-Fragmente auf deiner Seite eingefügt werden, damit das Einbettungsformular funktioniert: 
   
  • Onsite-Tracking (auch bekannt als Klaviyo.js) zur Aktivierung der Anmeldeformular-Funktionalität 
    • Beachte, dass viele Plattformen das Onsite-Tracking automatisch zu deiner Website hinzufügen, wenn du sie integrierst (z. B. Wix, PrestaShop, Magento 1 und 2 etc.). Überprüfe die Integrationseinstellungen deiner Plattform in Klaviyo, um sicherzustellen, dass diese Option aktiviert ist.
      • Wenn deine Plattform nicht über eine native Klaviyo-Integration verfügt, musst du das Onsite-Tracking manuell hinzufügen.
  • Der Einbettungscode des jeweiligen Formulars 
    • Sobald das Onsite-Tracking aktiviert ist, musst du den Einbettungscode deines Formulars in den HTML-/Quellcode deiner Website an der Position einfügen, an der er angezeigt soll (z. B. in der Fußzeile). 
      • Der Einbettungscode eines Formulars kann von der Registerkarte Targeting & Verhalten im Formulareditor kopiert werden.

Nächste Schritte

Sobald du dein Einbettungsformular in Klaviyo veröffentlicht, den Einbettungscode auf deiner Website eingefügt und deine Änderungen gespeichert hast, kannst du die Seite aktualisieren.

Das Einbettungsformular sollte an der Position auf deiner Seite angezeigt werden, wo du den Einbettungscode eingefügt hast. 

Fehlersuche bei eingebetteten Formularen

Wenn dein Einbettungsformular live in Klaviyo ist, aber nicht auf deiner Website angezeigt wird, befolge die folgenden Tipps zur Fehlerbehebung:

• Aktualisiere deinen Browser-Cache.
• Vergewissere dich, dass deine Website ordnungsgemäß in Klaviyo integriert ist und dass deine Website auch live ist.
• Stelle sicher, dass du Anmeldeformulare für dein Konto aktiviert hast (das ist das Gleiche wie die Aktivierung des Onsite-Trackings).
• Vergewissere dich, dass du die Änderungen auf deiner Website gespeichert hast, nachdem du den Einbettungscode eingefügt hast.
• Navigiere im Anmeldeformular-Editor von Klaviyo zum Abschnitt Targeting & Verhalten und überprüfe Folgendes:
  • Überprüfe im Abschnitt Anzeige, dass: 
    • der auf deiner Website eingefügte Einbettungscode mit dem von Klaviyo bereitgestellten Code übereinstimmt und
    • die Geräteeinstellungen in Klaviyo dem Gerät entsprechen, das du zum Anzeigen des Formulars verwendest.
  • Vergewissere dich im Abschnitt Ziele, dass:
    • allen einschränkenden Besuchereinstellungen entsprochen wird,
    • das Formular so eingestellt ist, dass es auf der URL angezeigt wird, die du gerade anzeigst, und alle angegebenen UTM-Parameter enthält,
    • dein Standort zu jeder für das Formular eingestellten Geolokalisierung passt und
    • dein Warenkorb alle für das Formular konfigurierten Anforderungen an den Warenkorbinhalt erfüllt.
• Führe den Test in einem neuen, inkognito (privaten) Browserfenster erneut durch.
• Bestätige, dass nur ein Klaviyo-Konto mit deiner Website integriert ist. Weitere Informationen zu Integrationen findest du hier.

Andere mögliche Gründe für ein nicht angezeigtes Formular

• Wenn du benutzerdefiniertes CSS auf deiner Website verwendest, kann dies zu Konflikten mit dem Onsite-Tracking-Snippet von Klaviyo ("Klaviyo.js") führen und dein Formular beeinträchtigen. Bitte dein Entwicklerteam, die Entwicklertools deines Browsers zu verwenden, um den Code der Website zu untersuchen und das Problem zu identifizieren oder kontaktiere den Support.
• Wenn du eine SPA-Website (Single Page Application) verwendest, kann es sein, dass dein Setup dazu führt, dass das Formular nur sporadisch angezeigt wird. Wende dich an dein Entwicklerteam, wenn du Hilfe brauchst.

Weitere Ressourcen

• So kontaktierst du den Support
• Fehlerbehebung bei deinen Anmeldeformularen
• Erste Schritte mit Anmeldeformularen