Il commercio headless separa il front end del tuo negozio (ciò che vedono i clienti) dal back end (elaborazione degli ordini, inventario). Se utilizzi un front end basato su ReactJS con Shopify, WooCommerce o BigCommerce, puoi collegare entrambi i livelli a Omnisend per sbloccare campagne email, flussi automatizzati e tracciamento dei clienti.
Non stai utilizzando una configurazione headless? Controlla:
Prima di iniziare
Audience target: Queste istruzioni sono per Shopify (ad es., Hydrogen), WooCommerce o BigCommerce negozi utilizzando ReactJS per il front end. Altre piattaforme o framework potrebbero richiedere adattamenti.
Piattaforma: Shopify, WooCommerce, BigCommerce.
Tecnologia front-end: ReactJS.
Vantaggi dell'e-commerce headless
Monitora i negozi personalizzati. Monitora il comportamento dei clienti nella tua interfaccia ReactJS, inclusi visualizzazioni di pagina, clic sui prodotti e aggiunte al carrello.
Utilizza i moduli di iscrizione di Omnisend. Incorpora moduli di opt-in per email/SMS ovunque nel tuo front end personalizzato.
Automatizza in base ai dati del negozio. Trigger Benvenuto, Carrello abbandonato, e Conferma d'ordine flussi di lavoro utilizzando eventi di ordine backend.
Prestazioni più veloci. Il tuo front end ReactJS leggero rimane veloce mentre Omnisend gestisce il flusso automatizzato e le campagne.
Processo di configurazione
Per integrare il tuo Negozio Shopify, WooCommerce o BigCommerce headless con Omnisend, segui questi due passaggi essenziali:
Passo 1: Collega il Backend del Tuo Negozio
Nel tuo account Omnisend, vai a Pannello di controllo → Collega il tuo negozio.
Seleziona la tua piattaforma (Shopify, WooCommerce o BigCommerce) e segui i passaggi di connessione. Scopri di più sui passaggi di connessione in base alla tua piattaforma e-commerce.
💡 Questo consente funzionalità pronte all'uso come campagne, flusso automatizzato per il Checkout abbandonato e conferme d'ordine. Trova ulteriori dettagli qui sotto.
Passo 2: Collega il tuo frontend tramite l'API di Omnisend
Segui questi passaggi per attivare il tracciamento, i moduli e il flusso automatizzato basato sul carrello nel tuo front end ReactJS.
Aggiungi il frammento JavaScript di Omnisend: Copia e incolla il frammento JS di Omnisend nel tuo sito
tag. Questo consente l'esecuzione automatica dei Moduli di Registrazione, del Flusso automatizzato di Benvenuto e dei flussi di lavoro Di nuovo disponibile.Ottieni il frammento: Documentazione del frammento JS di Omnisend
Monitora gli eventi di pagina visualizzata e prodotto visualizzato: Aggiungi i trigger degli eventi al codice del tuo negozio per inviare dati di visualizzazione della pagina e del prodotto a Omnisend. Questo consente il flusso automatizzato per l'Abbandono della navigazione e l'Abbandono del Prodotto.
Esempio di codice: Documentazione sul tracciamento degli eventi
Monitora gli eventi di Prodotto aggiunto al Carrello: Invia eventi "Prodotto aggiunto al Carrello" ogni volta che un cliente aggiunge un articolo. Questo alimenta il Flusso automatizzato per Carrello abbandonato.
Struttura del payload dell'evento: Documentazione Prodotto Aggiunto al Carrello
Codice di esempio:
omnisend.push(["track", "added product to cart", { "abandonedCheckoutURL": "...", ... }])Cosa funziona subito (solo backend)
Una volta che colleghi il backend del tuo negozio in Passo 1, queste funzionalità funzionano automaticamente:
Flusso automatizzato di benvenuto – Saluta i nuovi iscritti dai moduli Shopify nativi.
Campagne Email – Invia newsletter alla tua lista di contatti.
Sincronizzazione annunci – Crea pubblici simili su Meta o Google.
Flusso automatizzato di Checkout abbandonato – Recupera i checkout iniziati nel checkout nativo del tuo negozio.
Email di Conferma Ordine e Spedizione – Invia automaticamente email transazionali dopo gli acquisti.
Flusso automatizzato di recensioni e feedback del prodotto – Chiedi ai clienti di recensire gli acquisti recenti.
Flussi di lavoro di Cross-Sell e Riattivazione – Suggerisci prodotti correlati o riattiva clienti inattivi.
Cosa richiede la configurazione del frontend (API)
Queste funzionalità necessitano di Passo 2 (integrazione API) per funzionare:
Moduli di iscrizione di Omnisend – Mostra pop-up, moduli incorporati o pagine di destinazione sul tuo sito ReactJS.
Benvenuto Flusso automatizzato (da Omnisend Forms) – Attiva i flussi di lavoro quando i visitatori inviano i tuoi moduli personalizzati.
Flusso automatizzato Carrello abbandonato – Monitora le aggiunte al carrello sul tuo frontend (non solo checkout).
Prodotto & Abbandono della navigazione – Ri-engaggia i visitatori che visualizzano prodotti o navigano tra le pagine.
Flusso automatizzato Di nuovo disponibile – Notifica i clienti quando gli articoli esauriti tornano disponibili.
Tracciamento delle sessioni del Cliente – Monitora le visualizzazioni di pagina e i clic sui prodotti.
Prossimi passi
Ora che il tuo negozio headless è connesso, imposta i tuoi primi flussi automatizzati:
Flusso automatizzato di benvenuto – Saluta i nuovi iscritti.
Flusso automatizzato Carrello abbandonato – Recupera le vendite perse.
Flusso automatizzato di Checkout abbandonato – Segui gli ordini incompleti.
Abbandono del Prodotto – Ri-engaggia i visitatori che hanno visualizzato i prodotti.
Abbandono della navigazione – Riporta i visitatori che navigano.
💡 Hai bisogno di risorse per sviluppatori? Leggi la documentazione completa dell'API di Omnisend
Domande frequenti
Devo aggiungere il frammento JavaScript se ho già collegato il mio Negozio Shopify, WooCommerce o BigCommerce?
Sì per configurazioni headless. Quando colleghi il backend del tuo negozio, Omnisend sincronizza automaticamente ordini, clienti e prodotti. Ma per il tracciamento frontend (prodotto visualizzato, aggiunto al carrello, abbandono della navigazione), devi aggiungere il frammento JavaScript al tuo frontend ReactJS personalizzato.
Qual è la differenza tra il tracciamento frontend e l'integrazione backend?
Tracciamento frontend (frammento JavaScript): Traccia il comportamento di navigazione (
pagina visualizzata,prodotto visualizzato), visualizza i moduli di registrazione e abilita l'Abbandono della navigazione. Fanon sincronizzare prodotti, ordini o dati del carrello.Integrazione backend (connessione negozio): Sincronizza prodotti, clienti, ordini e invia eventi di checkout necessari per il Flusso automatizzato di Checkout abbandonato, Conferma d'ordine e reporting dei ricavi.
I negozi headless hanno bisogno di entrambi per sbloccare la piena funzionalità di Omnisend.
Come posso verificare che Omnisend stia ricevendo i miei eventi personalizzati?
Vai a Impostazioni Negozio → API → Log API nel tuo account Omnisend. Vedrai eventi in arrivo con timestamp, nomi degli eventi, ID contatto e eventuali messaggi di errore.
Se hai domande, non esitare a contattare il nostro team di supporto tramite chat in-app o [email protected].