Comment extraire les plans de site d'un site web pour gagner en efficacité

L'utilisation d'informations publiques pour la croissance de son entreprise est une pratique courante chez les chefs d'entreprise du monde entier.

L'analyse des prix, la veille concurrentielle, l'optimisation des revenus et d'autres solutions pour aider votre entreprise à prospérer peuvent être obtenues à l'aide d'un outil de web scraping. Imaginez le temps qu'il faudrait pour copier-coller les informations de centaines de produits dans un tableau. C'est là que WebScrapingAPI change la donne.

Imaginons que vous souhaitiez extraire en masse les produits d'un site web. Une façon d'utiliser un outil de web scraping consiste à sélectionner manuellement l'URL de chaque page produit que l'outil doit extraire. Cela signifie que vous devez effectuer des recherches sur le site web pour localiser chaque page produit, etc.

Si le site web ne compte que quelques dizaines de pages, cela reste gérable, mais qu'en est-il si le site en compte des centaines, voire des milliers ? Le travail pourrait s'avérer fastidieux, prendre beaucoup de temps et être désagréable.

Que faire dans une telle situation ?

Les plans de site. Qu'est-ce que c'est ?

Les sitemaps peuvent être utiles en matière de référencement naturel (SEO). Ils constituent en quelque sorte le plan d'un site web, aidant les moteurs de recherche à trouver, explorer, voire indexer l'ensemble du contenu de votre site.

En général, ils sont utilisés par les grands sites web pour mieux structurer leurs pages et aider les moteurs de recherche à distinguer les pages les plus importantes des moins importantes.

Pouvons-nous tirer parti de ces sitemaps lors du scraping ? Bien sûr ! Découvrons comment ils peuvent nous aider à extraire en masse le contenu d'un site web.

Pour utiliser WebScrapingAPI, nous devons créer un compte et obtenir notre clé d'accès privée, qui sert à nous authentifier auprès de l'API. Pas d'inquiétude : la création de compte est gratuite et vous n'avez pas besoin d'ajouter votre carte bancaire ni d'autres informations personnelles.

Une fois connecté, vous serez redirigé vers le tableau de bord. Vous y verrez votre clé d'accès, que nous utiliserons dans quelques instants. Veillez à la conserver précieusement, mais si vous pensez que votre clé privée a été compromise, vous pouvez toujours la réinitialiser en cliquant sur le bouton « Reset API Key ».

Pour plus de détails sur le fonctionnement de WebScrapingAPI et son intégration dans votre projet, vous pouvez consulter sa documentation. Et pour tester le service, l'API Playground vous aide à visualiser encore mieux les résultats !

Assez de présentation, voyons comment utiliser WebScrapingAPI pour effectuer du scraping à l'aide de plans de site.

Pour cet exemple, nous utiliserons NodeJS comme langage de programmation, mais vous pouvez utiliser le langage de programmation avec lequel vous êtes le plus à l'aise. Ensuite, nous extrairons le plan du site et analyserons ses URL de produits, extrairons les pages de produits et stockerons les données dans un fichier CSV. De cette façon, vous pouvez extraire des données en masse à l'aide de WebScrapingAPI, mais si vous souhaitez extraire uniquement certaines pages, vous pouvez également effectuer des requêtes spécifiques.

Dans cet exemple, nous allons nous intéresser aux sitemaps de Maplin, qui se trouvent au bas de leur fichier robots.txt.

En suivant l'URL ci-dessus, nous serons redirigés vers le fichier XML contenant les liens vers les plans du site.

Si nous suivons le premier lien ci-dessus, nous accéderons au plan du site de différentes pages, dont certaines sont des pages de produits ! Ce sont ces pages dont nous allons extraire les données et les enregistrer dans un fichier CSV pour une utilisation ultérieure. Cela semble simple, n'est-ce pas ?

Afin d’extraire uniquement les données dont nous avons besoin, nous devons savoir où elles se trouvent. Pour cela, rendons-nous sur l’URL des interrupteurs d’éclairage intelligents ci-dessus et utilisons l’outil d’inspection du développeur.

Nous remarquons que chaque produit de la liste se trouve sous une balise li avec la classe ais-Hits-item.

À l'intérieur de ce nœud, nous voyons que le titre et le prix se trouvent respectivement sous la balise h3 avec la classe result-title et la balise span avec la classe after_special price.

Cette étape est assez simple ; il suffit d'installer cet ensemble de paquets :

• jsdom : utile pour l'analyse syntaxique du HTML.
• got : ce paquet nous aidera à effectuer la requête HTTP vers WebScrapingAPI.
• xml2js : analyse le XML et le convertit en objet pour faciliter son utilisation.
• csv-writer : pour stocker les données extraites dans un fichier CSV.

Pour installer tous ces paquets, il suffit d'utiliser cette ligne de commande dans le terminal de votre projet :

npm install jsdom got xml2js csv-writer

Nous allons ici utiliser l'une des fonctionnalités de WebScrapingAPI pour afficher la page et attendre que tout son contenu soit chargé. De cette façon, nous pouvons récupérer davantage de données. N'oubliez pas d'ajouter votre clé d'accès privée et l'URL que vous souhaitez scraper ; dans notre cas, l'URL du plan du site contenant les liens vers les pages produits.

