Dans cette leçon, vous apprendrez et mettrez en œuvre le workflow pour afficher un recommandateur inline dans les fiches produit afin d’augmenter la rétention et les ventes.
Recommander des produits personnalisés pendant la navigation du contact sur votre eCommerce vous aidera à augmenter les chances d’achat et leur valeur. Avec Connectif, vous pouvez facilement ajouter un contenu recommandateur créé avec un contenu web de type inline.
Objectif : Rétention et conversion.
Éléments utilisés : Inline.
Temps d’implémentation : 2 heures.
Nous vous recommandons de suivre toutes les étapes et d’implémenter cette stratégie depuis zéro dans votre compte, mais si vous avez besoin d’une voie rapide, dans le Répertoire des Modèles de Workflows, vous disposez du modèle Recommandateur dans fiche produit, avec lequel vous pouvez travailler.
Résumé de la leçon
Dans cette leçon, vous allez apprendre :
- Le nœud "Lors de la visite d’un produit" pour détecter les visites des contacts sur une fiche produit.
- Le nœud "Obtenir des produits" pour récupérer les produits qui seront affichés ensuite dans un type de contenu.
- Comment créer et insérer sur la page un contenu inline, dans ce cas, de recommandation.
À la fin de la leçon, vous aurez créé dans votre compte :
La stratégie contenant ce workflow, grâce à laquelle vous afficherez un inline après la fiche produit au moment où un contact visite ce produit. Selon les produits obtenus liés à celui-ci, un inline plus précis sera affiché ou d’autres articles recommandés seront obtenus.
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 un nouveau Workflow" puis sur Créer un Workflow vierge.
2. Cliquez sur (Édition) et nommez-le "Recommandateur dans fiche produit".
3. Cliquez sur Appliquer pour enregistrer le nouveau nom de votre workflow.
ÉTAPE 1. Nœud "Début"
Comment configurer le Nœud "Début" pour cette stratégie
(Ce nœud définit l’audience à laquelle le workflow s’adresse).
4. Cliquez sur (Modifier la configuration du nœud) du nœud “Début”.
5. Sous Sélectionnez une restriction, cochez "Toute ma liste" et choisissez dans le menu déroulant l’option “Toute ma liste”.
6. Sous Sélectionnez la source des données, cochez "Tous les existants et les nouveaux".
7. Cliquez sur Mettre à jour.
À cette étape, nous avons indiqué à Connectif d’activer le workflow pour tous les contacts visitant le site, qu’ils soient nouveaux ou existants.
ÉTAPE 2. Nœud "Lors de la visite d’un produit"
Comment fonctionne le Nœud "Lors de la visite d’un produit"
Ce nœud sert à réagir au moment où un contact visite une page produit.
Dans l’interface du nœud, on configure les caractéristiques spécifiques des produits qui déclencheront ce nœud.
Comment configurer le Nœud "Lors de la visite d’un produit" pour cette stratégie
(Ce nœud fera en sorte que l’action suivante du workflow, ici l’envoi de l’inline d’abonnement aux notifications push, s’active quand un contact visite votre site).
8. Dans le menu de sélection des nœuds, allez à "Déclencheurs > Commerce électronique" et glissez le nœud "Lors de la visite d’un produit" dans l’éditeur, de manière à le connecter au nœud "Début".
9. Cliquez sur (Modifier la configuration du 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.
À cette étape, nous avons indiqué à Connectif que, dès qu’un contact visite n’importe quelle page produit depuis n’importe quel appareil, il passe à l’action suivante.
É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 plateforme. Il sert à filtrer les produits qui seront affichés ensuite dans un type de contenu. On y configure, sur différentes pages, quels produits et comment les obtenir :
Sélectionnez les cas d’utilisation. Pour choisir les groupes de produits que le nœud obtiendra. Jusqu’à 2 peuvent être sélectionnés, le premier ayant la priorité.
Configuration des cas d’utilisation. Pour définir, dans chaque cas, les produits à obtenir, leur origine, les conditions ou filtres qu’ils doivent respecter, et l’ordre d’affichage souhaité.
Résumé. Pour définir le nombre total de produits à obtenir dans le nœud, s’il faut limiter ce nombre et s’il faut exclure les produits obtenus dans des nœuds précédents.
Comment configurer le Nœud "Obtenir des produits" pour cette stratégie
(Ce nœud va obtenir automatiquement les produits liés au produit visité, de la même catégorie et marque).
12. Dans le menu de sélection des nœuds, allez à "Actions > Commerce électronique" et glissez le nœud "Obtenir des produits" dans l’éditeur, de façon à le connecter au nœud "Lors de la visite d’un produit".
13. Cliquez sur (Modifier la configuration du nœud) du nœud “Obtenir des produits”.
14. Pour sélectionner les cas d’utilisation, glissez Automatiquement liés à un produit dans le bloc de droite et cliquez sur Suivant. Ainsi, les produits liés automatiquement au produit visité par le contact seront obtenus.
15. Dans Configuration du cas principal, indiquez "12" dans Nombre de produits à obtenir, pour que Connectif obtienne jusqu’à 12 articles liés au produit visité.
16. Dans Sélectionnez la source des produits, choisissez Tous les produits, pour que Connectif cherche dans tout votre catalogue.
17. Dans Sélectionnez le produit lié, sélectionnez “Produit (Lors de la visite d’un produit)”, pour que les données importées par Connectif proviennent de la page visitée par le contact.
18. Dans Configurez les conditions pour définir un ensemble spécifique de produits :
Cliquez sur Ajouter une autre condition et sélectionnez dans le menu déroulant “Catégories”. À droite, choisissez “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”. Ainsi, Connectif obtiendra des produits de la même catégorie que celui visité.
- Cliquez sur Ajouter une autre condition et sélectionnez dans le menu déroulant “Marque”. À droite, choisissez “Est inclus dans” et, après avoir cliqué sur “Sélectionnez une donnée importée”, choisissez “Lors de la visite d’un produit > Marque”. Ainsi, Connectif obtiendra des produits de la même marque que celui visité.
19. Dans Sélectionnez un ordre, choisissez "Ordonner par évaluation décroissante" et cochez la case "Réorganiser aléatoirement les produits obtenus". Ainsi, Connectif choisira les 12 produits les mieux notés, mais le contenu les affichera dans un ordre aléatoire.
20. Cliquez sur Suivant.
21. À la dernière étape de la configuration du nœud, Résumé, trouvez la section Nombre de produits à obtenir et indiquez “12” pour que ce soit le nombre maximum de produits affichés.
22. Décochez la case “Remplir les produits jusqu’à la limite sélectionnée”, pour que si moins de 12 produits remplissent ces conditions, Connectif n’ajoute pas de contenu supplémentaire.
23. Cochez la case “Exclure les produits exportés par les nœuds précédents” pour éviter d’afficher le produit visité.
24. Cliquez sur Terminer.
À cette étape, nous avons indiqué à Connectif d’obtenir, pour afficher dans l’inline, des produits automatiquement liés au produit visité par le contact. Avec cette configuration, jusqu’à 12 produits de la même marque et catégorie seront affichés, sélectionnés selon leurs évaluations.
ÉTAPE 4. Nœud "Vérifier la valeur"
Comment configurer le Nœud "Vérifier la valeur" pour cette stratégie
(Ce nœud vérifie si la taille de la liste des produits recommandés obtenus est supérieure à 4).
25. Dans le menu de sélection des nœuds, allez à "Conditions > Système" et glissez le nœud "Vérifier la valeur" dans l’éditeur, de façon à le connecter au nœud "Obtenir des produits".
26. Cliquez sur (Modifier la configuration du nœud) du nœud “Vérifier la valeur”.
27. Glissez 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. Glissez le champ Literal vers le bloc de droite et indiquez la valeur "4".
30. Cliquez sur Mettre à jour.
À cette étape, nous avons indiqué à Connectif de vérifier si le nœud "Obtenir des produits" a récupéré plus de 4 produits liés à l’article visité, afin de continuer le flux en affichant ces produits. Si le nombre n’est pas supérieur à 4, un autre chemin sera suivi pour obtenir plus de produits via un second nœud "Obtenir des produits".
ÉTAPE 5. Premier nœud "Envoyer contenu web"
Comment créer l’inline pour cette stratégie
(À cette étape, vous allez créer l’inline contenant les produits liés, qui sera affiché par le nœud lorsque le contact visite la page produit).
31. Dans le menu de sélection des nœuds, allez à "Actions > Web" et glissez le nœud "Envoyer contenu web" dans l’éditeur, de façon à le connecter au nœud "Vérifier la valeur".
32. Sur la jonction entre ce nœud et le précédent, cliquez sur le cercle jusqu’à ce que "Oui" apparaisse. Vous indiquez ainsi à Connectif d’afficher l’inline si plus de 4 produits liés différents sont présents.
33. Cliquez sur (Modifier la configuration du nœud) du nœud “Envoyer contenu web” et Créer un nouveau contenu pour générer un nouveau contenu.
34. En créant un nouveau contenu, sélectionnez comme type Inline, 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 d’apparence générale de votre inline. Vous pouvez aussi y accéder en cliquant sur Propriétés générales dans le panneau de design.
36. Cliquez sur l’onglet Composants pour accéder aux options de conception et d’élaboration de votre inline.
- Dans Disposition, choisissez une structure en une colonne.
- Dans Éléments, ajoutez un élément de type "Texte" pour insérer du contenu et modifiez-le à votre goût.
- Dans Éléments, ajoutez un élément de type "Produits" pour afficher les produits recommandés et cliquez sur le bouton (Modifier élément) :
- Donnez-lui un nom, un type (ici, Carrousel), et un modèle (ici, Produit avec marque).
- Dans la structure, choisissez combien d’éléments seront affichés simultanément, sur ordinateur et mobile. Dans l’exemple, 4 sur ordinateur et 1 sur mobile.
- Optionnellement, choisissez une durée de rotation. Si vous indiquez 0, la rotation automatique sera désactivée.
37. Cliquez sur Enregistrer pour conserver les modifications dans le design et sur Retour au sélecteur pour revenir et finaliser 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 sur votre site le sélecteur approprié pour afficher le contenu. Vous pouvez suivre ces étapes :
Accédez à la page de votre site où vous souhaitez ajouter le contenu intégré.
Visualisez le bloc que vous voulez utiliser comme référence.
Ouvrez la console des outils de développement (DevTools) du navigateur.
Sélectionnez l’onglet Elements dans la console pour voir la structure HTML.
- Cliquez sur l’icône Inspecter, la première à gauche dans le menu supérieur.
- Placez le curseur de la souris sur la zone de contenu que vous souhaitez utiliser comme référence. Cliquez lorsque la sélection est correcte pour que l’étiquette soit mise en surbrillance dans la console.
- Cliquez sur le contenu de l’onglet Elements de la console et utilisez le raccourci clavier Ctrl + F pour chercher le nom de l’étiquette ou de l’attribut. S’il n’y a qu’une seule correspondance (comme dans cet exemple), elle est appropriée et vous pouvez l’utiliser. Dans ce cas, copiez le nom et fermez la console de développement. S’il y a plusieurs correspondances, vous devrez trouver un autre sélecteur unique.
40. Une fois le sélecteur localisé et copié, retournez dans la configuration du nœud "Envoyer contenu web" dans Connectif, ajoutez-le dans Configuration pour afficher le contenu et cliquez sur Suivant. (Dans la capture, nous suivons l’exemple précédent, vous devrez indiquer le nom du sélecteur que vous avez choisi).
41. Associez les variables produit du nœud "Obtenir des produits", ici les produits recommandés, pour personnaliser l’inline avec les articles obtenus dans ce nœud et leurs informations. Pour cela, liez les champs de Connectif (colonne gauche) avec les variables de votre email (colonne droite) :
Glissez le champ Nom pour le faire correspondre à la variable {{name}}. Ainsi, cette variable contiendra le nom du produit dans votre catalogue.
- Glissez le champ Url de détail pour le faire correspondre à la variable {{buttonUrl}}. Ainsi, cette variable contiendra l’adresse de la fiche produit.
- Glissez le champ Url de l’image pour le faire correspondre à la variable {{imageUrl}}. Ainsi, cette variable contiendra l’image du produit.
- Glissez le champ Prix unitaire pour le faire correspondre à la variable {{unitPrice}}. Ainsi, cette variable contiendra le prix unitaire actuel du produit.
- Glissez le champ Literal pour le faire correspondre à la variable {{buttonText}} et saisissez le texte que vous souhaitez afficher sur le bouton. Ainsi, cette variable contiendra le texte du bouton défini.
42. Cliquez sur Terminer.
À cette étape, nous avons indiqué à Connectif d’afficher l’inline avec la recommandation de produits que nous venons de créer aux visiteurs arrivant à ce point du flux. Dans cette stratégie, aucune limitation n’a été ajoutée à l’inline pour qu’il s’affiche dès que les conditions sont remplies.
ÉTAPE 6. Second nœud “Obtenir des produits”
(Ce nœud va obtenir les produits les plus visités du dernier mois, dans la catégorie et la marque du produit visité).
43. Dans le menu de sélection des nœuds, allez à "Actions > Commerce électronique" et glissez le nœud "Obtenir des produits" dans l’éditeur, de façon à le connecter au nœud "Vérifier la valeur".
44. Sur la jonction entre ce nœud et le précédent, cliquez sur le cercle jusqu’à ce que "Non" apparaisse.
45. Cliquez sur (Modifier la configuration du nœud) du nœud “Obtenir des produits”.
46. Pour sélectionner les cas d’utilisation, glissez "Produits les plus visités" dans le bloc de droite et "Produits les plus vendus" comme cas d’utilisation supplémentaire. Ainsi, les produits les plus visités seront obtenus, et si ce n’est pas suffisant, les plus vendus le seront. Cliquez sur Suivant.
47. Dans Configuration du cas principal, complétez la configuration suivante :
Indiquez "12" dans Nombre de produits à obtenir, pour que Connectif obtienne jusqu’à 12 articles.
Dans Sélectionnez la source des produits, choisissez Tous les produits, pour que Connectif cherche dans tout votre catalogue.
-
Dans Configurez les conditions pour définir un ensemble spécifique de produits :
Cliquez sur Ajouter une autre condition et sélectionnez dans le menu déroulant “Catégories”. À droite, choisissez “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”. Ainsi, Connectif obtiendra des produits de la même catégorie que celui visité.
Cliquez sur Ajouter une autre condition et sélectionnez dans le menu déroulant “Marque”. À droite, choisissez “Est inclus dans” et, après avoir cliqué sur “Sélectionnez une donnée importée”, choisissez “Lors de la visite d’un produit > Marque”. Ainsi, Connectif obtiendra des produits de la même marque que celui visité.
Dans Sélectionnez la période des visites, choisissez Les plus visités du dernier mois, pour que Connectif obtienne les produits les plus visités du dernier mois.
Cochez la case "Réorganiser aléatoirement les produits obtenus", pour que l’ordre d’affichage des produits varie toujours.
48. Cliquez sur Suivant.
49. Dans Configuration du cas supplémentaire, complétez la configuration suivante :
Sélectionnez "12" dans Nombre de produits à obtenir.
Cliquez sur Ajouter une autre condition et sélectionnez dans le menu déroulant “Catégories”. À droite, choisissez “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”.
Dans Sélectionnez la période des visites, choisissez "Les plus vendus du dernier mois" et cochez la case "Réorganiser aléatoirement les produits obtenus".
50. Cliquez sur Suivant et, dans Résumé, trouvez la section Nombre de produits à obtenir et indiquez “12”. Ensuite, activez "Remplir avec des produits jusqu’à la limite sélectionnée" et "Exclure les produits exportés par les nœuds précédents".
51. Cliquez sur Terminer.
À cette étape, nous avons indiqué à Connectif d’obtenir, pour afficher dans le contenu, les produits les plus visités et les plus vendus du dernier mois. Avec cette configuration, jusqu’à 12 produits de la même marque et catégorie seront affichés, sélectionnés selon leurs évaluations. Si 12 produits ne remplissent pas ces conditions, l’algorithme de Connectif cherchera des produits complémentaires.
ÉTAPE 7. Second nœud "Envoyer contenu web"
Comment créer l’inline pour cette stratégie
(À cette étape, vous allez envoyer le même inline que celui créé au Étape 5, mais cette fois avec les produits obtenus dans le second nœud "Obtenir des produits").
52. Dans le menu de sélection des nœuds, allez à "Actions > Web" et glissez le nœud "Envoyer contenu web" dans l’éditeur, de façon à le connecter au second nœud "Obtenir des produits".
53. Cliquez sur (Modifier la configuration du nœud) du nœud “Envoyer contenu web” et sélectionnez l’inline créé à 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 comment le localiser, vous pouvez revenir à l’Étape 5 pour voir comment faire.
56. Associez les variables produit du second nœud "Obtenir des produits", ici les produits les plus visités, pour que l’inline affiche les articles obtenus dans ce nœud et leurs informations. Vous pouvez vous référer à cette image :
57. Cliquez sur Terminer.
À cette étape, nous avons indiqué à Connectif d’afficher l’inline avec le recommandateur de produits que nous venons de créer aux visiteurs arrivant à ce point du flux. Dans cette stratégie, aucune limitation n’a été ajoutée à l’inline pour qu’il s’affiche dès que les conditions sont remplies.
Résultat
Après avoir complété les étapes, vous aurez créé votre stratégie pour afficher un inline recommandateur qui apparaîtra après la fiche produit au moment où un contact visite ce produit.
Poursuivez votre parcours
Maintenant que vous avez terminé cette leçon, continuez avec la suivante, dans laquelle vous créerez dans votre compte une stratégie de remarketing.
Félicitations !
Vous êtes arrivé à la fin de la leçon.
Retour au cours
Accédez à l’index complet du cours et à l’explication de chaque leçon via ce lien.
Lectures liées
Si vous souhaitez approfondir certains apprentissages acquis dans cette leçon, vous pouvez consulter la documentation du guide :
- Nœud "Obtenir des produits", pour comprendre en détail le fonctionnement de ce nœud utilisé dans cette stratégie et comment l’exploiter dans d’autres workflows.
- Insérer un inline dans votre eCommerce, au cas où vous auriez des doutes sur comment localiser et insérer l’ID. Et si vous avez VTEX IO, suivez les étapes de cet article pour ajouter des contenus web.
- Afficher le pourcentage de réduction uniquement lorsqu’il y a une remise, pour apprendre à mettre en valeur les produits soldés par rapport à ceux qui ne le sont pas.