Comment faire du Web Scraping , c’est à dire récupérer des données depuis un site web ? Vous allez découvrir comment le faire avec un exemple au trabers des avis clients du site Trustpilot.com scrapés avec webscraper.io.
En effet, j’ai eu le plaisir de recevoir Mikael Monjour d’Eduba, qui nous explique les principes du web scraping.
Et si vous voulez simplement le résultat allez tout à la fin… Mikael vous offre le script clé en main pour faire du web scraping sur TrustPilot.
Sommaire de l'article
Qu’est ce que le Web Scraping ?
En anglais, le mot “scrape” veut dire racler, c’est à dire récupérer quelque chose… C’est un mot qui convient bien car lorsque l’on parle de Web Scraping, on parlera d’aller récupérer les données d’un site web.
C’est une technique très courante à mettre en place lorsque qu’on veut faire du Growth Hacking.
La définition du web scraping est donc la suivante : le Web Scraping c’est aller extraire des données d’un site web (coordonnées, images, URL textes, tarifs, prix des produits…) de manière automatique.
Attention cependant : le web scraping ce n’est PAS voler des données sur internet, mais extaire des données publiques que l’on pourrait tout aussi bien copier / coller manuellement.
Le web scraping n’est donc pas :
- Voler des données exposées sur le web par erreur ou méconnaissance.
- Extraire des emails personnels (B2C) pour ensuite les spammer par email
- …
Comment faire du Web Scraping sur TrustPilot avec webscraper.io ?
Je vais vous expliquer pas à pas la démarche afin que vous puissiez comprendre comment fonctionne le Web Scraping, et comment le faire pour n’importe quel autre site.
La première chose à faire c’est de télécharger le plugin
Le lien de l’extension chrome est https://chrome.google.com/webstore/detail/web-scraper/jnhgnonknehpejjnehehllkliplmbmhn?hl=en
Après l’installation vous devriez apercevoir l’extension webscraper dans votre navigateur internet (en haut à droite)
Quand vous cliquez dessus, une popup explicative vous invite à ouvrir les “developer tools” (outil de développement et d’analyse intégré à chrome).
Les créateurs de l’extension ont aussi ajouté des liens (Tutoriels vidéos, documentation, des sites pour tester le webscraping > ce qui vous évite de trop galérer dès le départ, le forum ou la plupart des questions sont résolues)
Bon fini de palabrer, on va sur le site qui nous intéresse : https://fr.trustpilot.com/
Nous voilà sur la page d’accueil.
1 – Trouver la page de départ pour commencer le Web Scraping
Quand on fait du webscraping, un des point le plus important est la page de départ.
C’est à partir de la page de départ que toute la logique de scrap commence.
Ici, on pourrait choisir plusieurs pages de départ :
- La page catégories : https://fr.trustpilot.com/categories
L’intérêt de débuter par cette url, ça serait que l’on pourrait descendre facilement sur l’arborescence du site (si on souhaite le scraper entièrement)
Le désavantage c’est que cela prendrait probablement des jours avec webscraper, et qu’il faudrait laisser son ordinateur tourner (allumé).
Quand il y a trop de données ( > 100 000) c’est souvent impossible de les télécharger avec webscraper.io et il faudra préférer des solutions comme scrapy ou pypetteer/ puppetteer.
Donc vous avez plusieurs choix :
– Une page catégorie en particulier par exemple https://fr.trustpilot.com/categories/bakery
(On a cliqué sur la catégorie boulangerie)
Plus court mais aussi très long à scraper. C’est très bien dès lors que l’on souhaite faire une veille concurrentielle. Personnellement je considère que ça reste mieux de le faire en dev sauf si vous voyez que le nombre de pages est peu élevé.
Dans beaucoup de cas il n’y a pas beaucoup d’entreprises donc ça reste peu intéressant de commencer de cette page
– La page d’une entreprise en particulier (notre choix)
On prend l’exemple de qonto (banque en ligne) en renseignant la recherche
On continue le tunnel de recherche en cliquant la page de recherche
On arrive sur la page : https://fr.trustpilot.com/review/qonto.eu
On aperçoit la structure https:// – origine du client – nom de domaine – /review/ – domaine de l’entreprise
C’est à partir de cette page que l’on va construire le scraper.
2 – La construction du scraper pour paramétrer le web scraping
Avant de trouver les éléments qui nous intéressent de scraper, nous devons lancer l’extension.
C’est le moment de faire F12 ou clic droit et inspecter l’élément (ou inspecter, ou examiner l’élément)
Quand vous cliquez sur l’onglet webscraper vous devriez apercevoir vos derniers projets (sitemaps dans le langage webscraper)
Comme nous n’avons pas de sitemap (de projet) pour truspilot nous allons en créer un.
Sitemap > Create new sitemap
On arrive à un endroit ou l’on doit renseigner :
- Le nom du projet (sitemap) ici “Truspilot”
- L’url de départ (start_url) ici “https://fr.trustpilot.com/review/qonto.eu”
Quand vous voulez scrapez une autre entreprise vous devrez changer https://fr.trustpilot.com/review/qonto.eu par https://fr.trustpilot.com/review/autredomaine.com
!!! Autre domaine étant le domaine de l’entreprise de votre choix ///
pas ce que vous devez mettre !!!
Si vous souhaitez scraper plusieurs entreprises, vous cliquez sur le plus à droite de l’input start_url
Vous voyez un nouvel input start_url. Renseignez lz si vous le désirez.
Ici on en a pas besoin.
Donc on clique sur le moins (à droite)
Maintenant il ne nous reste plus qu’à créer le projet (sitemap)
Comme je ne vais pas vous faire l’introduction à webscraper.io ici et que je vais vous le mettre à disposition le tutoriel un peu plus tard… On va sur la partie pratique
3 – Création de sélecteurs pour le web scraping
Pour créer un nouveau sélecteur on va cliquer sur le bouton bleu “add new selector”
Ici on va créer un sélecteur texte Nom qui récupèrera le nom de l’entreprise. De type “element”.
Pour sélectionner l’élément sur l’html on va utiliser le bouton select
Une fenêtre s’ouvre
Quand vous survolez avec votre curseur vous devriez avoir une coloration des éléments html
Vous allez cliquer sur qonto
En plus du passage de la couleur verte au rouge (qui vous dit que l’élément est bien sélectionné)
Vous pouvez apercevoir le remplissage de la barre bleu
Cela correspond à la sélection des sélecteurs css de l’élément Html contenant le nom de l’entreprise.
On clique ensuite sur “done selecting”
Après avoir accepté la sélection on voit le remplissage de la page.
Si on clique sur data preview :
On voit que l’on récupère le nom de l’entreprise.
On sauvegarde donc le premier sélecteur
On aperçoit le récapitulatif des sélecteurs sur la page du projet
4 – L’avance rapide
On a vu comment créer un sélecteur simple. Je vous montre les sélecteurs d’informations d’entreprise réalisés
Avis
Domaine
Catégorie
Trust score
Ville
Pays
Description entreprise
Maintenant que nous avons vu les sélecteurs texte, nous avons maintenant un autre type avec Facebook: Que se passe-t- il quand on sélectionne le bouton Facebook pour avoir la page d’entreprise ?
Regardons les donnés récupérées avec data preview
Merde ! On a récupéré le texte du bouton pas le lien !
Pour récupérer le lien on utilise en général link, popup link ou html comme selector type
En regardant le lien, il ne s’agit pas de la page mais d’un lien de partage donc on zappe !
Bouton Cancel
5 – La récupération des notes pour le web scraping
Dans notre cas cela reste très facile … on reste sur du “selector text”
Pour une Note 5
Pourune note Note 2
Pour une Note 1
6 – Récapitulatif des selectors du web scraping
Maintenant que l’on a sélectionné les éléments d’entreprise on va s’essayer au scrap
7 – Test du premier scrap (vérifications des infos entreprise)
On va sur selectors > scrape
On peaufine les réglages en cas de limite ou d’être moins bourrin pour éviter de se faire repérer ou d’avoir des temps de traitement trop longs.
On clique sur scrape
Une fenêtre s’ouvre (tant que la fenêtre n’est pas fermée le scraper continue)
Quand c’est fini, on clique sur selector. On va dans browse, et on refresh
On voit que j’ai fait des erreurs…
Après un nouveau lancement en gérant le temps de chargement je n’ai pas fait d’erreurs
Oui de temps à autre, si la page ne charge pas cela entraine que l’on n’a pas de données
8- La gestion des commentaires
Pour récupérer tous les commentaires, vous allons voir deux choses:
- les éléments
- la pagination
- Les éléments
Quand on parle d’élément on parle de quoi ?
On parle souvent de bloc. Un ou plusieurs blocs qui permettent de faire le lien entre plusieurs sélecteurs entre eux.
Une métaphore de la vie quotidienne:
———
Mikael Monjour
27 ans
Ville Paris
—————
Ces donnés n’ont de sens que si elles sont liées entre elles. surtout quand on recherche à tracer un profil d’identité.
L’élément, c’est comme la carte d’identité, un endroit qui permet d’agréger des données entre elles dans le but de préciser quelque chose.
Par exemple, pour un commentaire, cela n’aurait pas autant de sens de prendre note, utilisateur et commentaire séparément… Tout doit être lié pour avoir un “bloc” avec tous ces éléments.
Comment donc créer un élément ?
> De la même manière que pour les autres selectors
> C’est uniquement le selector type qui passe à Element
En plus du selector type qui change, c’est aussi la sélection qui change.
Ici on sélectionne une div/ article / section pour préparer une sélection plus précise qui viendra ensuite
Comme on souhaite récupérer tous les commentaires on prend soin à sélectionner toutes les balises articles
Sans oublier de cocher la case multiple (pour ne pas récupérer uniquement la balise multiple)
Quand vous avez tout sélectionné on clique sur Element
Vous devriez avoir _root/Element
Dans l’architecture on est dorénavant dans élément. Et on va créer nos sélecteurs qui vont nous permettre de récupérer chaque utilisateur et commentaires associés
-
- Création de selectors dans element
Quand on créé notre premier sélecteur on est contraint de sélectionner que dans le rectangle jaune qui correspond à la première balise article.
Si vous avez coché multiple dans Element les autres balises seront prises en compte à la fin en fonction de ce patron
Sélection de l’utilisateur
Le titre du commentaire
Le contenu du commentaire
Si vous avez essayé de sélectionner les étoiles ça ne fonctionne pas…. La question est donc de savoir comment faire pour avoir la note de l’utilisateur.
> Avec le selector type html (sur __parent__)
Vous copiez le code récupéré sur data preview
<script type=”application/json” data-initial-state=”review-info”> {“socialShareUrl”:”https://fr.trustpilot.com/reviews/5e064162c845450914acd7d8″,”businessUnitId”:”5a79a6af2a14f20001dce8d9″,”businessUnitDisplayName”:”Qonto”,”consumerId”:”58e77f560000ff000a8aaf52″,”consumerName”:”Web Biz”,”reviewId”:”5e064162c845450914acd7d8″,”stars”:5} </script> <aside class=”review__consumer-information”> <a href=”/users/58e77f560000ff000a8aaf52″ class=”consumer-information” data-track-link=”{‘target’: ‘Consumer profile’, ‘name’: ‘consumer-info’}”> <div class=”consumer-information__picture”><div><img alt=”Web Biz” src=”https://user-images.trustpilot.com/58e77f560000ff000a8aaf52/73×73.png” class=”consumer-information__picture”></div></div> <div class=”consumer-information__details”> <div class=”consumer-information__name” v-pre=””> Web Biz </div> <div class=”consumer-information__data”> <div class=”consumer-information__review-count”> <svg class=”consumer-information__review-icon”><use xlink:href=”#icon_pencil”></use></svg> <span class=””>2 avis</span> </div> </div> </div> </a> </aside> <section class=”review__content”> <div class=”review-content”> <div class=”review-content__header” v-pre=””> <div class=”review-content-header”> <div class=”star-rating star-rating–medium”> <img src=”//cdn.trustpilot.net/brand-assets/4.1.0/stars/stars-5.svg” alt=”5 étoiles : excellent” class=””> </div> <div class=”review-content-header__dates”> <script type=”application/json” data-initial-state=”review-dates”> {“publishedDate”:”2019-12-27T17:37:38Z”,”updatedDate”:null,”reportedDate”:null} </script> <div class=”v-popover”><span aria-describedby=”popover_39ayy7ms4m” class=”trigger” style=”display: inline-block;”><time datetime=”2019-12-27T17:37:38.000Z” title=”vendredi 27 décembre 2019 à 18:37:38″ class=”review-date–tooltip-target”>Il y a un jour</time> <div class=”tooltip-container-1″></div> <!—-></span> </div> </div> <div class=”review-content-header__review-verified”> <script type=”application/json” data-initial-state=”review-verified”> {“businessUnitDisplayName”:”Qonto”,”consumerName”:”Web Biz”,”informationRequestStatus”:”none”,”isVerified”:true,”verificationSource”:”invitation”} </script> <div class=”review-verified”><div class=”v-popover”><span aria-describedby=”popover_2qraarad2d” class=”trigger” style=”display: inline-block;”><div class=”review-verified-tooltip-trigger”><svg class=”icon review-verified__icon”><use xlink:href=”#claimed_16″></use></svg> Commande vérifiée </div> </span> </div></div> </div> </div> </div> <div class=”review-content__body” v-pre=””> <h2 class=”review-content__title”> <a class=”link link–large link–dark” href=”/reviews/5e064162c845450914acd7d8″ data-track-link=”{‘target’: ‘Single review’, ‘name’: ‘review-title’}”>Une néo-banque à la page</a> </h2> <p class=”review-content__text”> J’utilise mon compte pro depuis un logiciel via les API et j’en suis content. </p> </div> </div> </section> <div class=”review__actions”> <div class=”review-actions”> <div class=”review-actions__main”> <div class=”review-action brand-find-useful”><div class=”v-popover”><span aria-describedby=”popover_fduf3oid65″ class=”trigger” style=”display: inline-block;”><div><button role=”button” tabindex=”0″ class=”button button–subtle button–subtle-label-below brand-find-useful__button”><svg class=”icon icon-thumbs-up”><use xlink:href=”#icon_thumbs-up”></use></svg> <span>Utile</span> <!—-></button> <div></div></div> <!—-></span> </div></div> <div class=”brand-share-button-wrapper”><div class=”v-popover”><span aria-describedby=”popover_8265ojkqp0″ class=”trigger” style=”display: inline-block;”><div><button class=”button button–subtle brand-share-button”><svg class=”icon icon-share”><use xlink:href=”#icon_share”></use></svg> <span class=””>Partager</span></button> <div id=”share-button-tooltip-container-1″></div></div> </span> </div></div> <a href=”https://businessapp.b2b.trustpilot.com/#/reviews/5e064162c845450914acd7d8″ rel=”nofollow” target=”_blank” class=”button button–subtle button–subtle-label-below” title=”Réponse” style=”display: none” data-track-link=”{ ‘name’: ‘reply-as-company’, ‘target’: ‘Business App’, ‘legacyName’: ‘ReplyAsCompany’ }” data-reply-as-company-button=””> <svg class=”icon”> <use xlink:href=”#icon_reply”></use> </svg> <span>Répondre</span> </a> </div> <div class=”review-actions__notify-wrapper”> <button type=”button” class=”button button–subtle button–subtle-label-below” data-track-button=”{ ‘name’: ‘notify-compliance’, ‘legacyName’: ‘ReportNotification Click’ }”><svg class=”icon icon-flag–outline”><use xlink:href=”#icon_flag_outline”></use></svg></button> </div> </div> </div> <div class=”reporting”></div>
Vous copiez le code comme j’ai fait sur
https://regex101.com/r/nBjNII/1 et vous effectuez vos regex
Vous ne savez pas ce que c’est qu’une regex, vous pouvez aller sur Wikipédia : https://fr.wikipedia.org/wiki/Expression_r%C3%A9guli%C3%A8re
Sinon voici “Regex info”, un bon site en anglais : https://www.regular-expressions.info/tutorial.html
Si vous n’y arrivez pas, ou que vous débutez, copiez collez les regex si dessous
Si vous voulez une formation pour devenir regex master : https://www.eduba.school/courses/introduction-aux-regex
Nombre d’étoiles :(?<=\”stars\”\:)\d+
Date : (?<=datetime=”)\S+(?=\”)
On renseigne la regex dans regex
On vérifie si la date est bien sélectionnée
Récapitulatif des sélecteurs dans element
On va tester un scrape pour voir si tout se passe bien
Tout est ok !
La pagination
Maintenant que nous avons les éléments, il faut gérer la pagination avec webscraper.io, c’est à dire passer d’une page à l’autre.
Dans WebScraper, elle est très directe.
Il faut vérifier le type de pagination :
-
- par requête url
- via du code javascript
Ici la pagination s’effectue par requête
Il faut créer un sélecteur spécifique dans root
On appelle le sélecteur pagination
On sélectionne le type Link
On sélectionne tous les numéros de page
On coche le checkbox multiple
On sauvegarde et on scrape
Malheur ! A toi qui n’a pas réfléchi !! Regardes ce que tu as fait !
Tu as scrapé la première page et mais rien scrapé sur les pages secondaires !
Pourquoi ?
Car tu n’as pas fait de récursivité ; )
Comment vérifier que ton programme est récursif ?
> en utilisant le selector graph
>Sitemap Truspilot > selector grap
Le selector grap c’est la visualisation du projet
Le selector graph actuel ressemble à ça :
Le selector graph final doit ressembler à ça :
Il doit pouvoir s’ouvrir indéfiniment ?
Comment y arriver ? En utilisant la récursivité !
Et en vrai ?
Faire que pagination et élément soient enfants de pagination et de root (Si vous désélectionnez root vous allez tout casser) ; )
On scrape pour vérifier
Comme il y a beaucoup de données cette fois si on les télécharge en csv
Sitemap Truspilot > Export Data as Csv > (Attente puis) Download now
Ouverture du fichier, afin de vérifier que tout est correct :
9 – C’est fini !
J’espère que le tutoriel à été suffisamment précis. N’hésitez pas si il y a des points à éclaircir.
Sachez en plus qu’avec webscraper, vous pouvez importer ou exporter vos projets
Pour Exporter le projet :
Sitemap Trustpilot > Export Sitemap
Voici mon exemple de sitemap, le mien qui est aussi la correction de cet exervice pour Qonto sur Trustpilot :
{“_id”:”truspilot”,”startUrl”:[“https://fr.trustpilot.com/review/qonto.eu”],”selectors”:[{“id”:”Nom”,”type”:”SelectorText”,”parentSelectors”:[“_root”],”selector”:”span.multi-size-header__big”,”multiple”:false,”regex”:””,”delay”:0},{“id”:”Note_Globale”,”type”:”SelectorText”,”parentSelectors”:[“_root”],”selector”:”h2.header–inline”,”multiple”:false,”regex”:””,”delay”:0},{“id”:”Site_Web”,”type”:”SelectorText”,”parentSelectors”:[“_root”],”selector”:”.badge-card__section–hoverable span”,”multiple”:false,”regex”:””,”delay”:0},{“id”:”Description”,”type”:”SelectorText”,”parentSelectors”:[“_root”],”selector”:”div.company-description__text”,”multiple”:false,”regex”:””,”delay”:0},{“id”:”Email”,”type”:”SelectorText”,”parentSelectors”:[“_root”],”selector”:”.contact-point__details a”,”multiple”:false,”regex”:””,”delay”:0},{“id”:”Ville”,”type”:”SelectorText”,”parentSelectors”:[“_root”],”selector”:”.contact-point__details div:nth-of-type(1)”,”multiple”:false,”regex”:””,”delay”:0},{“id”:”Pays”,”type”:”SelectorText”,”parentSelectors”:[“_root”],”selector”:”.contact-point__details div:nth-of-type(2)”,”multiple”:false,”regex”:””,”delay”:0},{“id”:”Trustscore”,”type”:”SelectorText”,”parentSelectors”:[“_root”],”selector”:”div.trustscore”,”multiple”:false,”regex”:””,”delay”:0},{“id”:”Catégorie”,”type”:”SelectorText”,”parentSelectors”:[“_root”],”selector”:”div.category”,”multiple”:false,”regex”:””,”delay”:0},{“id”:”Note 5″,”type”:”SelectorText”,”parentSelectors”:[“_root”],”selector”:”.star-rating-5 div.chart__cell__value”,”multiple”:false,”regex”:””,”delay”:0},{“id”:”Note 4″,”type”:”SelectorText”,”parentSelectors”:[“_root”],”selector”:”.star-rating-4 div.chart__cell__value”,”multiple”:false,”regex”:””,”delay”:0},{“id”:”Note 3″,”type”:”SelectorText”,”parentSelectors”:[“_root”],”selector”:”.star-rating-3 div.chart__cell__value”,”multiple”:false,”regex”:””,”delay”:0},{“id”:”Note 2″,”type”:”SelectorText”,”parentSelectors”:[“_root”],”selector”:”.star-rating-2 div.chart__cell__value”,”multiple”:false,”regex”:””,”delay”:0},{“id”:”Note 1″,”type”:”SelectorText”,”parentSelectors”:[“_root”],”selector”:”.star-rating-1 div.chart__cell__value”,”multiple”:false,”regex”:””,”delay”:0},{“id”:”Element”,”type”:”SelectorElement”,”parentSelectors”:[“_root”,”pagination”],”selector”:”article”,”multiple”:true,”delay”:0},{“id”:”User”,”type”:”SelectorText”,”parentSelectors”:[“Element”],”selector”:”div.consumer-information__name”,”multiple”:false,”regex”:””,”delay”:0},{“id”:”Comment_Title”,”type”:”SelectorText”,”parentSelectors”:[“Element”],”selector”:”a.link”,”multiple”:false,”regex”:””,”delay”:0},{“id”:”Comment_Text”,”type”:”SelectorText”,”parentSelectors”:[“Element”],”selector”:”p”,”multiple”:false,”regex”:””,”delay”:0},{“id”:”Etoiles”,”type”:”SelectorHTML”,”parentSelectors”:[“Element”],”selector”:”_parent_”,”multiple”:false,”regex”:”(?<=\\\”stars\\\”\\:)\\d+”,”delay”:0},{“id”:”Date”,”type”:”SelectorHTML”,”parentSelectors”:[“Element”],”selector”:”_parent_”,”multiple”:false,”regex”:”(?<=datetime=\”)\\S+(?=\\\”)”,”delay”:0},{“id”:”pagination”,”type”:”SelectorLink”,”parentSelectors”:[“_root”,”pagination”],”selector”:”a.pagination-page:nth-of-type(n+2)”,”multiple”:true,”delay”:0}]}
Un sitemap est au format json, vous pouvez le visualiser avec des outils du type https://jsoneditoronline.org/
Pour utiliser le sitemap il vous suffit de créer un nouveau projet et de l’importer dans WebScraper.io :
Et voilà, c’est fini, vous avez appris les bases pour faire du web Scraping sur un site web !
Vous voulez en savoir plus sur le Web Scraping ?
Découvrez les formations (physiques et vidéo) au Growth Hacking de Mikael Monjour sur Eduba.school.
Mikael est l’un des meilleurs pros en France, et avec son aide, vous allez apprendre les bases de Growth Hacking mais aussi les trucs et astuces des Experts Growth Hackers.
Vous voulez en savoir plus sur le Web Scraping ?
Par exemple, découvrez la formation de Mikael Monjour sur le Scraping (1 jour) sur ce lien.
Et en utilisant le code promo “ONESEPASSEPASDECONSEILMARKETING” vous pouvez obtenir 75% de réduction sur le prix du cours !
Découvrez aussi tous les tutos de Mikael sur sa chaine Youtube, un véritable coffre au trésor qui regorge de perles de Growth Hacking !