Le commerce sans tête sépare l'interface de votre magasin (ce que voient les clients) du back-end (traitement des commandes, inventaire). Si vous utilisez un front end basé sur ReactJS avec Shopify, WooCommerce ou BigCommerce, vous pouvez connecter les deux couches à Omnisend pour débloquer des campagnes par email, des flux de travail d'automatisation et le suivi des clients.

Vous n'utilisez pas de configuration sans tête ? Vérifiez :

Avant de commencer

Audience cible : Ces instructions sont pour Magasins Shopify (par exemple, Hydrogen), WooCommerce ou BigCommerce utilisant ReactJS pour le front-end. D'autres plateformes ou frameworks peuvent nécessiter une adaptation.
Plateforme : Shopify, WooCommerce, BigCommerce.
Technologie front-end : ReactJS.

Avantages du commerce électronique sans tête

Suivez les vitrines personnalisées. Surveillez le comportement des clients sur votre interface utilisateur ReactJS, y compris les vues de page, les clics sur les produits et les ajouts au panier.
Utilisez les formulaires d'inscription Omnisend. Intégrez des formulaires d'opt-in par e-mail/SMS n'importe où dans votre front-end personnalisé.
Automatiser en fonction des données de la boutique. Déclencheur Bienvenue, Panier abandonné, et Confirmation de commande workflows utilisant des événements de commande backend.
Performance plus rapide. Votre interface frontale ReactJS légère reste rapide pendant qu'Omnisend gère l'automatisation et les campagnes en arrière-plan.

Processus de configuration

Pour intégrer votre boutique headless Shopify, WooCommerce ou BigCommerce avec Omnisend, suivez ces deux étapes essentielles :

Étape 1 : Connectez le Backend de Votre Boutique

Dans votre compte Omnisend, allez à Tableau de bord → Connectez votre boutique.

Sélectionnez votre plateforme (Shopify, WooCommerce ou BigCommerce) et suivez les étapes de connexion. En savoir plus sur les étapes de connexion en fonction de votre plateforme de commerce électronique.

🔁 Cela permet d'utiliser des fonctionnalités prêtes à l'emploi telles que des campagnes, l'automatisation des Paiements abandonnés et des confirmations de Commande. Trouvez plus de détails ci-dessous.

Étape 2 : Connectez votre frontend via l'API Omnisend

Suivez ces étapes pour activer le suivi, les formulaires et l'automatisation basée sur le panier sur votre interface ReactJS.

Ajoutez le snippet JavaScript d'Omnisend : Copiez et collez le snippet JS d'Omnisend dans votre site tag. Cela permet aux formulaires d'inscription, à l'automatisation de bienvenue et aux flux de travail de de nouveau en stock de s'exécuter automatiquement.
- Obtenez le snippet : Documentation du snippet JS d'Omnisend
Suivre les événements de page vue et de produit vu : Ajoutez des déclencheurs d'événements à votre code de boutique pour envoyer des données de vue de page et de vue de produit à Omnisend. Cela permet l'automatisation pour l'abandon de navigation et l'abandon de produit.
- Exemple de code : Documentation du suivi des événements
Suivre les événements de produit ajouté au panier : Envoyez des événements "Produit ajouté au panier" chaque fois qu'un client ajoute un article. Cela alimente l'automatisation des paniers abandonnés.
- Structure de la charge utile de l'événement : Documentation sur l'ajout de Produit au Panier

Exemple de code :

omnisend.push(["track", "added product to cart", { "abandonedCheckoutURL": "...", ... }])

Ce qui fonctionne dès la sortie de la boîte (Backend uniquement)

Une fois que vous avez connecté le backend de votre boutique dans l'Étape 1, ces fonctionnalités fonctionnent automatiquement :

Automatisation de bienvenue – Accueillez les nouveaux abonnés des formulaires Shopify natifs.
Campagnes Email – Envoyez des bulletins d'information à votre liste de contacts.
Synchronisation des annonces – Créez des audiences similaires sur Meta ou Google.
Automatisation du Paiement abandonné – Récupérez les paiements commencés à la caisse native de votre boutique.
Emails de Confirmation de Commande & d'Expédition – Envoi automatique d'emails transactionnels après les achats.
Automatisation des avis et retours sur les Produits – Demandez aux clients de donner leur avis sur leurs achats récents.
Flux de travail de vente croisée et de réactivation – Suggérez des produits connexes ou réengagez des clients inactifs.

Ce qui nécessite une configuration du frontend (API)

Ces fonctionnalités nécessitent Étape 2 (intégration API) pour fonctionner :

Formulaires d'inscription Omnisend – Affichez des pop-ups, des formulaires intégrés ou des pages d'atterrissage sur votre site ReactJS.
Automatisation de bienvenue (depuis les formulaires Omnisend) – Déclenchez des flux de travail lorsque les visiteurs soumettent vos formulaires personnalisés.
Automatisation du Panier abandonné – Suivez les ajouts au panier sur votre frontend (pas seulement au paiement).
Produit & Abandon de navigation – Rengager les visiteurs qui consultent des produits ou parcourent des pages.
Automatisation de de nouveau en stock – Informez les clients lorsque les articles en rupture de stock sont de retour.
Suivi de session Client (e) – Surveillez les vues de page et les clics sur le Produit.

Prochaines étapes

Maintenant que votre boutique sans tête est connectée, configurez vos premiers workflows d'automatisation :

Automatisation de bienvenue – Accueillez les nouveaux abonnés.
Automatisation du Panier abandonné – Récupérer les ventes perdues.
Automatisation du Paiement abandonné – Suivez les commandes incomplètes.
Abandon de Produit – Récupérez les visiteurs qui ont consulté des produits.
Abandon de navigation – Ramenez les visiteurs qui naviguent.

💡 Besoin de ressources pour développeurs ? Lisez la documentation complète de l'API Omnisend

Foire aux questions

Dois-je ajouter le snippet JavaScript si j'ai déjà connecté ma boutique Shopify, WooCommerce ou BigCommerce ?

Oui pour les configurations sans tête. Lorsque vous connectez le backend de votre boutique, Omnisend synchronise automatiquement les commandes, les clients et les produits. Mais pour le suivi frontend (produit vu, ajouté au panier, abandon de navigation), vous devez ajouter le snippet JavaScript à votre frontend ReactJS personnalisé.

Quelle est la différence entre le suivi frontend et l'intégration backend ?

Suivi frontal (snippet JavaScript) : Suit le comportement de navigation (page vue, produit consulté), affiche des formulaires d'inscription et permet l'abandon de navigation. Est-ce que ne pas synchroniser les produits, les commandes ou les données du panier.
Intégration backend (connexion de la boutique) : Synchronise les produits, les clients, les commandes et envoie les événements de paiement nécessaires à l'automatisation des paiements abandonnés, à la confirmation de commande et au reporting des revenus.

Les magasins sans tête ont-ils besoin des deux pour débloquer la fonctionnalité complète d'Omnisend.

Comment puis-je vérifier qu'Omnisend reçoit mes événements personnalisés ?

Allez dans Paramètres de la Boutique → API → Journaux de l'API dans votre compte Omnisend. Vous verrez les événements entrants avec des horodatages, des noms d'événements, des identifiants de contact et tout message d'erreur.

Si vous avez des questions, n'hésitez pas à contacter notre équipe de support via le chat intégré ou [email protected].

Configurer une Boutique Headless avec Omnisend