Démarrer avec les recommandations de produits sur site

Objectif de cet article

Découvrez comment ajouter un bloc de recommandations de produits personnalisées directement aux pages de détail produit (PDP), en étendant la personnalisation sur site de Klaviyo au-delà du tiroir Klaviyo Customer Hub. Ce guide explique ce que fait le bloc intégré, comment le configurer et le concevoir, comment cette fonctionnalité est déployée au fil du temps et les compromis techniques liés à l’implémentation.

Par conception, les recommandations de produits intégrées sont indépendantes de la plateforme e-commerce et peuvent, à terme, être hébergées sur n’importe quelle page de votre site, avec une attention initiale portée à la PDP. Pour donner votre avis sur ces fonctionnalités, contactez l’équipe produit de Klaviyo Customer Hub.

Avant de commencer

• Exigence : ce bloc nécessite que Klaviyo Customer Hub soit activé dans Klaviyo.
• Compatibilité avec les plateformes : disponible dès aujourd’hui sur Shopify (en tant que bloc d’application de thème), Shopify Plus (en tant qu’extrait de code intégrable) et Salesforce Commerce Cloud (prise en charge SFRA uniquement). La prise en charge d’autres plateformes est prévue.
• Dépendance du moteur : La qualité des recommandations est assurée par le moteur de recommandation de Klaviyo. Nous diffusons des recommandations via notre service de recommandation de nouvelle génération — une mise à niveau par rapport à notre système précédent, qui ne pouvait pas personnaliser les recommandations pour les visiteurs anonymes.

Remarque : les recommandations de produits onsite n’étaient auparavant disponibles que dans le tiroir Hub, et uniquement pour les utilisateurs connectés. Cette fonctionnalité fait passer les recommandations du tiroir Hub à la PDP.

Ce que vous pouvez faire avec des recommandations de produits intégrées

Le bloc de recommandations de produits intégré vous permet de mettre en avant des produits pertinents directement sur vos pages de détail des produits afin que chaque visiteur — connu ou anonyme — voie quelque chose de pertinent pour lui.

• Faites correspondre le style de votre site : Personnalisez les polices, les couleurs, la mise en page et les styles de bouton afin que le bloc s’intègre naturellement à votre thème. Ajoutez des classes CSS personnalisées qui ciblent tous les éléments de Klaviyo Customer Hub, tous les blocs intégrés ou, plus spécifiquement, le bloc de recommandations. Modifiez l’en-tête du bloc (par exemple, « Top picks for you » ou « You may also like ») et choisissez une mise en page de type carrousel.
• Personnaliser les recommandations pour les visiteurs connus : les recommandations sont basées sur ce que Klaviyo sait d’un profil, grâce au service Next Gen Product Recommendations (NGPRS).
• Afficher quelque chose à chaque visiteur : Par défaut, les visiteurs anonymes voient des recommandations de produits génériques, provenant de Shopify.
• Se charger rapidement sans nuire aux performances de la page : le bloc est conçu pour se charger rapidement dès le départ, sans alourdir votre page avec du code supplémentaire — il ne ralentira donc pas votre site et ne nuira pas à vos scores de performance.
• Mesurer l’engagement et le revenu : chaque clic est suivi en tant qu’événement Clicked Product et attribué de la même manière qu’un clic sur un produit dans le tiroir du Hub. Vous pouvez ainsi mesurer les vues, les clics et le revenu attribuable.
• Maintenir une expérience cohérente : les visiteurs connus ou identifiés peuvent voir les mêmes recommandations dans le tiroir du Hub et sur la PDP.
• Permettre aux acheteurs d’enregistrer des produits pour plus tard : Les acheteurs peuvent ajouter un produit recommandé à leurs favoris directement depuis la carte ou à leur panier s’ils ne sont pas encore prêts à acheter.
• Éviter de recommander ce qui est déjà dans le panier : Les produits déjà dans le panier d’un acheteur sont exclus des recommandations qui lui sont affichées.