const api_url = "https://api.webscrapingapi.com/v1"
const url = "https://www.maplin.co.uk/media/sitemap/maplin_uk-1-1.xml"
let params = {
   api_key: "XXXXX",
   url: url,
   render_js: 1,
   wait_until: 'networkidle2'
}

Après avoir obtenu le résultat de l'API, nous devons convertir la chaîne XML en un objet.

const response = await got(api_url, {searchParams: params})

const parser = new xml2js.Parser()
parser.parseString(response.body, async function (err, result) { 
// the rest of the code 
}

L'étape suivante consistera à parcourir les URL des produits, à créer une requête pour chacune d'entre elles afin d'extraire les données des produits et à sélectionner les informations que nous devons stocker.

Nous n'aurons pas besoin de parcourir toutes les URL du plan du site pour cet exemple ; prenons donc uniquement les URL de la position 5 à la position 10. Ensuite, nous allons préparer les paramètres pour la requête API et utiliser JSDOM pour analyser le code HTML obtenu.

Pour sélectionner le titre et le prix du produit, nous avons vu précédemment qu’ils se trouvent respectivement à l’intérieur de la balise h3 avec la classe result-title et de la balise span avec la classe after_special price.

Après avoir créé un objet avec le titre et le prix que nous venons d'extraire, nous l'ajoutons au tableau products.

Le code devrait ressembler à ceci :

let products = []

for (let index = 5; index < 10; index++) {
   params.url = result['urlset']['url'][index]['loc'][0]

   const res = await got(api_url, {searchParams: params})

   const {document} = new JSDOM(res.body).window

   const elements = document.querySelectorAll('li.ais-Hits-item')
   if (elements) {
       elements.forEach((element) => {
           let element_obj = {}

           const title = element.querySelector('h3.result-title')
           if (title && title.innerHTML) element_obj.title = title.innerHTML
           const price = element.querySelector('.after_special.price')
           if (price && price.innerHTML) element_obj.price = price.innerHTML

           if (element_obj && element_obj.title && element_obj.price)
               products.push(element_obj)
       })
   }
}

C'est ici que nous utilisons la bibliothèque csv-writer pour nous aider à convertir une liste d'objets en fichier CSV.

Il suffit de spécifier le chemin d'accès et le nom du fichier à créer, ainsi que le tableau headers, qui se compose d'objets de colonne, où l'identifiant représente les propriétés des objets produit et le titre correspond au nom de la colonne.

const csvWriter = require('csv-writer').createObjectCsvWriter({
   path: 'products.csv',
   header: [
       {id: 'title', title: 'Product Name'},
       {id: 'price', title: 'Product Price'}
   ]
})
csvWriter.writeRecords(products).then(() => console.log('Success!!'))

Nous avons réussi à extraire des données en utilisant des sitemaps pour parcourir les pages produits d'un site web, félicitations ! Voici le code dans son intégralité :

const {JSDOM} = require("jsdom");
const got = require("got");
const xml2js = require("xml2js");

(async () => {
   const api_url = "https://api.webscrapingapi.com/v1"
   const url = "https://www.maplin.co.uk/media/sitemap/maplin_uk-1-1.xml"
   let params = {
       api_key: "XXXXX",
       url: url,
       render_js: 1,
       wait_until: 'networkidle2'
   }
   const response = await got(api_url, {searchParams: params})

   const parser = new xml2js.Parser()
   parser.parseString(response.body, async function (err, result) {

       let products = []

       for (let index = 5; index < 10; index++) {
           params.url = result['urlset']['url'][index]['loc'][0]

           const res = await got(api_url, {searchParams: params})

           const {document} = new JSDOM(res.body).window

           const elements = document.querySelectorAll('li.ais-Hits-item')
           if (elements) {
               elements.forEach((element) => {
                   let element_obj = {}

                   const title = element.querySelector('h3.result-title')
                   if (title && title.innerHTML) element_obj.title = title.innerHTML
                   const price = element.querySelector('.after_special.price')
                   if (price && price.innerHTML) element_obj.price = price.innerHTML

                   if (element_obj && element_obj.title && element_obj.price)
                       products.push(element_obj)
               })
           }
       }

       const csvWriter = require('csv-writer').createObjectCsvWriter({
           path: 'products.csv',
           header: [
               {id: 'title', title: 'Product Name'},
               {id: 'price', title: 'Product Price'}
           ]
       })

       csvWriter.writeRecords(products).then(() => console.log('Success!!'))
   })
})();

J'espère que ce tutoriel vous a été utile et vous a aidé à comprendre à quel point il est simple d'utiliser les sitemaps à notre avantage pour le web scraping.

Cela prend encore moins de temps, et de cette façon, vous ne passerez pas à côté de pages comme vous le feriez normalement en parcourant manuellement un site web.

Lorsqu'il s'agit de scraper en masse, il est clair que l'utilisation de plans de site est une bien meilleure solution que de sélectionner manuellement chaque page produit ou même d'utiliser un spider pour explorer le site web.

En attendant le prochain épisode de notre série sur le web scraping, pourquoi ne pas essayer WebScrapingAPI ? Vous pouvez le tester avec jusqu'à 1 000 appels API gratuits. À la prochaine !