Comment intégrer un formulaire d’inscription à votre page de confirmation de commande BigCommerce

Objectif de cet article

Découvrez comment intégrer un formulaire d’inscription sur votre page de confirmation BigCommerce afin de recueillir des informations supplémentaires auprès des clients après qu’ils ont terminé le processus de paiement. Ces clients récents s’intéressent déjà à votre marque, donc la confirmation constitue une excellente occasion de renforcer l’engagement avec eux.

Avant de commencer

Assurez-vous d’avoir intégré BigCommerce et d’avoir vérifié le paramètre Ajouter automatiquement le JavaScript sur site de Klaviyo (recommandé).

Créer votre formulaire

Vous pouvez créer un formulaire d’inscription et l’intégrer à votre page de confirmation afin de poser des questions pertinentes à vos clients après leur passage en caisse. Par exemple, vous pourriez poser des questions pour en savoir plus sur la fréquence à laquelle un client utilise vos produits, ou sur les nouveaux produits potentiels qu’il pourrait être intéressé à acheter.

Pour créer votre formulaire d’inscription :

1. Dans Klaviyo, accédez à Site web > Formulaires d’inscription, puis cliquez sur Créer un formulaire.
2. Si vous êtes invité à choisir un canal, nommez votre formulaire, sélectionnez Web, puis cliquez sur Créer.
3. Cliquez sur Créer un formulaire vierge. Dans le menu qui s’affiche, saisissez ou confirmez le nom de votre formulaire, puis sélectionnez une liste que les nouveaux abonnés pourront rejoindre.
4. Comme type de formulaire, sélectionnez Embed.
   

5. Cliquez sur Enregistrer et passer au design.
6. Dans l’éditeur de formulaires, personnalisez les paramètres suivants :
   • Modifier les styles: modifiez l’apparence de votre formulaire pour qu’elle corresponde à votre marque, par exemple les styles du formulaire ou du champ de saisie, ainsi que le type de police. Vous pouvez également modifier n’importe quel texte en cliquant dessus et en remplaçant la langue par défaut par la vôtre.
   • Ajouter des blocs: Vous pouvez ajouter ici du contenu à votre formulaire afin de recueillir des informations, comme une zone de texte pour une question ou un champ de date pour un anniversaire. Assurez-vous de définir une propriété de profil pour chaque champ que vous ajoutez, et de ne pas submerger les clients avec trop de questions.
   • Ciblage et comportement d’affichage : Dans Affichage, choisissez si le formulaire apparaît sur ordinateur, sur mobile, ou sur les deux. Dans Ciblage, définissez Audience sur Afficher à tous les membres de l’audience afin que les clients reconnus puissent également voir le formulaire. Ne pas afficher aux profils Klaviyo existants le masque pour les visiteurs que Klaviyo reconnaît, ce qui peut exclure les clients à qui vous souhaitez demander un retour.
7. Dans la barre de menu, sélectionnez Succès pour modifier la page qui s’affiche après qu’une personne a envoyé votre formulaire.
8. Lorsque vous êtes satisfait de la conception de votre formulaire, cliquez sur Publier ou programmer. Résolvez les alertes de formulaire bloquantes, puis sélectionnez Publier maintenant et cliquez sur Publier maintenant pour mettre le formulaire en ligne.
9. Ouvrez Targeting & display behavior > Display et copiez le code d’intégration. Vous utiliserez l’ID du formulaire de ce code dans le script d’installation ci-dessous.

Votre formulaire n’apparaîtra pas sur la page de confirmation de commande tant que vous n’aurez pas ajouté le script d’installation ci-dessous.

Vérifiez les paramètres d’adhésion de la liste à laquelle votre formulaire s’inscrit. Les listes peuvent utiliser un opt-in simple ou double opt-in. Si la liste utilise le double opt-in, personnalisez ses pages de confirmation, et n’oubliez pas que les nouveaux abonnés doivent confirmer leur abonnement avant de rejoindre la liste.

Ajoutez le code intégré à votre site BigCommerce

1. Accédez à la page d’administration de votre compte BigCommerce.
2. Accédez à Storefront > Script Manager et cliquez sur Créer un script.
3. Nommez le script et configurez-le comme suit :
   • Emplacement : en-tête
   • Description (facultatif) : décrivez l’objectif du script
   • Pages auxquelles le script sera ajouté : confirmation de commande
   • Type de script : Script
     

4. Supprimez le contenu du script, puis collez plutôt le code suivant pour ajouter klaviyo.js à votre page de confirmation. Notez que vous devez le faire même si vous avez déjà installé klaviyo.js sur votre site web :
   

  <script src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js" async=""></script>
  <script>
     document.addEventListener("DOMContentLoaded", function() {       var elem = document.createElement('div');
     elem.className = 'klaviyo-form-FORM_ID'
     document.body.appendChild(elem);
     });</script>

1. Dans l’extrait ci-dessus, remplacez PUBLIC_API_KEY par la clé d’API publique de votre site.
2. Dans l’extrait ci-dessus, remplacez FORM_ID par l’ID après klaviyo-form- dans le code d’intégration que vous avez copié depuis Klaviyo. Copiez uniquement l’ID, pas le code d’intégration entier.

3. Lorsque vous avez renseigné tous les détails du script, cliquez sur Enregistrer.

Votre formulaire intégré s’affichera désormais en bas de la page après qu’une personne a passé une commande. Selon votre thème, vous souhaiterez peut-être modifier la bordure, la marge intérieure ou la taille de votre formulaire dans la section Modifier les styles afin de vous assurer qu’il correspond à l’apparence de votre page de confirmation de commande ; publiez les modifications que vous apportez pour les voir se refléter.

Après avoir passé une commande test, vérifiez que le formulaire apparaît en bas de la page de confirmation de commande sur les appareils que vous avez sélectionnés. Envoyez une réponse test, puis confirmez que les réponses s’affichent sur le profil prévu dans Klaviyo. Si vous testez un nouvel abonnement à une liste en double opt-in, effectuez la confirmation avant de vérifier l’appartenance à la liste.

Prochaines étapes

Après avoir commencé à collecter des réponses avec votre formulaire intégré, chaque soumission sera stockée sur le profil du client en tant que propriété personnalisée, disponible pour une utilisation dans les segments, les flux et les modèles d’e-mail.

En fonction des réponses, vous pouvez créer des embranchements dans l’expérience post-achat. Vous pouvez également créer des embranchements dans votre série de bienvenue en fonction de ces données ou créer des segments pertinents pour envoyer des campagnes. Par exemple, imaginons que nous décidions de lancer un nouveau mascara. Comme nous collectons des données sur l’intérêt pour les produits sur ce formulaire intégré, nous pouvons informer toute personne nous ayant indiqué être intéressée par le mascara lors de la sortie du produit.

Ressources supplémentaires