Headless Commerce trennt die Benutzeroberfläche Ihres Shops (was Kunden sehen) vom Backend (Bestellverarbeitung, Inventar). Wenn Sie ein ReactJS-basiertes Frontend mit Shopify, WooCommerce oder BigCommerce verwenden, können Sie beide Ebenen mit Omnisend verbinden, um E-Mail-Kampagnen, Automatisierungs-Workflows und die Verfolgung von Kunden freizuschalten.
Keine headless Einrichtung verwenden? Überprüfen:
Bevor Sie beginnen
Die Zielgruppe: Diese Anweisungen sind für Shopify (z.B. Hydrogen), WooCommerce oder BigCommerce Shops verwenden ReactJS für das Frontend. Andere Plattformen oder Frameworks erfordern möglicherweise Anpassungen.
Plattform: Shopify, WooCommerce, BigCommerce.
Frontend-Technologie: ReactJS.
Vorteile von Headless E-Commerce
Benutzerdefinierte Verkaufsstellen verfolgen. Überwachen Sie das Verhalten der Kunden in Ihrer ReactJS-Benutzeroberfläche, einschließlich Seitenaufrufen, Produktklicks und Hinzufügungen zum Warenkorb.
Verwenden Sie Omnisend-Anmeldeformulare. Betten Sie E-Mail/SMS-Opt-in-Formulare überall in Ihrem benutzerdefinierten Frontend ein.
Automatisieren Sie basierend auf den Daten des Webshops. Der Trigger Willkommen, Der Warenkorbabbruch, und Die Bestellbestätigung Workflows unter Verwendung von Backend-Bestellereignissen.
Schnellere Leistung. Ihr leichtgewichtiger ReactJS-Frontend bleibt schnell, während Omnisend die Backend-Automatisierung und Kampagnen übernimmt.
Einrichtungsprozess
Um Ihren Shopify-, WooCommerce- oder BigCommerce-Headless-Webshop mit Omnisend zu integrieren, folgen Sie diesen zwei wesentlichen Schritten:
Schritt 1: Verbinden Sie Ihr Webshop-Backend
Gehe in deinem Omnisend Konto zu Das Dashboard → Verbinde deinen Webshop.
Wählen Sie Ihre Plattform (Shopify, WooCommerce oder BigCommerce) und folgen Sie den Verbindungsschritten. Erfahren Sie mehr über die Verbindungsschritte basierend auf Ihrer E-Commerce-Plattform.
💡 Dies ermöglicht sofort einsatzbereite Funktionen wie Kampagnen, die Automatisierung des Kassenabbruchs und Bestellbestätigungen. Weitere Details finden Sie unten.
Schritt 2: Verbinden Sie Ihr Frontend über die Omnisend API
Befolgen Sie diese Schritte, um das Tracking, Formulare und die automatisierung auf Basis des Warenkorbs in Ihrem ReactJS-Frontend zu aktivieren.
Fügen Sie den Omnisend JavaScript-Snippet hinzu: Kopieren und fügen Sie den Omnisend JS-Snippet in Ihre Seite ein.
Die Markierung. Dies ermöglicht, dass Anmeldeformulare, Willkommensautomatisierung und Wieder verfügbar-Workflows automatisch ausgeführt werden.Erhalten Sie den Snippet: Omnisend JS Snippet Dokumentation
Verfolgen Sie angezeigte Seiten- und Produktereignisse: Fügen Sie Ereignisauslöser zu Ihrem Shop-Code hinzu, um Seitenansichts- und Produktansichtsdaten an Omnisend zu senden. Dies ermöglicht die Automatisierung für den Browsingabbruch und den Produktabbruch.
Codebeispiel: Ereignisverfolgungsdokumentation
Verfolgen Sie hinzugefügte Produkte im Warenkorb: Senden Sie "Produkt zum Warenkorb hinzugefügt"-Ereignisse, wann immer ein Kunde einen Artikel hinzufügt. Dies unterstützt die Automatisierung des Warenkorbabbruchs.
Ereignis-Payload-Struktur: Dokumentation zum Hinzufügen von Produkten zum Warenkorb
Beispielcode:
omnisend.push(["track", "added product to cart", { "abandonedCheckoutURL": "...", ... }])Was sofort funktioniert (nur Backend)
Sobald Sie Ihr Webshop-Backend in Schritt 1, verbinden, funktionieren diese Funktionen automatisch:
Willkommen bei der Automatisierung – Begrüßen Sie neue Abonnenten von nativen Shopify-Formularen.
E-Mail-Kampagnen – Senden Sie Newsletter an Ihre Kontaktliste.
Ads Sync – Erstellen Sie Lookalike-Zielgruppen auf Meta oder Google.
Der Kassenabbruch Die Automatisierung – Wiederherstellung von Kassenabbrüchen, die an Ihrem nativen Checkout gestartet wurden.
Bestell- & Versandbestätigungs-E-Mails – Automatisch transaktionale E-Mails nach Käufen senden.
Produktbewertung & Feedback-Automatisierung – Bitten Sie die Kunden, kürzlich getätigte Käufe zu bewerten.
Cross-Sell & Reaktivierungs-Workflows – Schlagen Sie verwandte Produkte vor oder reaktivieren Sie inaktive Kunden.
Was erfordert die Frontend-Einrichtung (API)
Diese Funktionen benötigen Schritt 2 (Die Integration der API), um zu funktionieren:
Omnisend-Anmeldeformulare – Zeigen Sie Pop-ups, eingebettete Formulare oder Landing Pages auf Ihrer ReactJS-Seite an.
Willkommensautomatisierung (von Omnisend-Formularen) – Der Trigger-Workflows, wenn Besucher Ihre benutzerdefinierten Formulare absenden.
Automatisierung des Warenkorbabbruchs – Verfolgen Sie Warenkorb-Hinzufügungen auf Ihrem Frontend (nicht nur beim Checkout).
Das Produkt & Der Browsingabbruch – Wiederengagieren von Besuchern, die Produkte ansehen oder Seiten durchsuchen.
Wieder verfügbar Automatisierung – Benachrichtigen Sie Kunden, wenn nicht vorrätige Artikel zurückkehren.
Der Kunde Sitzungsverfolgung – Seitenaufrufe und Produktklicks überwachen.
Nächste Schritte
Jetzt, da Ihr headless Der Webshop verbunden ist, richten Sie Ihre ersten Automatisierungs-Workflows ein:
Willkommensautomatisierung – Begrüßen Sie neue Abonnenten.
Die Automatisierung des Warenkorbabbruchs – Verlorene Verkäufe wiederherstellen.
Der Kassenabbruch Die Automatisierung – Nachverfolgung von unvollständigen Bestellungen.
Das Produkt – Besucher erneut ansprechen, die Produkte angesehen haben.
Der Browsingabbruch – Bringen Sie die Besucher zurück, die gestöbert haben.
💡 Benötigen Sie Entwicklerressourcen? Lesen Sie die vollständige Omnisend API-Dokumentation
Häufig gestellte Fragen
Muss ich den JavaScript-Snippet hinzufügen, wenn ich meinen Shopify-, WooCommerce- oder BigCommerce-Webshop bereits verbunden habe?
Ja für headless Setups. Wenn Sie Ihr Webshop-Backend verbinden, synchronisiert Omnisend automatisch Bestellungen, Kunden und Produkte. Aber für das Frontend-Tracking (angesehenes Produkt, zum Warenkorb hinzugefügt, Browsingabbruch) müssen Sie den JavaScript-Snippet zu Ihrem benutzerdefinierten ReactJS-Frontend hinzufügen.
Was ist der Unterschied zwischen Frontend-Tracking und Backend-Integration?
Frontend-Tracking (JavaScript-Snippet): Verfolgt das Browsing-Verhalten (
Seite angesehen,Produkt angesehen), zeigt Anmeldeformulare an und ermöglicht den Browsingabbruch. Machtnicht Produkte, Bestellungen oder Warenkorbdaten synchronisieren.Backend-Integration (Webshop-Verbindung): Synchronisiert Produkte, Kunden, Bestellungen und sendet Checkout-Ereignisse, die für die Automatisierung des Kassenabbruchs, die Bestellbestätigung und die Umsatzberichterstattung benötigt werden.
Headless-Stores benötigen beides, um die volle Omnisend-Funktionalität freizuschalten.
Wie kann ich überprüfen, ob Omnisend meine benutzerdefinierten Ereignisse empfängt?
Gehe zu Webshop-Einstellungen → API → API-Protokolle in deinem Omnisend Konto. Sie sehen eingehende Ereignisse mit Zeitstempeln, Ereignisnamen, Kontakt-IDs und etwaigen Fehlermeldungen.
Wenn Sie Fragen haben, können Sie sich gerne über den In-App-Chat oder [email protected] mit unserem Support-Team in Verbindung setzen.