Dans cette leçon, vous apprendrez et implémenterez le workflow pour afficher un inline de recommandation sur les fiches produit afin d’augmenter la rétention et les ventes.
Recommander des produits personnalisés lors de la navigation du contact dans votre e-commerce contribuera à augmenter les possibilités d’achat et la valeur des commandes. Avec Connectif, vous pouvez facilement ajouter un inline de recommandation créé avec le contenu web type inline.
Objectif : Rétention et conversion.
Eléments utilisés : Inline
Durée de mise en œuvre : 2 heures.
Nous vous recommandons de suivre toutes les étapes et de mettre en œuvre cette stratégie à partir de zéro dans votre compte. Si vous avez besoin d’une solution rapide, dans le répertoire des modèles de workflows, vous disposez du modèle de Recommandation dans fiche produit, avec lequel vous pouvez travailler.
Résumé de la leçon
Dans cette leçon, vous apprendrez :
- Le nœud " Lors de la visite d’un produit " pour détecter les visites des contacts à une fiche produit.
- Le nœud " Obtenir des produits "pour obtenir les produits qui seront affichés plus tard dans un certain type de contenu.
A la fin de la leçon, vous aurez créé dans votre compte :
La stratégie qui contient ce workflow et qui vous permettra d’afficher un banner après la fiche produit lorsqu’un contact visite ledit produit. Selon le nombre de produits recommandés renvoyés par l’algorithme, vous afficherez un banner statique ou en carrousel.
Configuration de la stratégie
ÉTAPE 0. Création du workflow
Comment créer le workflow pour cette stratégie
1. Dans votre compte Connectif, cliquez sur " Workflows > Créer nouveau Workflow " puis sur Créer un workflow vierge.
2. Cliquez sur (Édition) et donnez-lui le nom " Recommandation dans fiche de produit ".
3. Cliquez sur Appliquer pour enregistrer le nouveau nom de votre workflow.
ÉTAPE 1. Nœud " Démarrage "
Comment configurer le nœud " Démarrage " pour cette stratégie
(Ce nœud déterminera l’audience cible du workflow).
4. Cliquez sur (Modifier configuration de nœud) du nœud " Démarrage ".
5. Dans Sélectionnez une restriction, cochez " Toute ma liste " et sélectionnez l’option " Toute ma liste " dans le menu déroulant.
6. Dans Sélectionnez la source de données, cochez " Toutes celles qui existent et les nouvelles ".
7. Cliquez sur Mettre à jour.
Dans cette étape, nous avons indiqué à Connectif que le workflow doit être activé pour tous les contacts qui visitent le site web, qu’ils soient nouveaux ou existants.
ÉTAPE 2. Nœud " Lors de la visite d’un produit "
Fonctionnement du nœud " Lors de la visite d’un produit "
Ce nœud est utilisé pour réagir au moment où un contact visite une page de produit.
L’interface du nœud permet de configurer les caractéristiques spécifiques des produits qui le déclencheront.
Comment configurer le nœud " Lors de la visite d’un produit " pour cette stratégie
(Ce nœud entraînera l’activation de l’action suivante dans le workflow, à savoir envoyer l’inline d’abonnement aux notifications push, lorsqu’un contact visite votre site web).
8. Dans le menu de sélection de nœuds, accédez à " Déclencheurs > Web " et faites glisser le nœud " Lors de la visite d’un produit " dans l’éditeur, afin qu’il se connecte au nœud " Démarrage ".
9. Cliquez sur (Modifier configuration de nœud) du nœud " Lors de la visite d’un produit ".
10. Cliquez sur Limitations et décochez la case " Désactiver après déclenchement ".
11. Cliquez sur Mettre à jour.
Dans cette étape, nous avons demandé à Connectif de passer à l’action suivante au moment où un contact visite une page de produit depuis n’importe quel dispositif.
ÉTAPE 3. Premier nœud " Obtenir des produits "
Comment fonctionne le nœud " Obtenir des produits "
Ce nœud est l’un des plus utiles de toute la plate-forme. Il est utilisé pour obtenir les produits qui seront affichés plus tard dans un certain type de contenu. C’est dans ce nœud que sont configurés, sur différents écrans, les produits et la manière de les obtenir :
- Sélectionnez les cas d’utilisation. Pour choisir des groupes de produits que le nœud obtiendra. Il est possible d’en sélectionner jusqu’à 2, le premier ayant la priorité.
- Configuration des cas d’utilisation. Pour établir, dans chaque cas, les produits à obtenir, leur origine, les conditions ou filtres auxquels ils doivent répondre et l’ordre dans lequel nous voulons qu’ils soient affichés.
- Résumé. Pour définir le nombre total de produits à obtenir dans le nœud, la limitation du nombre total de produits à retourner le cas échéant, et si vous souhaitez exclure les produits obtenus dans les nœuds précédents.
Comment configurer le nœud " Obtenir des produits " pour cette stratégie
(Ce nœud obtiendra automatiquement les produits liés au produit visité, de la même catégorie et de la même marque).
12. Dans le menu de sélection de nœuds, accédez à " Actions > E-commerce " et faites glisser le nœud " Obtenir des produits " dans l’éditeur, afin qu’il se connecte au nœud " Lors de la visite d’un produit ".
13. Cliquez sur (Modifier configuration de nœud) du nœud " Obtenir des produits ".
14. Pour sélectionner les cas d’utilisation, faites glisser Automatiquement liés à un produit vers le bloc de droite et cliquez sur Suivant . Cela permet d’obtenir les produits qui sont automatiquement liés à celui qui est visité par le contact.
15. Dans Configuration du cas principal, indiquez " 12 " dans Quantité de produits à obtenir, afin que Connectif obtienne jusqu’à 12 articles liés à celui visité.
16. Dans Sélectionnez la source du produit, sélectionnez Tous les produits pour que Connectif effectue une recherche dans l’ensemble de votre catalogue.
17. Dans Sélectionner le produit associé, sélectionnez " Produit (Lors de la visite d’un produit) ", afin que les données que Connectif importe proviennent de la page visitée par le contact.
18. Dans Configurez les conditions de définition d’un ensemble spécifique de produits :
- Cliquez sur Ajouter autre condition et sélectionnez " Catégories " dans le menu déroulant. A droite, sélectionnez " Données importées " et, après avoir cliqué sur " Sélectionnez une donnée importée ", choisissez " Lors de la visite d’un produit > Catégories ". De cette façon, Connectif obtiendra des produits appartenant à la même catégorie que le produit visité.
19. Dans Sélectionnez un ordre, choisissez " Trier par évaluation décroissante " et cochez la case " Réorganisez aléatoirement les produits obtenus ". Ainsi, Connectif choisira d’afficher en premier les produits les mieux notés selon leur évaluation, mais la présentation finale sera aléatoire.
20. Cliquez sur Suivant .
21. Dans l’onglet Résumé, localisez la section Quantité de produits à obtenir et définissez " 12 " en tant que nombre maximum de produits à afficher.
22. Décochez la case " Remplir les produits jusqu’à la limite sélectionnée ".
23. Cochez la case " Exclure les produits exportés par des nœuds précédents " pour éviter que des produits soient affichés en double.
24. Cliquez sur Terminer .
Dans cette étape, nous avons demandé à Connectif d’obtenir des produits automatiquement associés à celui que le contact a visité, pour les afficher sur le banner. Avec la configuration du nœud, jusqu’à 12 produits de la même marque et/ou catégorie seront sélectionnés selon leurs évaluations et affichés. S’il n’existe pas 12 produits remplissant ces conditions, seuls les produits qui coïncident seront affichés.
ÉTAPE 4. Noeud " Vérifier valeur "
Comment configurer le nœud " Vérifier valeur " pour cette stratégie
(Ce nœud vérifie si la taille de la liste obtenue avec produits recommandés est supérieure à 4).
25. Dans le menu de sélection de nœuds, allez dans" Conditions > Système "et faites glisser le nœud" Vérifier valeur " dans l’éditeur afin qu’il se connecte au nœud " Obtenir des produits ".
26. Cliquez sur (Modifier configuration de nœud) du nœud " Vérifier valeur ".
27. Faites glisser le champ " Taille de la liste " de " Obtenir des produits " vers le bloc de gauche.
28. Dans la colonne " Opérateur " sélectionnez " Est supérieur à ".
29. Faites glisser le champ Littéral vers le bloc de droite et définissez la valeur " 4 ".
30. Cliquez sur Mettre à jour.
Dans cette étape, nous avons demandé à Connectif de vérifier si, dans le nœud " Obtenir des produits ", plus de 4 produits associés à l’article visité ont été obtenus, pour continuer dans le flux affichant les produits obtenus. Si le nombre de produits obtenus n’est pas supérieur à 4, le processus se poursuivra dans une autre branche pour obtenir plus de produits, via un deuxième nœud " Obtenir des produits ".
ÉTAPE 5. Troisième nœud " Envoyer contenu web "
Comment créer l’inline pour cette stratégie
(Dans cette étape, vous allez créer l’inline qui contiendra les produits associés, qui sera celui que le nœud affichera lorsque le contact visitera la page du produit).
31. Dans le menu de sélection de nœuds, allez dans " Actions > Web " et faites glisser le nœud " Envoyer contenu web " dans l’éditeur afin qu’il se connecte au nœud " Vérifier valeur ".
32. Au niveau de l’union de ce nœud avec le précédent, cliquez sur le cercle jusqu’à ce que " Oui " apparaisse. De cette façon, vous indiquerez à Connectif que l’inline doit être affiché si plus de 4 différents produits associés apparaissent.
33. Cliquez sur (Modifier configuration de nœud) du nœud " Envoyer contenu web " et Créer nouveau contenu pour générer un nouveau contenu.
34. Lors de la création d’un nouveau contenu, sélectionnez Inline comme type, donnez-lui un nom et cliquez sur Créer contenu web.
35. Dans le panneau Outils, cliquez sur l’onglet Général pour modifier les paramètres de l’aspect général de votre inline. Vous pouvez également y accéder en cliquant sur Propriétés générales dans le panneau de création.
36. Cliquez sur l’onglet Composants pour accéder aux options de création et de conception de votre inline.
- Dans Disposition, choisissez la mise en page qui convient le mieux à vos besoins. Si elle n’est pas incluse, la structure à une colonne sera utilisée par défaut.
- Dans Éléments, ajoutez un champ " Texte " pour intégrer vous-même votre banner de recommandation et le modifier selon vos préférences.
- Dans Éléments, ajoutez un champ " Produits " pour afficher les produits recommandés. Cliquez sur le bouton (Éditer élément), attribuez-lui un nom, un type (dans ce cas, Carrousel) et un modèle (dans ce cas, Produit avec marque). Dans la structure, choisissez le nombre de produits affichés en même temps, à la fois sur ordinateur et sur portable, et un temps de rotation (si vous laissez 0 comme dans l’exemple, la rotation automatique sera désactivée).
37. Cliquez sur Enregistrer pour conserver vos modifications dans la création et sur Retourner au sélecteur pour revenir en arrière et terminer la configuration du nœud.
Comment configurer le nœud " Envoyer contenu web " pour cette stratégie
38. Sélectionnez le contenu Inline correspondant et cliquez sur Suivant .
39. Localisez le sélecteur approprié sur votre site web pour afficher le contenu. Vous pouvez suivre les étapes de cet exemple :
- Accédez à la page de votre site web où vous souhaitez ajouter le contenu incorporé.
- Affichez le bloc que vous souhaitez utiliser comme référence.
- Ouvrez la console développeur (DevTools) du navigateur.
- Sélectionnez l’onglet Éléments dans la console pour afficher la structure HTML.
- Cliquez sur l’icône Inspecter, la première à gauche dans le menu supérieur.
- Placez le curseur de votre souris sur la zone du contenu que vous prévoyez d’utiliser comme référence. Cliquez lorsque la sélection est appropriée afin que l’étiquette soit mise en valeur dans la console.
- Cliquez sur le contenu de l’onglet Éléments de la console et utilisez le raccourci clavier Contrôle + F pour rechercher le nom de l’étiquette ou de l’attribut. S’il n’y a qu’une seule coïncidence (comme dans cet exemple), il est approprié et vous pouvez l’utiliser. Dans ce cas, copiez le nom et fermez la console développeur. S’il y a plus d’une coïncidence, vous devrez localiser un autre sélecteur unique.
40. Une fois que vous avez localisé et copié le sélecteur, retournez à la configuration du nœud " Envoyer contenu web " dans Connectif, ajoutez-le dans Configuration pour afficher le contenu, puis cliquez sur Suivant . (Dans la capture d’écran nous continuons avec l’exemple précédent, vous devez indiquer le nom du sélecteur que vous avez choisi).
41. Associez les variables de produit du nœud " Obtenir des produits ", dans ce cas, les produits recommandés, pour personnaliser le banner avec les articles obtenus à partir de ce nœud et leurs informations. Pour cela, reliez les champs de Connectif (colonne de gauche) aux variables de votre e-mail (colonne de droite) :
- Faites glisser le champ Nom pour qu’il coïncide avec la variable {{name}}. De cette façon, cette variable inclura le nom du produit qui apparaît dans votre catalogue.
- Faites glisser le champ URL de détail pour qu’il coïncide avec la variable {{buttonUrl}} De cette façon, cette variable inclura l’adresse de la fiche produit qui apparaît dans votre catalogue.
- Faites glisser le champ URL d’image pour qu’il coïncide avec la variable {{imageURL}}. De cette façon, l’image du produit sera incluse dans cette variable.
- Faites glisser le champ Prix unitaire pour qu’il coïncide avec la variable {{unitPrice}}. De cette façon, cette variable inclura le prix unitaire actuel de ce produit.
- Faites glisser le champ Littéral pour qu’il coïncide avec la variable {{buttonText}} et introduisez à l’intérieur le texte que vous souhaitez voir sur le bouton. De cette façon, cette variable inclura le texte du bouton que vous avez défini.
42. Cliquez sur Terminer .
Dans cette étape, nous avons demandé à Connectif d’afficher l’inline avec le banner de recommandation de produits que nous venons de créer pour les visiteurs qui arrivent à cette partie du flux. Dans cette stratégie, nous n’avons pas ajouté de limitations à l’inline afin qu’il s’affiche chaque fois que les conditions sont remplies.
ÉTAPE 6. Deuxième nœud " Obtenir des produits "
Comment configurer le nœud " Obtenir des produits " pour cette stratégie
(Ce nœud obtiendra les produits les plus visités au cours du dernier mois, de la catégorie et de la marque du produit visité).
43. Dans le menu de sélection de nœuds, accédez à " Actions > E-commerce " et faites glisser le nœud " Obtenir des produits " dans l’éditeur, afin qu’il se connecte au nœud " Vérifier valeur ".
44. Au niveau de l’union de ce nœud avec le précédent, cliquez sur le cercle jusqu’à ce que " Non " apparaisse.
45. Cliquez sur (Modifier configuration de nœud) du nœud " Obtenir des produits ".
46. Pour sélectionner les cas d’utilisation, faites glisser " Produits les plus visités " vers le bloc de droite et " Produits les plus vendus " vers le cas d’utilisation supplémentaire. Cliquez sur Suivant . Cela permettra d’obtenir les produits les plus visités et s’ils ne sont pas suffisants, les résultats donneront les produits le plus vendus.
47. Dans Configuration du cas principal, complétez la configuration suivante :
- Indiquez " 12 "dans Quantité de produits à obtenir, afin que Connectif obtienne jusqu’à 12 articles.
- Dans Sélectionnez la source du produit, sélectionnez Tous les produits pour que Connectif recherche dans l’ensemble de votre catalogue les produits à afficher.
- Dans Configurez les conditions de définition d’un ensemble spécifique de produits :
- Cliquez sur Ajouter autre condition et sélectionnez " Catégories " dans le menu déroulant. À droite, sélectionnez " Données importées " et, après avoir cliqué sur " Sélectionnez une donnée importée ", choisissez " Lors de la visite d’un produit > Catégories ". De cette façon, Connectif obtiendra des produits appartenant à la même catégorie que le produit visité.
- Dans Sélectionnez la période des visites, choisissez Les plus visités au cours du dernier mois, afin que Connectif obtienne les produits les plus visités au cours du dernier mois.
- Cochez la case " Exclure les produits exportés par des nœuds précédents " pour éviter que des produits soient affichés en double.
48. Cliquez sur Suivant .
49. Dans Configuration du cas supplémentaire, complétez la configuration suivante :
- Sélectionnez " 12 " dans Quantité de produits à obtenir.
- Cliquez sur Ajouter autre condition et sélectionnez " Catégories " dans le menu déroulant. À droite, sélectionnez " Données importées " et, après avoir cliqué sur " Sélectionnez une donnée importée ", choisissez " Lors de la visite d’un produit > Catégories ".
50. Cliquez sur Suivant puis, dans Résumé, localisez la section Quantité de produits à obtenir et indiquez " 12 ". Activez ensuite " Remplir avec des produits jusqu’à la limite sélectionnée " et " Exclure les produits exportés par des nœuds antérieurs à celui-ci ".
51. Cliquez sur Terminer .
Dans cette étape, nous avons demandé à Connectif d’obtenir les produits les plus visités et les plus vendus du mois dernier pour les afficher sur le banner. Avec la configuration du nœud, jusqu’à 12 produits de la même marque et/ou catégorie seront sélectionnés selon leurs évaluations puis affichés. Dans le cas où il n’y aurait pas 12 produits satisfaisant ces conditions, l’algorithme de Connectif recherchera des produits complémentaires.
ÉTAPE 7. Deuxième nœud " Envoyer contenu web "
Comment créer l’inline pour cette stratégie
(Dans cette étape, vous allez envoyer le même inline que nous avons créé au cours de l’Étape 5, mais dans ce cas, il contiendra les produits obtenus dans le deuxième nœud " Obtenir des produits ").
52. Dans le menu de sélection des nœuds, allez dans " Actions > Web " et faites glisser le nœud " Envoyer contenu web " dans l’éditeur afin qu’il se connecte au nœud " Obtenir des produits ".
53. Cliquez sur (Modifier configuration de nœud) du nœud " Envoyer contenu web " et sélectionnez l’inline que vous avez créé au cours de l’Étape 5.
54. Cliquez sur Suivant .
55. Dans Configuration, ajoutez le sélecteur approprié pour afficher le contenu et cliquez sur Suivant . Si vous avez besoin de plus d’informations sur la façon de le localiser, vous pouvez revenir à l’Étape 5 pour savoir comment le faire.
56. Associez les variables de produit du deuxième nœud " Obtenir des produits ", dans ce cas, les produits les plus visités, de sorte que le banner affiche les éléments obtenus dans ce nœud et leurs informations. Vous pouvez utiliser cette image comme référence :
57. Cliquez sur Terminer .
Dans cette étape, nous avons demandé à Connectif d’afficher l’inline avec le banner de recommandation de produits que nous venons de créer pour les visiteurs qui arrivent à cette partie du flux. Dans cette stratégie, nous n’avons pas ajouté de limitations à l’inline afin qu’il s’affiche chaque fois que les conditions sont remplies.
Résultat
Après avoir terminé les étapes, vous aurez créé votre stratégie pour afficher un banner de recommandation qui apparaîtra après la fiche du produit lorsqu’un contact visite le produit.
Continuez votre parcours
Maintenant que vous avez terminé cette leçon, passez à la suivante. Elle vous permettra de créer une Stratégie de remarketing dans votre compte.
Félicitations !
Vous avez terminé la leçon.
Retour au cours
Accédez à l’index complet du cours et à l’explication de chaque leçon en cliquant sur ce lien.
Information associée
Si vous souhaitez approfondir certains des apprentissages de cette leçon, vous pouvez accéder à la documentation du guide :
- Insérer un inline dans votre e-commerce, au cas où vous auriez des doutes sur la façon de localiser l’ID et/ou sur la manière de l’insérer dans Connectif.
- Insérer un inline dans VTEX IO, pour savoir comment ajouter des contenus à votre site web au cas où votre e-commerce se trouve dans VTEX IO.