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. im Footer) einbettest, damit sich Besucher*innen deiner Website, die mehr über deine Marke erfahren möchten, ganz einfach registrieren können. Das Einbetten eines Anmeldeformulars im Footer deiner Website, das mit deinen anderen veröffentlichten Formularen verbunden ist, 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. Veröffentliche das Formular und kopiere dann den Code zum Einbetten.
3. Füge das Formular deiner Website hinzu, indem du die untenstehenden Anweisungen für deine Plattform befolgst.

Bevor du anfängst

Bevor du dein Anmeldeformular erstellst, stelle sicher, dass die Anmeldeformular-Funktionalität auf deiner Website aktiviert ist. Dadurch können Formulare, die in Klaviyo veröffentlicht wurden, auf deiner Website angezeigt und Daten mit Klaviyo synchronisiert werden.

Voraussetzungen für einzubettende Formulare:

• Onsite-Tracking (Klaviyo.js) auf deiner Website installiert, um die Anmeldeformular-Funktionalität zu ermöglichen.
• Den Einbettungscode des Formulars, platziert an der Stelle, an der es angezeigt werden soll, oder die Formular-ID, die zu einem App-Block Klaviyo Embedded Form auf Shopify hinzugefügt wurde.

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 Klaviyos Formular-Builder veröffentlicht werden.

Um das Kundenengagement genauer zu messen, werden ab dem 6. Dezember 2024 die Aufrufe für eingebettete Formulare neu berechnet. Aufrufe für eingebettete Formulare werden nur 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 das Formular teilweise in ihr Ansichtsfenster gelangt.

Einfügen eines Einbettungsformulars in deine Website

Wenn du ein Anmeldeformular verwendest, das von Shopify, BigCommerce oder WooCommerce bereitgestellt wird, überprüfe, ob deine Integrationen so konfiguriert sind, dass Abonnent*innen mit der Klaviyo-Liste synchronisiert werden, die du verwenden möchtest. Du musst dieses Formular nicht ersetzen, wenn es Abonnenten bereits an die richtige Liste sendet, du kannst jedoch ein Klaviyo-Einbettungsformular erstellen, um Abonnenten in einer anderen Liste zu erfassen.

Erstellen und Anpassen eines neuen Einbettungsformulars in Klaviyo

1. Wähle Anmeldeformulare in Klaviyos Navigation aus.
2. Wähle Formular erstellen. Wenn ein Kanal -Auswahlfeld angezeigt wird, gib einen Namen ein, wähle Web aus und klicke dann auf Erstellen, um die Formularbibliothek zu öffnen. In der Bibliothek kannst du entweder:
   • Passe eine vorgefertigte Vorlage aus der Formularbibliothek an. Öffne Formularstil und wähle Einbetten, um eingebettete Formularvorlagen anzuzeigen. Wähle die Vorlage aus, die du möchtest.
   • Beginne mit einem leeren Formular, indem du Leeres Formular erstellen auswählst.
3. Richte dein Formular in dem Panel ein, das sich öffnet:
   • Gib den Namen deines Formulars ein oder bestätige ihn.
   • Wähle die Abonnentenliste für jeden Kanal aus, den dein Formular erfasst.
   • Wenn du mit einem leeren Formular begonnen hast, wähle Einbetten als deinen Formulartyp aus.
     

4. Klicke für eine Vorlage auf Formular erstellen. Für ein leeres Formular 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.
   

1. Wenn du mit deinem Formular zufrieden bist, behebe alle blockierenden Warnmeldungen. Klicke auf Veröffentlichen oder planen, wähle Jetzt veröffentlichen aus und klicke dann auf Jetzt veröffentlichen. Das Formular ist in Klaviyo veröffentlicht, muss aber auch wie unten beschrieben zu deiner Website hinzugefügt werden, bevor Besucher*innen es sehen können.
2. Wenn das Dein Formular wurde veröffentlicht! Wenn das Fenster angezeigt wird, klicke auf Kopieren, um den Einbettungscode in deine Zwischenablage zu kopieren. Wenn dieses Fenster nicht angezeigt wird, kopiere den Code über den untenstehenden Pfad im Editor.
   

Um den Einbettungscode aus dem Editor zu kopieren, wähle Targeting & Verhalten > Anzeige. Kopiere den Codeausschnitt unter Einbettungscode.

Füge das Einbettungsformular zu deiner Website hinzu

