Cómo extraer los mapas de sitio de una página web para mejorar la eficiencia

El uso de la información pública para impulsar el crecimiento de una empresa es una práctica habitual entre los empresarios de todo el mundo.

La inteligencia de precios, el seguimiento de la competencia, la optimización de ingresos y otras soluciones que ayudan a que tu negocio prospere se pueden obtener mediante una herramienta de web scraping. Imagínate cuánto tiempo llevaría copiar y pegar la información de cientos de productos en una tabla. Ahí es donde WebScrapingAPI cambia las reglas del juego.

Supongamos que quieres extraer los productos de un sitio web de forma masiva. Una forma de utilizar una herramienta de extracción web consiste en seleccionar manualmente la URL de cada página de producto para que la herramienta la extraiga. Esto significa que debes investigar un poco en el sitio web para averiguar dónde se encuentra cada página de producto, y así sucesivamente.

Si el sitio web solo tiene unas pocas docenas de páginas, puede resultar manejable, pero ¿y si tiene cientos o incluso miles de páginas? El trabajo podría resultar un poco tedioso, llevar mucho tiempo y, además, ser desagradable.

¿Qué podemos hacer en una situación así?

Mapas del sitio. ¿Qué son?

Los mapas de sitio pueden resultar muy útiles en lo que respecta al SEO. Son como el plano de una página web, ya que ayudan a los motores de búsqueda a encontrar, rastrear e incluso indexar todo el contenido de tu sitio web.

Por lo general, los sitios web de gran envergadura los utilizan para estructurar mejor sus páginas y ayudar a los motores de búsqueda a distinguir las páginas más importantes de las menos relevantes.

¿Podemos aprovechar estos mapas del sitio a nuestro favor a la hora de extraer datos? ¡Por supuesto! Veamos cómo pueden ayudarnos a extraer el contenido de un sitio web de forma masiva.

Para poder utilizar WebScrapingAPI, debemos crear una cuenta y obtener nuestra clave de acceso privada, que se utiliza para autenticarnos en la API. No hay de qué preocuparse, ya que crear una cuenta es gratis y no es necesario añadir datos de la tarjeta de crédito ni otra información personal.

Al iniciar sesión, se nos redirigirá al panel de control. Aquí veremos nuestra clave de acceso, que utilizaremos en unos momentos. Asegúrate de guardarla en un lugar seguro, pero si crees que tu clave privada se ha visto comprometida, siempre puedes restablecerla pulsando el botón «Restablecer clave API».

Si quieres saber más sobre cómo funciona WebScrapingAPI y cómo puedes integrarla en tu proyecto, siempre puedes consultar su documentación; y, si quieres probarla, ¡el API Playground te ayuda a visualizar los resultados aún mejor!

Ya basta de presentación, veamos cómo podemos utilizar WebScrapingAPI para extraer datos mediante mapas del sitio.

En este ejemplo, utilizaremos NodeJS como lenguaje de programación, pero puedes usar el lenguaje con el que te sientas más cómodo. A continuación, extraeremos el mapa del sitio y analizaremos las URL de los productos, extraeremos las páginas de los productos y almacenaremos los datos en un archivo CSV. De esta forma, puedes extraer datos de forma masiva utilizando WebScrapingAPI, pero si deseas extraer solo determinadas páginas, también puedes realizar solicitudes específicas.

En este ejemplo, analizaremos los mapas del sitio de Maplin, que se encuentran al final de su archivo robots.txt.

Al hacer clic en la URL anterior, se nos redirigirá al archivo XML que contiene los enlaces del mapa del sitio.

Si seguimos el primer enlace de arriba, llegaremos al mapa del sitio con las distintas páginas, ¡algunas de las cuales son páginas de productos! Esas son las páginas de las que extraeremos datos y los guardaremos en un archivo CSV para utilizarlos más adelante. Suena sencillo, ¿verdad?

Para extraer solo los datos que necesitamos, tenemos que saber dónde se encuentran. Para ello, vamos a acceder a la URL de los interruptores de iluminación inteligentes que hemos mencionado anteriormente y a utilizar la herramienta de inspección del desarrollador.

Observamos que cada producto de la lista se encuentra dentro de una etiqueta `li ` con la clase ` ais-Hits-item`.

Dentro de este nodo, vemos que el título y el precio se encuentran bajo la etiqueta h3 con la clase «result-title» y la etiqueta span con la clase «after_special price», respectivamente.

Este paso es bastante sencillo; solo tienes que instalar este conjunto de paquetes:

• jsdom: muy útil para el análisis sintáctico de HTML.
• Ya está: este paquete nos ayudará a realizar la solicitud HTTP a WebScrapingAPI.
• xml2js: analizará el XML y lo convertirá en un objeto para facilitar su uso.
• csv-writer: para guardar los datos extraídos en un archivo CSV.

Para instalar todos estos paquetes, solo tienes que ejecutar este comando en el terminal de tus proyectos:

npm install jsdom, xml2js y csv-writer

Aquí utilizaremos una de las funciones de WebScrapingAPI para cargar la página y esperar a que se cargue todo su contenido. De esta forma, podremos obtener más datos. No olvides añadir tu clave de acceso privada y la URL que deseas rastrear; en nuestro caso, la URL del mapa del sitio que contiene los enlaces a las páginas de productos.

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'
}

Una vez obtenido el resultado de la API, debemos convertir la cadena XML en un objeto.

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 
}

El siguiente paso consistirá en recorrer las URL de los productos, crear una solicitud para cada una de ellas con el fin de extraer los datos del producto y seleccionar la información que necesitamos almacenar.

En este ejemplo no necesitaremos recorrer todas las URL del mapa del sitio, así que tomemos solo las URL de la posición 5 a la 10. A continuación, prepararemos los parámetros para la solicitud de la API y utilizaremos JSDOM para analizar el código HTML resultante.

Para seleccionar el título y el precio del producto, hemos visto anteriormente que se encuentran dentro de la etiqueta `h3 ` con la clase `result-title` y de la etiqueta `span ` con la clase `after_special-price`, respectivamente.

Después de crear un objeto con el título y el precio que acabamos de extraer, lo añadimos a la matriz de productos.

El código debería tener un aspecto similar a este:

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

Aquí es donde utilizamos la biblioteca csv-writer para convertir una lista de objetos en un archivo CSV.

Solo tienes que indicar la ruta y el nombre del archivo que se va a crear, así como la matriz de encabezados, que está formada por objetos de columna, donde el «id» representa las propiedades de los objetos de producto y el «title» es el nombre de la columna.

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!!'))

Hemos conseguido extraer datos utilizando mapas del sitio para navegar por las páginas de productos de un sitio web. ¡Enhorabuena! Aquí tienes el código completo:

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!!'))
   })
})();

Espero que este tutorial te haya resultado útil y te haya ayudado a comprender lo fácil que es aprovechar los mapas de sitio para el web scraping.

Además, lleva menos tiempo y, de esta forma, no te perderás ninguna página, como suele ocurrir cuando se navega manualmente por un sitio web.

Cuando se trata de extraer datos a gran escala, está claro que utilizar mapas del sitio es una solución mucho mejor que seleccionar manualmente cada página de producto o incluso utilizar un rastreador para explorar el sitio web.

Hasta el próximo episodio de nuestro programa sobre web scraping, ¿qué tal si pruebas WebScrapingAPI? Puedes probarlo con hasta 1000 llamadas a la API gratuitas. ¡Hasta la próxima!