Growth Hacking : Comment récupérer (scrapper) un catalogue produit sur un site e-commerce

Dans cet article, vous allez découvrir comment scrapper un catalogue produit à partir d’un site e-commerce. Tout cela, sans une ligne de code, en utilisant un outil très simple : WebScrapper.io.

Pourquoi scrapper un catalogue produit ?

La technique du scrapping est la plupart du temps utilisée par les start-ups pour récupérer de la donnée, la transformer, et créer un nouveau service 🚀.

Sauf que pour scrapper un site web, on pense tout de suite script et donc développement web. La plupart du temps, ces opérations de récupération de données sont réalisées en Python 🤓.

Plutôt que passer des heures sur vos ctrl c / ctrl v, voyons ensemble comment récupérer en quelques minutes les données catalogue d’un site e-commerce à l’aide d’une extension chrome bien pratique ⏲️.

La récupération automatique de données est parfois encadrée par les conditions d’utilisation du site web 📜. Avant de scrapper, lisez attentivement ces CGUs pour être sûrs de rester dans la légalité.

Vous l’aurez compris, aucun prérequis technique n’est nécessaire pour suivre ce petit tuto. Alors, on se lance ?

Notre exemple : un fake site de webscrapper.io

Pour notre exemple, nous allons récupérer les données d’un faux site e-commerce, proposé par Webscrapper. Nous allons nous concentrer sur les ordinateurs portables 💻, proposés sur cette section.

Lorsque l’on clique sur un article, on arrive sur la fiche produit qui ressemble à ça :

Bon, l’exemple n’est pas top car on aimerait pouvoir récupérer plus de caractéristiques sur le produit. Pas de panique, si vous avez davantage de données à récupérer sur le site que vous voulez scrapper, vous pourrez le faire grâce à ce tuto ;).

1) Installer l’extention Webscrapper.io

Rendez-vous sur la page du Chrome Store et installez Webscrapper. C’est un outil gratuit 🏴󠁺󠁡󠁦󠁳󠁿. Il existe des plans payants si vous souhaitez “industrialiser” son utilisation, en faisant des scrappings quotidiens par exemple. Pour ceux que ça intéresse, je vous laisse découvrir leur pricing.

2) Créer son premier Sitemap

Rendez-vous sur la page des laptops et ouvrez la console des développeurs. Oui, ça peut faire peur aux plus technophobes mais je maintiens que vous n’aurez pas une ligne de code à taper ;). Pour cela, faites un click droit n’importe où sur la page puis cliquez sur “inspecter”.

Vous devez alors voir apparaitre Webscrapper en onglet de votre console :

Cliquez sur “Create new sitemap” puis sur “Create sitemap” :

Nous allons donner un nom à notre sitemap et indiquer une url :

Comme vous pouvez le voir, j’ai utilisé l’url de la première page de la section que nous voulons scrapper. Il s’agira de la page de “base” à partir de laquelle la donnée pourra être récupérée.

3) Parcourir toutes les pages du catalogue

Notre site e-commerce a 20 pages de navigation proposant des laptops. Vous vous doutez bien qu’on ne va pas s’amuser à naviguer sur ces 20 pages pour aller chercher de la donnée. Nous allons donc créer un premier “selector” qui va faire le travail pour nous.

Cliquez sur “Add new selector” :

Donnez un ID (un nom) à votre “selector”. J’ai choisi “navigation”. Puis, choisissez “Link” comme type. En effet, il s’agit d’un selector qui va parcourir des liens, accessibles via les numéros de page.

Cliquez sur Select et allez survoler le lien vers la page 2. L’élément est surligné en vert :

Pour les plus “techniques” 🤓, l’outil permet de détecter les différents éléments HTML de notre page.

Quand l’élément est en surbrillance, cliquez sur la page 2, puis sur la page 3. Vous verrez que Webscrapper va automatiquement sélectionner toutes les pages sur lesquelles vous pouvez naviguer. Pratique non ?

Lorsque c’est fait, cliquez sur “Done selecting”.

Cochez la case “Multiple” car sur chaque page de navigation, nous allons récupérer le lien de plusieurs autres pages.

Enfin, dans “Parent Selectors”, sélectionnez également la page “navigation”. En effet, lorsque notre “selector” arrivera à la la page 8, nous voulons qu’il continue de scruter les pages suivantes pour récupérer leurs liens. Ainsi, sur chacune des pages de navigation (1, 2,…8…), notre scrap va identifier les liens des pages suivantes !

Votre selector doit finalement ressembler à ça :

Quand tout est bon, cliquez sur “Save selector” 💪.

4) Se rendre sur chaque fiche produit

Maintenant que notre outil est prêt à naviguer sur toutes les pages de navigation du catalogue, créons un nouveau “selector” qui va visiter chacune des fiches produit de nos pages de navigation.

Pour cela, cliquez sur “Add new selector”. Je vous laisse essayer de créer ce “Selector” tout seul pour voir si vous avez tout bien retenu ;).

La solution ressemble à ça :

J’ai donné un titre à mon “selector” et j’ai choisi le type “Link” car il s’agit bien de liens de navigation.