Nachdem du dein Formular in Klaviyo veröffentlicht und den Einbettungscode kopiert hast, folge unten den Anweisungen deiner Plattform, um das Formular dort hinzuzufügen, wo es angezeigt werden soll (z. B. in einer Themadatei oder auf einer bestimmten Seite). Für den App-Block Klaviyo Embedded Form von Shopify verwende die Formular-ID aus dem Code anstelle des vollständigen Snippets.

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 Hinzufügen des Einbettungsformulars zu dieser Plattform zu erhalten.

Wenn deine Plattform hier nicht aufgeführt wird, sieh dir den Aufzählungspunkt „Andere Plattformen“ an.

• 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 den App-Block Klaviyo Embedded Form zu deiner Seitenvorlage hinzu und fügst dann die Formular-ID aus dem Einbettungscode ein. In <div class="klaviyo-form-ABC123"></div> ist die Formular-ID beispielsweise ABC123.
  • Gehe zu Einbettungscode zu deiner Shopify-Website hinzufügen.
• Square
  Füge für Square im Square Online-Website-Editor einen Abschnitt Einbettungscode hinzu und füge den Einbettungscode dort ein, wo das Formular angezeigt werden 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 ist oder du eine benutzerdefinierte Integrationen verwendest, die nicht nativ in Klaviyo integriert ist, musst du sicherstellen, dass 2 Code-Fragmente auf deiner Website 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).
      • Um den Einbettungscode eines Formulars zu kopieren, wähle im Formular-Editor Targeting & behavior > Display aus und kopiere dann das Snippet unter Einbettungscode.

Nächste Schritte

Sobald du dein Einbettungsformular in Klaviyo veröffentlicht, es gemäß den Anweisungen deiner Plattform zu deiner Website hinzugefügt und deine Änderungen gespeichert hast, gehe zu deiner Website und aktualisiere die Seite.

Das Einbettungsformular sollte an der Stelle auf deiner Website erscheinen, die du ausgewählt hast.

1. Sende das Formular mit Testkontaktdaten ab. Wenn es E-Mail-Adressen erfasst, verwende eine Adresse, die du für dieses Formular noch nicht verwendet hast.
2. Für das E-Mail-Double Opt-in bestätige dein Abonnement über die Bestätigungs-E-Mail. Nachdem du alle erforderlichen Bestätigungen abgeschlossen hast, überprüfe, dass du zur für das Formular ausgewählten Abonnent*innenliste hinzugefügt wurdest.

Fehlersuche bei eingebetteten Formularen

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

• Leere deinen Browser-Cache und lade dann die Seite neu.
• Vergewissere dich, dass deine Website ordnungsgemäß in Klaviyo integriert ist und dass deine Website auch live ist.
• Stelle sicher, dass du Anmeldeformulare auf deiner Website aktiviert hast (das ist das Gleiche wie die Aktivierung des Tracking auf der Website).
• Stelle sicher, dass du deine Website-Änderungen gespeichert hast, nachdem du den Einbettungscode des Formulars oder bei Shopify die Formular-ID hinzugefügt hast.
• Navigiere im Anmeldeformular-Editor von Klaviyo zum Abschnitt Targeting und Verhalten und überprüfe Folgendes:
  • Überprüfe im Abschnitt Anzeige, dass:
    • Der auf deiner Website eingefügte Einbettungscode stimmt mit dem von Klaviyo bereitgestellten Code überein, oder der Shopify-App-Block enthält die entsprechende Formular-ID.
    • die Geräteeinstellungen in Klaviyo dem Gerät entsprechen, das du zum Anzeigen des Formulars verwendest.
  • Vergewissere dich im Abschnitt Ziele, dass:
    • Du erfüllst die Zielgruppen -Einstellungen des Formulars
    • 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 entspricht einer beliebigen für das Formular konfigurierten Standortausrichtung
    • Für Shopify erfüllt dein Warenkorb alle für das Formular konfigurierten Anforderungen an den Warenkorbinhalt.
• Wenn das Formular neuen Besucher*innen angezeigt werden kann, führe den Test in einem neuen Inkognito-(privaten) Fenster erneut aus. Wenn das Formular auf bestehende Profile, Abonnent*innen oder Mitglieder einer Liste oder eines Segments beschränkt ist, verwende einen Browser, den Klaviyo als ein Profil erkennt, das diese Bedingungen erfüllt.
• Bestätige, dass nur ein Klaviyo-Konto mit deiner Website integriert ist. Weitere Informationen zu Integrationen findest du hier.

Andere mögliche Gründe, warum dein Formular nicht angezeigt wird

• Wenn du benutzerdefiniertes CSS auf deiner Website hast, kann es das Styling des Formulars überschreiben oder das Formular ausblenden. 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