Widgets de recommandations sur le site

Un widget est un bloc de produits prêt à l'emploi sur votre site : « Vous aimerez aussi » sur la page d'accueil, « Achetés ensemble » sur la fiche produit, « Consultés récemment » dans le panier. Vous le configurez dans OneTrace.pro et insérez une seule fois un code court sur le site. Ensuite, le type, l'apparence et l'activation se modifient sans toucher au site.

Il faut pour cela que le traceur soit installé (Connexion du site) et que vous disposiez d'un catalogue de produits ainsi que d'événements de consultation, de panier et d'achat (Recommandations et catalogue de produits). Le « Propriétaire », l'« Administrateur » et le « Gestionnaire » peuvent créer et modifier les widgets.

Créer un widget

1. Ouvrez Engagement → Site web, onglet Widgets.
2. Cliquez sur Créer un widget.
3. Renseignez les paramètres à gauche : l'aperçu s'affiche immédiatement à droite.
4. Cliquez sur Enregistrer.

Paramètres

Aperçu

L'aperçu affiche le widget comme sur le site, avec les vrais produits de votre catalogue. Pour « Consultés ensemble » et les produits similaires, un exemple est utilisé : le premier produit disponible, dont l'id est indiqué au-dessus de l'aperçu. S'il n'y a aucun produit adapté, des emplacements gris s'affichent pour juger de l'apparence. Le sélecteur Ordinateur / Téléphone réduit la zone à la largeur d'un téléphone.

Sur le site, la mise en page s'adapte à la largeur de l'emplacement et non à celle de l'écran : dans une colonne étroite et sur téléphone, les cartes s'affichent par deux. Le widget reprend la police et la couleur du texte du site.

Code pour le site web

Chaque widget de la liste comporte un bloc Code pour le site web. Insérez-le dans le modèle de page à l'endroit où le bloc doit apparaître :

<div data-cdp-widget="a1b2c3d4e5f6" data-item="SKU-1"></div>

Attributs :

• data-item : id du produit de la page ou des produits du panier, séparés par des virgules : data-item="SKU-1,SKU-7". Obligatoire pour les types « Consultés ensemble », « Achetés ensemble » et « Similaires » : renseignez-le depuis le modèle de page.
• data-category : id de catégorie pour les produits populaires, si des pages différentes nécessitent des catégories différentes.
• data-exclude : id de produits, séparés par des virgules, à ne pas afficher, par exemple ceux déjà dans le panier.

Les produits personnalisés et consultés récemment sont sélectionnés d'après le visiteur ; ils n'ont pas besoin de data-item.

S'il n'y a aucun produit adapté, l'emplacement reste vide sur la page : la mise en page n'est pas cassée.

Activation et désactivation

L'interrupteur Afficher sur le site web de la fiche du widget le désactive sans modifier le site : le statut passe à « En pause » et le bloc est vidé sur la page. Réactivez-le et les produits reviennent. Le bouton en forme de corbeille supprime définitivement le widget : il ne s'affiche plus sur le site.

Le bouton en forme de crayon ouvre Modifier le widget. Les modifications sont visibles sur le site au chargement suivant de la page ; inutile de changer le code.

Statistiques

Sous le nom du widget figurent ses statistiques sur 30 jours :

L'effet global des recommandations sur le site, par type, est présenté dans la section Recommandations.

Sites monopages

Le traceur détecte lui-même les widgets après le chargement de la page, à l'apparition de nouveaux éléments et lors d'un changement de data-item. Sur les sites React, Vue et similaires, il suffit donc de modifier l'attribut pour que le bloc soit redessiné.

Si les produits doivent être actualisés sans modification des attributs, par exemple après un changement du panier, appelez :

cdp.widgets({ force: true });

Votre propre code à la place d'un widget

Les développeurs peuvent afficher un bloc de recommandations depuis le code, sans configuration dans l'interface d'administration :

window.addEventListener('load', () => {
  cdp.renderRecommendations('#recs', {
    type: 'viewed_with', item: 'SKU-1', title: 'Vus ensemble', layout: 'carousel', columns: 4,
  });
});

Le bloc a la même apparence qu'un widget, et les impressions et clics sont comptabilisés automatiquement. Vous pouvez l'appeler avant le chargement du traceur : l'appel attend dans la file. L'élément doit déjà être sur la page, c'est pourquoi l'exemple attend l'événement load. Un résultat vide vide l'élément. La couleur, l'arrondi et le bouton se configurent plus facilement dans un widget de l'interface d'administration.