Créer un nouveau bloc intégré de recommandations de produits

Il s’agit d’un nouveau bloc intégrable : configurez-le de la même manière que les autres blocs intégrés, comme Favoris et FAQ, plutôt que via le cadre plus large des blocs de contenu de personnalisation intégrés.

1. Accédez à la bibliothèque de blocs :
   1. Accédez à Service > Klaviyo Customer Hub dans la navigation de gauche de Klaviyo. Cliquez sur Design > Blocs sur site. Recherchez Recommandations de produits dans la bibliothèque de blocs et ajoutez-le à votre page produit.
2. Configurez votre source de recommandations :
   1. Choisissez comment les recommandations seront renseignées et filtrées en fonction de l’état du visiteur :
      1. Visiteurs connectés et identifiés : Klaviyo (par défaut) ou Shopify.
      2. Visiteurs anonymes : Shopify (par défaut, et actuellement la seule option). Cette source alimente également les recommandations du tiroir du Hub pour les visiteurs anonymes.
      3. Filtrer les produits en rupture de stock : basculez sur activé/désactivé.
      4. Filtrer les produits déjà dans le panier de l’acheteur : basculer sur/hors.
3. Concevoir et personnaliser :
   1. Ajustez les paramètres visuels pour que le bloc s’intègre naturellement à votre site :
      1. Éléments : Afficher ou masquer le prix (affiché par défaut), les boutons Favoris (affichés par défaut), les boutons Ajouter au panier (masqués par défaut) et la variante de produit (masquée par défaut).
      2. Boutons : Choisissez un style (arrondi, carré, incurvé), une couleur, une couleur de texte et la casse du texte.
      3. Mise en page : définissez la largeur maximale, le nombre maximal de produits (de 1 à 10, 4 par défaut), le remplissage (haut, gauche, droite, bas) et les marges (entre le titre et la ligne de produits, et entre les produits). Configurez la taille de l’image (largeur, hauteur) et l’ajustement (couvrir, contenir, remplir).
      4. Polices : Sélectionnez les familles et les tailles de police pour la police de l’en-tête, la police du nom du produit, la police du prix et la police de la variante.
      5. CSS personnalisé : ajoutez des classes pour cibler tous les éléments de Klaviyo Customer Hub, tous les blocs intégrés ou, plus précisément, le bloc de recommandations.

4. Terminer la configuration de la plateforme :
   1. Installez le bloc sur le frontend de votre plateforme d’e-commerce :
      1. Shopify : Ajouter sous forme de bloc d’application via l’éditeur de thème.
      2. Shopify Plus : Ajoutez-le en tant qu’extrait de code (div) pour les marchands qui ont besoin d’un contrôle au niveau du thème.
5. Publier :
   1. Enregistrez et publiez vos modifications. Le bloc apparaîtra sur votre PDP en ligne en fonction des paramètres de source, de filtres et de design que vous avez configurés.

Attribution et analyse

• Chaque clic sur un produit recommandé est suivi en tant qu’événement Produit cliqué, dont la source est « Bloc de recommandation de produits intégré. »
• Les clics sont attribués de la même manière qu’un clic sur un produit dans le tiroir du Hub.
• Klaviyo enregistre les vues et les clics afin que vous puissiez suivre l’ adoption (comptes avec au moins un bloc de recommandations en ligne), l’engagement (taux de clics, taux d’ajout au panier après un clic, favoris) et le chiffre d’affaires (chiffre d’affaires attribuable par tranche de 1 000 impressions de bloc, et part des commandes avec un parcours de clic assisté par des recommandations).

Correspondance de style

Pour correspondre à votre thème existant, l’approche idéale consiste à demander à Shopify d’afficher le bloc de produits pour le compte de Klaviyo. Cependant, Shopify n’affichera pas les blocs dans l’extension d’application Klaviyo avec le contexte du produit ; à la place, nous créons un nouveau bloc de section qui affiche le bloc de produits.