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.

Prérequis

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

Comment ça fonctionne ?

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éé.

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

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

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".

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

4. Choisissez le produit que vous souhaitez sélectionner

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.

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".

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.

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.

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.

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.

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

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é.

<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

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).

Page chargée sans Shoppable Content

Page chargée avec Shoppable Content