Une fois que vous avez lié vos produits à un ou plusieurs médias, vous pouvez commencer à afficher Shoppable Content sur votre site web. Pour ce faire, voici la marche à suivre :
Intégration du code sur la page souhaitée
Vous avez deux premières options qui s'offrent à vous lorsque vous intégrez le code :
- Utiliser le code générique
En intégrant ce code à l'endroit où vous souhaitez afficher le Shoppable Content (sur une page produit par exemple), veuillez prendre en compte que seulement les médias liés à l'URL du produit seront affichés.
Cela signifie qu'ils ne seront visibles que lorsque la couleur / taille / caractéristique concernée sera cochée.<script async src="https://sc.ls.skeepers.io/shoppable.umd.js"></script>
<skp-widget></skp-widget>
Il fonctionnera automatiquement si vous remplissez les conditions suivantes :
• Votre nom de domaine figure dans la liste des domaines communiquée lors de l'inscription. Pour des raisons de sécurité, nous limitons l'affichage du Shoppable Content. Vous pouvez nous donner autant de domaines que vous le souhaitez (ex : Production, staging, development...).
• Le lien vers le produit doit être défini dans le flux de produits, afin que nous puissions faire correspondre l'URL avec le Shoppable Content que nous devons afficher. - Utiliser le code dynamique
Nous vous recommandons d'utiliser le code suivant, dans lequel vous devez insérer l'identifiant du produit tel que renseigné dans votre back-office.
Cela vous permet d'afficher vos Shoppable Content sur toutes les variantes de ce produit, sans que des caractéristiques précises ne soient sélectionnées.
<script async src="https://sc.ls.skeepers.io/shoppable.umd.js"></script>
<skp-widget product="PRODUCT_ID"></skp-widget>
Les différents formats de Shoppable Content
Il existe différentes façons d'intégrer le widget pour afficher Shoppable Content (carrousel, slider, vidéo,...). Consultez cet article pour découvrir les différentes possibilités et apprendre à les intégrer.
Intégration d'une collection
L'ajout d'une collection (plusieurs Shoppable Content) à une page est très similaire à l'intégration d'un Shoppable Content. Après avoir sélectionné une collection dans le menu :
- Cliquez sur la collection concernée puis sur son URL
- Copiez l'ID de votre collection, qui se situe à la toute fin de l'URL
- Insérez cet ID à la place de "XXX" dans le code suivant :
<script async src="https://sc.ls.skeepers.io/shoppable.umd.js"></script>
<skp-widget collection="XXX"></skp-widget> - Intégrez ensuite ce code complété à l'endroit souhaité ! Sachez qu'il peut être intégré n'importe où dans la liste de noms de domaine que vous nous avez fournie.
Déploiement du tracker de performances
Une fois l'intégration terminée, il est temps de suivre vos performances grâce au comportement des clients. Notre article détaillant le processus est disponible ici : Déploiement du Tracker Shoppable Content.
FAQ - Performance de l'option
Le poids total de l'intégration est de 150 Ko.
Elle est chargée de manière asynchrone, c’est à dire en même temps que les autres éléments de la page, réduisant ainsi l'impact visuel ressenti par les visiteurs du site.
Le temps de réponse de notre serveur varie entre 50 ms et 100 ms selon votre situation géographique.
Les médias ne sont téléchargés en taille originale que lorsqu'ils sont ouvert. Nous créons un aperçu réduit et optimisé pour chaque média, réduisant ainsi le temps de téléchargement au minimum.
Chaque média ajoute entre 20 Ko et 90 Ko au poids total téléchargé.
Lorsque vous survolez une vidéo, extrait vidéo de 5 secondes s'affiche, qui est également optimisé et compressé, avec une taille moyenne de 500 Ko à 900 Ko.
Impact sur le FCP (First Contentful Paint - Lorsque le premier texte/image s'affiche sur une page produit) → Aucun
Impact sur le TTI (Time To Interact - Temps pour la première interaction sur une page produit) → Négligeable (moins de 50 ms)
Exemple : voici un test de performance montrant le résultat sur une même page, avec et sans l'intégration de Shoppable Content. Ce test contient 20 éléments pour un poids total de 521 ko + 150 ko pour le widget (le poids moyen par média de 26 ko).
|
Page chargée sans Shoppable Content |