đź”” Qu'est-ce que le Shoppable Content et comment cela fonctionne-t-il ?

Grâce au widget de Shoppable Content, vous pourrez centraliser et diffuser tous vos UGC préférés sur votre site e-commerce, tels que les posts de Skeepers Influence Marketing, les replays de Live Shopping, ou même télécharger votre propre contenu UGC.

Ce module complémentaire Skeepers est le meilleur moyen d'offrir à vos clients l'expérience d'achat la plus authentique, la plus inspirante et la plus engageante qui soit.

Pour ce faire, nous convertirons n'importe quel UGC en un actif Shoppable pour utiliser l'instant Ă©motionnel que les visiteurs vivront sur votre site web en parcourant votre offre.

 

blobid0.png

Sommaire

(Vous pouvez cliquer sur chaque titre pour accéder directement à l'information)

 

Prérequis

Une fois le Shoppable Content activé, vous pourrez accéder à la gestion du contenu à cette URL : https://backoffice.spockee.com/channels

 

Comment cela fonctionne-t-il ?

Avant de créer du contenu, permettez-nous de vous présenter quelques termes :

  • Shoppable Content : c'est le rĂ©sultat ou l'agrĂ©gation Produit + MĂ©dia, ce bouquet de mĂ©dia agrĂ©gĂ© Ă  un produit sera visible sur votre site e-commerce grâce au Shoppable Player que vous devrez intĂ©grer sur votre site.
  • Un mĂ©dia : C'est la dĂ©finition la plus large que nous puissions avoir, cela inclut les posts du marketing d'influence, les mĂ©dias tĂ©lĂ©chargĂ©s, les clips de Live Shopping gĂ©nĂ©rĂ©s....
  • Un produit : avant de crĂ©er le contenu, nous synchroniserons votre catalogue pour vous permettre d'agrĂ©ger les mĂ©dias et les produits.
  • Une collection : une collection est l'agrĂ©gation de plusieurs (au moins deux) Shoppable Content. Elle est essentiellement utilisĂ©e sur les pages d'accueil ou sur les pages de catĂ©gories pour afficher diffĂ©rents types de produits (par exemple, sur la page "Offres spĂ©ciales Saint-Valentin". Elle permet d'afficher Ă  la fois du maquillage, de la mode et des chaussures).

 

Introduction au tableau de bord Shoppable Content

Dans le Back Office, vous trouverez trois pages principales :

  • Dashboard : Vous y trouverez des informations sur le contenu que vous avez dĂ©jĂ  crĂ©Ă©.

Screenshot 2023-07-19 at 16.12.57.png

 

  • Shoppable Content : C'est l'endroit oĂą vous verrez tous le Shoppable Content crĂ©Ă©s en fonction d'un produit donnĂ©.

Screenshot 2023-07-19 at 16.13.02.png

 

  • Collections : C'est ici que vous trouverez toutes les collections existantes. Vous pourrez Ă©galement en crĂ©er une nouvelle.

Screenshot 2023-07-19 at 16.13.07.png

Pour afficher le contenu sur votre site, deux étapes sont nécessaires (une fois que la fonctionnalité de contenu commercial a été activée)

  • CrĂ©ation du contenu - gestion du contenu
  • IntĂ©gration du widget sur votre site et de l'ajout au panier

 

Création du contenu - Gestion du contenu

Vous trouverez ci-dessous les étapes à suivre pour créer votre contenu :

  1. Dans votre Back-Office, accédez à la section Shoppable Content (contenu commercial).
  2. Cliquez sur le bouton "+ Ajouter Shoppable Content".

Screenshot 2023-07-19 at 16.13.02.png

 

3. Sélectionnez le produit que vous souhaitez regrouper dans un média

blobid9.png

 

4. Choisissez le produit que vous souhaitez sélectionner

blobid8.png


5. Une fois le produit sélectionné, vous pouvez choisir le contenu que vous souhaitez agréger. Vous pouvez sélectionner le contenu de Live Shopping, le contenu de l'Influence Marketing ou même télécharger votre propre contenu.

blobid11.png


6. Si vous sélectionnez le contenu Live Shopping, vous pouvez générer des clips à partir de l'ensemble de la rediffusion pour créer un "focus" sur la partie souhaitée. Sélectionnez le début (ou utilisez la parenthèse) et la fin. Une fois votre sélection validée, générez le clip en cliquant sur le bouton "Utiliser ce clip".

blobid12.png


Le clip généré apparaîtra automatiquement dans le panel média sélectionné. Un clip généré peut être supprimé à l'aide de l'icône de la corbeille que vous trouverez dans le coin supérieur droit de la ressource.

blobid13.png


7. Si vous sélectionnez le contenu Influence Marketing, vous pouvez sélectionner les ressources créées pour ce produit par nos Skeepers influenceurs. Vous pouvez filtrer le type d'actif que vous souhaitez voir.

blobid14.png


8. Si vous sélectionnez le contenu téléchargé, vous accéderez au module de téléchargement pour gérer les fichiers MP4, JPEG et PNG. Une fois qu'un média est téléchargé, il apparaît automatiquement dans le panneau Médias sélectionnés.

blobid15.png

đź’ˇ Bon Ă  savoir!

Essayez d'utiliser des vidéos courtes, pas plus de 30 secondes, car vos spectateurs ne peuvent que passer à l'article suivant, une longue vidéo ne sera pas aussi efficace.
Une vidéo de 15 secondes en 1080p (1920x1080) devrait peser entre 2 et 4 Mo.
Veillez à limiter la taille de ces fichiers afin de réduire le temps de chargement et d'améliorer l'expérience de l'utilisateur.

Une fois le contenu généré, vous pouvez modifier l'ordre d'affichage dans le lecteur widget. Utilisez la souris de gauche pour réorganiser les ressources.

blobid16.jpg

 

Créer une collection

Une fois que vous avez ajouté du contenu à différents produits et que vous avez besoin de le consolider ou de l'agréger, vous avez la possibilité de créer une collection. Par exemple, vous pouvez créer une collection de tous les produits d'une même catégorie pour l'afficher sur une page de catégorie.

  1. Cliquez sur Nouvelle collection
  2. Nommez votre collection
  3. Ajoutez autant de produits que vous le souhaitez.
    • Vous trouverez le produit avec le contenu qui lui est associĂ©.
  4. SĂ©lectionnez le contenu que vous souhaitez afficher
  5. Cliquez sur Enregistrer

Screenshot 2023-07-19 at 16.13.07.png

 

Intégrer un widget Shoppable Content à votre site

Après avoir sauvegardé votre Shoppable content, vous pouvez intégrer le widget Shoppable Content sur votre site

Pour ce faire vous devez copier ce code Ă  l'endroit ou vous voulez afficher le Shoppable content sur votre site.

<script async src="https://sc.ls.skeepers.io/shoppable.umd.js"></script> 
<skp-widget></skp-widget>

 

Il s'agit d'un code totalement générique, ce qui signifie qu'il peut être utilisé sur l'ensemble de votre site web (si vous utilisez Shopify, utiliser notre App Shopify). Il fonctionne automatiquement si vous remplissez les conditions suivantes :

  • Votre nom de domaine doit ĂŞtre le mĂŞme que celui que vous nous avez donnĂ© pendant l'onboarding, nous faisons cette Ă©tape pour des raisons de sĂ©curitĂ©. Vous pouvez nous communiquer autant d'url que vous souhaitez (Production, staging, dev...)
  • Le lien vers le produit doit ĂŞtre dĂ©fini dans le flux de produits, afin de faire la correspondance entre la page visitĂ©e et le Shoppable Content attachĂ©.

đź’ˇ Bon Ă  savoir !

Vous pouvez modifier dynamiquement l'ID du produit, si vous souhaitez afficher un Shoppable content spécifique sur une autre page produit, ou sur un page qui n'est pas dans le flux produit

<script async src="https://sc.ls.skeepers.io/shoppable.umd.js"></script>
<skp-widget product="PRODUCT_ID"></skp-widget>

 

Pour en savoir plus sur l'intégration des widgets, vous pouvez lire cet article : 🔔 Shoppable Content : Intégration technique (Cas d'usage)

 

Intégrer une collection

L'ajout d'une collection (plusieurs contenus) à une page est très similaire à l'intégration d'un seul contenu. Après avoir sélectionné une collection dans le menu correct :

1. Cliquez sur le bouton Ă  droite

2. Copiez le code

image-20230509-151851.png

Vous devriez obtenir un code comme celui-ci :

<script async src="https://sc.ls.skeepers.io/shoppable.umd.js"></script>
<skp-widget collection=COLLECTION_ID></skp-widget>

Ce code peut être intégré n'importe où dans la liste des noms de domaine autorisés

Pour en savoir plus sur l'intégration des widgets, vous pouvez lire cet article : 🔔 Shoppable Content : Intégration technique (Cas d'usage)

 

DĂ©ploiement du tracker

Une fois l'intégration terminée, il faut suivre le comportement des clients. L'aide en ligne détaillant la mise en place du tracker est disponible sur le lien suivant : Shoppable Content Tracker - Déploiement

 

FAQ - Performance des widgets

Quel est l'impact de l'intégration du widget dans la page produit ?

Widget

Le poids total du widget seul est de 150 ko, il est chargé 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 clients.

Le temps de réponse de notre serveur varie entre 50 ms et 100 ms selon votre situation géographique.

 

MĂ©dias

Les médias en taille originals ne sont téléchargés 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, le widget charge et affiche un extrait vidéo de 5 secondes, qui est également optimisé et compressé, avec une taille moyenne de 500 ko à 900 ko.

 

Impact

Impact sur le FCP (First Contentful Paint - moment où le premier texte ou image est affiché) 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 la même page, avec et sans le widget du Shoppable Content. Ce test contient 20 éléments pour un poids total de 521 ko + 150 ko pour le widget (poids moyen par média de 26 ko).

Screenshot

Page chargée sans Shoppable Content

ScreenshotPage chargée avec Shoppable Content
Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 0 sur 0