J’ai sélectionné le titre du premier article, puis celui du second pour que mon selector aille naviguer sur toutes les fiches produit présentes sur ma page.

J’ai choisi l’option “multiple” car nous avons plusieurs liens à récupérer sur une même page.

Enfin, en “parent selector”, j’ai choisi “_root” pour commencer sur notre première page et “navigation”, afin que le selector fasse son travail sur toutes les pages de navigation de notre section laptops.

En faisant un petit “Data preview” 🔍, on voit que notre “selector” fonctionne bien :

5) Récupérer les données des fiches produit

Maintenant que nos “selectors” de navigation sont correctement configurés, nous allons passer à la récupération des caractéristiques de nos produits. Pour ce faire, cliquez sur votre selector “fiche_produit” pour passer au niveau inférieur :

Sur le fil d’Ariane, on voit bien qu’on se situe maintenant au niveau des fiches produits qui auront été visitées grâce au “selector” qu’on vient tout juste de créer.

Cliquez sur le nom d’un des produits pour accéder à sa fiche :

Pour notre exemple, nous allons récupérer le nom du produit, les caractéristiques, le prix et le nombre d’avis. C’est parti 🚀!

Cliquez sur “Add new selector” puis créez un “selector” pour chaque caractéristique que vous souhaitez récupérer. Nous allons ici utiliser le type de “selector” intitulé “Text” (car on veut récupérer du texte).

Je vous montre l’exemple pour le nom du produit et je vous laisse faire les autres :

Vous noterez qu’on n’a pas coché la case “Multiple” car on souhaite récupérer un seul élément par page. Aussi, le “parent selector” est ici uniquement “fiche_produit” car on souhaite récupérer le nom du produit uniquement sur les fiches produit.

N’oubliez pas de faire des “data preview” pour vérifier que chaque selector fonctionne bien. Si vous voyez “null” s’afficher, c’est sans doute que vous n’avez pas sélectionné le bon élément HTML. Réessayez dans ce cas.

Vos “selectors” de fiche produit devraient alors ressembler à ça :

6) Vérifier son schéma sur le Selector graph

Pour que vous compreniez bien le fonctionnement de l’outil, il est intéressant de regarder le “Selector graph”. Il s’agit d’une visualisation de votre schéma de scrapping :

En cliquant sur vos “selectors”, vous pouvez alors vérifier que l’outil va suivre les bons chemins de navigation et récupérer la donnée produit au bon endroit :

Traduisons ce graph 🧐 :

Le scrapper démarre son travail sur la page _root qu’on a spécifié au moment de la création de notre sitemap. Pour le changer, cliquez sur “Edit metadata” dans le menu déroulant de votre sitemap.

Sur chacune des pages, il va naviguer sur la page suivante ”navigation”.

Il va également visiter les fiches produit de chacune des pages “fiche_produit”.

Sur ces fiches produit, il va récupérer les caractéristiques produit “product_name”, “price”, “reviews” et “description.

Notre schéma a l’air bon 🤩 ! Allons maintenant scrapper la data ;)

7) Scrapper la data

Cliquez sur le menu déroulant de votre sitemap puis choisissez “Scrape”. Par défaut, l’outil nous propose 2000ms d’intervalle pour les requêtes et pour le chargement des pages. Cet intervalle permet à votre scrape de ne pas se faire détecter et donc bannir 😉.

Vous n’avez plus qu’à cliquer sur “Start scrapping” et c’est parti !

Vous allez alors voir une pop-up s’ouvrir, avec le site qui défile “tout seul” :

Pendant ce temps là, allez vous chercher un café, le robot s’active pour vous ;).

Lorsque la pop-up se ferme, cliquez sur “Refresh” :

Vous allez alors voir apparaître vos précieuses données, structurées dans un beau tableau :

Pour récupérer votre catalogue, rien de plus simple, sur le menu déroulant de votre site map, cliquez sur “Export data as CSV”. Vous pourrez alors télécharger votre catalogue au format CSV !

Maintenant que vous avez réussi à scrapper votre premier catalogue, vous pouvez tous (ou presque) les scrapper 💪. Si vous souhaitez scrapper des sites un peu plus complexes, je vous invite à lire la doc de Webscrapper qui est assez complète.

La donnée récupérée n’est pas toujours super clean. Personnellement, j’utilise Dataiku (une version gratuite est disponible), pour nettoyer et retravailler mes données. Essayez, c’est très pratique ! Si vous souhaitez rester sur du basique, excel fait aussi très bien le travail 😃 !

8) Créer un chatbot pour aider vos utilisateurs à découvrir vos produits

Maintenant que vous avez récupéré de la donnée produit structurée, pourquoi ne pas l’utiliser pour créer un chatbot ? Dans cet autre article, je vous explique comment créer un chatbot capable de guider vos utilisateurs vers le bon produit, avec notre solution : Tail.ai.

Merci d’avoir lu ce petit tutorial qui je l’espère va vous aider dans vos projets ! Utilisez les commentaires si vous avez besoin d’aide et envoyez vos claps si vous souhaitez voir plus d’articles de hack de ce genre ;)