Maîtriser le crawling de sites e-commerce avec JavaScriptun guide pas à pas avec Node.js

Les sites e-commerce sont l'une des sources les plus riches de données structurées publiques sur le web. Chaque fiche produit contient un titre, un prix, une note, un état de disponibilité et une image, et ces données alimentent le suivi des prix, la veille concurrentielle, la surveillance des stocks et l'analyse des tendances du marché. Le problème est que les boutiques modernes rendent la plupart de ces détails avec JavaScript et protègent leurs pages contre le trafic automatisé, de sorte qu'une simple requête HTTP tend à retourner un shell quasi vide plutôt que le catalogue recherché.

Ce guide est un tutoriel pas à pas Node.js pour crawler les données produit d'un site e-commerce de manière fiable. Vous construirez un petit scraper exécutable qui récupère une page de fiche rendue via la Crawling API, analyse chaque carte produit avec Cheerio, parcourt la pagination et enregistre une sortie structurée propre au format JSON ou CSV. L'ensemble du tutoriel reste limité aux données produit publiques, et la section sur la légalité vers la fin est sincère, pas du remplissage, alors lisez-la avant de pointer cet outil sur un volume réel.

Ce que vous allez construire

Un script Node.js qui prend une URL de recherche ou de catégorie e-commerce publique, récupère le HTML rendu via la Crawling API et extrait un enregistrement structuré pour chaque produit sur la page de résultats. Nous utilisons une requête de recherche comme exemple fil conducteur et extrayons ces champs par article :

• Titre : le nom du produit tel qu'il apparaît sur la carte, par exemple "Montre analogique pour homme".
• Prix : le prix affiché tel que présenté, comme "Rs. 1 299".
• Note : le nombre d'avis ou la note en étoiles affichée à côté du produit.
• Disponibilité : le signal de stock ou de localisation qu'une carte affiche, le cas échéant.
• Image : l'URL de l'image miniature du produit.
• URL produit : le lien vers la page individuelle du produit.

Pourquoi une requête simple échoue sur les sites e-commerce

Si vous demandez une URL de recherche de boutique avec un client HTTP basique, vous obtenez généralement une réponse avec le statut 200 mais seulement une partie des données de fiche dans le corps. Deux facteurs jouent contre vous. Premièrement, la plupart des sites e-commerce rendent les prix, les notes et la majeure partie de chaque carte produit dans le navigateur avec JavaScript et AJAX, de sorte que le HTML initial est incomplet jusqu'à ce que les scripts de la page s'exécutent. Deuxièmement, les plateformes de vente au détail signalent rapidement le trafic automatisé : les IP de datacenter et les patterns de requêtes qui ne ressemblent pas à un vrai navigateur se voient opposer des challenges, des limitations de débit ou des blocages avant d'atteindre le contenu rendu.

Un crawler e-commerce fonctionnel a donc besoin de deux choses en une seule requête : un navigateur qui rend réellement la page, et une IP que la plateforme perçoit comme un vrai visiteur. Vous pouvez assembler cela vous-même avec un navigateur sans interface et un pool de proxies résidentiels rotatifs, mais les assembler et les maintenir en bon état représente l'essentiel du travail. La Crawling API regroupe les deux en un seul appel : vous lui envoyez l'URL avec un token JavaScript, elle rend la page derrière une IP de confiance, et elle vous renvoie le HTML terminé à analyser. Pour un regard plus approfondi sur le comportement des cibles rendues côté client, voir comment crawler des sites JavaScript.

Prérequis

Quelques éléments doivent être en place avant d'écrire du code. Aucun ne prend longtemps.

JavaScript et Node.js de base. Vous devez être à l'aise pour écrire et exécuter un script Node et installer des paquets avec npm. Si vous êtes nouveau sur Node, la documentation officielle et tout cours débutant vous amèneront au niveau que ce tutoriel suppose. Pour un tutoriel plus complet, consultez notre guide sur la façon de construire un web scraper avec Node.js.

Node.js 16 ou ultérieur. Confirmez votre version avec node --version. Si vous ne l'avez pas, installez la dernière version LTS depuis le site Node.js ou via un gestionnaire de versions comme nvm. NPM est fourni avec Node.js, donc installer l'un vous donne les deux.

Un compte Crawlbase et un token JS. Inscrivez-vous, ouvrez votre tableau de bord et copiez votre token JavaScript (JS) depuis la page de documentation de votre compte. Crawlbase émet deux tokens : le token normal pour les pages statiques et le token JS pour les pages dynamiques rendues par JavaScript. Traitez le token comme un mot de passe : il authentifie vos requêtes, alors gardez-le hors du contrôle de version.

Configurer le projet

Créez un dossier de projet, initialisez-le comme package npm et installez les bibliothèques dont le scraper a besoin. L'indicateur npm init -y accepte toutes les valeurs par défaut et écrit un package.json pour vous.

node --version

mkdir ecommerce-crawling && cd ecommerce-crawling
npm init -y

npm install crawlbase cheerio csv-writer

Trois dépendances font le travail : crawlbase est le client Node officiel de la Crawling API, cheerio analyse le HTML retourné avec une API de style jQuery pour extraire des champs individuels par sélecteur CSS, et csv-writer transforme les enregistrements structurés en fichier CSV à la fin. Si les sélecteurs sont nouveaux pour vous, le primer sur XPath et les sélecteurs CSS est un bon compagnon.

Étape 1 : Récupérer la page de recherche rendue

Commencez par obtenir la page terminée. Importez la classe CrawlingAPI, initialisez-la avec votre token JS et demandez l'URL de recherche. Vérifier le code de statut avant d'analyser permet de rendre les échecs visibles plutôt que silencieux. L'option page_wait maintient un nombre fixe de millisecondes après le chargement pour que les cartes produit à rendu tardif apparaissent avant la capture de la page.

const { CrawlingAPI } = require('crawlbase');

// Replace with your actual Crawlbase JS token
const api = new CrawlingAPI({ token: 'YOUR_CRAWLBASE_TOKEN' });

async function crawl(pageUrl) {
  const options = { ajax_wait: 'true', page_wait: 5000 };
  const response = await api.get(pageUrl, options);
  if (response.statusCode === 200) {
    return response.body;
  }
  console.error(`Request failed: ${response.statusCode}`);
  return null;
}

const searchUrl = 'https://example-shop.com/catalog/?q=watches+for+men';
crawl(searchUrl).then((html) => {
  console.log(html ? html.slice(0, 500) : 'No HTML returned');
});

Les deux options d'attente sont importantes pour une boutique rendue côté client. ajax_wait indique à l'API d'attendre que le contenu asynchrone ait fini de se charger, et page_wait maintient 5000 millisecondes (5 secondes) après le chargement pour que les éléments à rendu tardif apparaissent avant la capture. Cinq secondes est un bon point de départ ; augmentez si les prix ou les notes reviennent vides. Le token JS garantit également une rotation des IP en coulisses, de sorte que la requête est perçue comme un vrai visiteur. Exécutez le script avec node scraper.js et vous devriez voir le vrai balisage produit, pas un shell réduit. Cela confirme que le rendu fonctionne avant d'écrire un seul sélecteur. Si vous souhaitez un rappel sur la couche de requête elle-même, voir comment effectuer des requêtes HTTP dans Node.js.

Étape 2 : Identifier les sélecteurs et analyser chaque produit

Avant d'extraire quoi que ce soit, inspectez une carte produit en direct. Faites un clic droit sur un titre, un prix ou une note dans votre navigateur et choisissez "Inspecter" pour ouvrir les outils de développement, puis relevez les noms de classes et les balises qui encadrent chaque champ. Les sites e-commerce disposent chaque résultat dans un bloc répétitif, vous sélectionnez donc chaque carte, puis lisez le titre, le prix, la note, l'image et le lien produit à l'intérieur. Lire chaque champ de manière défensive empêche une valeur manquante de faire planter l'exécution.

const cheerio = require('cheerio');

function parseSearch(html) {
  const $ = cheerio.load(html);
  const results = [];

  $('div[data-qa-locator="general-products"] div[data-qa-locator="product-item"]').each((index, element) => {
    const card = $(element);
    const product = {};

    product.productPageUrl = card.find('.mainPic--ehOdr a').attr('href') || null;
    product.thumbnailImage = card.find('.mainPic--ehOdr img').attr('src') || null;
    product.title = card.find('.info--ifj7U .title--wFj93 a').text().trim() || null;
    product.price = card.find('.info--ifj7U .price--NVB62 span').text().trim() || null;
    product.noOfReviews = card.find('.info--ifj7U .rateAndLoc--XWchq .rating__review--ygkUy').text().trim() || null;
    product.location = card.find('.info--ifj7U .rateAndLoc--XWchq .location--eh0Ro').text().trim() || null;

    if (product.title) results.push(product);
  });

  return results;
}

Quelques détails rendent ce code résilient. Chaque champ revient à null quand l'élément est absent, ce qui est courant car toutes les cartes n'affichent pas une note ou une ligne de localisation. L'URL du produit et l'image sont lues respectivement depuis href de l'ancre et src de l'image, donc elles utilisent attr plutôt que text. Le sélecteur externe cible la grille de produits par ses attributs data-qa-locator, qui ont tendance à être plus stables que les noms de classes hachés, et la vérification finale if (product.title) ignore tout bloc vide ou de substitution.

Étape 3 : Assembler le crawler

Assemblez maintenant la récupération et l'analyse en un seul script exécutable. Récupérez le HTML rendu, transmettez-le à l'analyseur et affichez les enregistrements structurés. C'est la version de bout en bout minimale qui crawle une seule page de recherche.

const { CrawlingAPI } = require('crawlbase');
const cheerio = require('cheerio');

const api = new CrawlingAPI({ token: 'YOUR_CRAWLBASE_TOKEN' });

async function crawl(pageUrl) {
  const options = { ajax_wait: 'true', page_wait: 5000 };
  const response = await api.get(pageUrl, options);
  if (response.statusCode === 200) return response.body;
  console.error(`Request failed: ${response.statusCode}`);
  return null;
}

function parseSearch(html) {
  const $ = cheerio.load(html);
  const results = [];
  $('div[data-qa-locator="general-products"] div[data-qa-locator="product-item"]').each((index, element) => {
    const card = $(element);
    const product = {
      productPageUrl: card.find('.mainPic--ehOdr a').attr('href') || null,
      thumbnailImage: card.find('.mainPic--ehOdr img').attr('src') || null,
      title: card.find('.info--ifj7U .title--wFj93 a').text().trim() || null,
      price: card.find('.info--ifj7U .price--NVB62 span').text().trim() || null,
      noOfReviews: card.find('.info--ifj7U .rateAndLoc--XWchq .rating__review--ygkUy').text().trim() || null,
      location: card.find('.info--ifj7U .rateAndLoc--XWchq .location--eh0Ro').text().trim() || null,
    };
    if (product.title) results.push(product);
  });
  return results;
}

async function main() {
  const searchUrl = 'https://example-shop.com/catalog/?q=watches+for+men';
  const html = await crawl(searchUrl);
  if (!html) return;
  const results = parseSearch(html);
  console.log(JSON.stringify(results.slice(0, 3), null, 2));
}

main();

La fonction main construit l'URL de recherche pour la requête, l'envoie via la Crawling API avec une attente de page de 5 secondes pour que le rendu JavaScript se termine, et analyse le HTML retourné avec Cheerio. Les enregistrements extraits, incluant les URL de produits, les images, les titres, les prix, les nombres d'avis et les localisations, sont collectés dans un tableau et affichés pour inspection. Exécutez-le avec node scraper.js pour confirmer que les champs reviennent peuplés.

À quoi ressemble la sortie

Exécutez le script complet et vous obtenez un tableau propre d'enregistrements, un par produit, prêt à écrire au format JSON, CSV ou dans une base de données.

[
  {
    "productPageUrl": "https://example-shop.com/products/mens-analog-watch-1.html",
    "thumbnailImage": "https://img.example-shop.com/p/mens-analog-watch-1.jpg",
    "title": "Men's Analog Wrist Watch Stainless Steel",
    "price": "Rs. 1,299",
    "noOfReviews": "(128)",
    "location": "Karachi"
  },
  {
    "productPageUrl": "https://example-shop.com/products/sport-digital-watch-2.html",
    "thumbnailImage": "https://img.example-shop.com/p/sport-digital-watch-2.jpg",
    "title": "Sport Digital Watch Waterproof",
    "price": "Rs. 899",
    "noOfReviews": "(54)",
    "location": "Lahore"
  }
]

Étape 4 : Gérer la pagination sur les pages de fiches

Une page de résultats est une démonstration ; un vrai travail parcourt la pagination. Les résultats de recherche e-commerce sont répartis sur de nombreuses pages, donc pour collecter un catalogue complet, vous lisez d'abord le nombre total de pages, puis vous itérez de la page 1 à la page N, en récupérant et analysant chacune. Le total est généralement exposé par le contrôle de pagination près du bas de la première page ; vous pouvez le lire avec un sélecteur et l'analyser en nombre. Chaque URL de page ajoute simplement un paramètre &page= à l'URL de recherche.

async function getTotalPages(query) {
  const searchUrl = `https://example-shop.com/catalog/?q=${encodeURIComponent(query)}`;
  const html = await crawl(searchUrl);
  if (!html) return 0;
  const $ = cheerio.load(html);
  const totalPages = parseInt($('ul.ant-pagination li:nth-last-child(2)').attr('title'), 10);
  return Number.isNaN(totalPages) ? 1 : totalPages;
}

async function crawlPage(query, page) {
  const searchUrl = `https://example-shop.com/catalog/?q=${encodeURIComponent(query)}&page=${page}`;
  const html = await crawl(searchUrl);
  return html ? parseSearch(html) : [];
}

async function crawlAll(query) {
  const totalPages = await getTotalPages(query);
  const results = [];
  for (let page = 1; page <= totalPages; page++) {
    const pageResults = await crawlPage(query, page);
    results.push(...pageResults);
  }
  return results;
}

Le flux se divise en trois petites fonctions. getTotalPages récupère la première page de recherche et lit le nombre de pages depuis le contrôle de pagination, avec un repli à 1 si la valeur est manquante. crawlPage récupère et analyse une seule page en ajoutant le paramètre page à l'URL. crawlAll les relie : elle détermine le total, boucle de la page 1 à N et agrège les résultats de chaque page dans un tableau. Comme chaque page de résultats partage la même structure de carte, la fonction parseSearch que vous avez déjà écrite fonctionne sur toutes sans modification. Pour les très grands catalogues, limitez la boucle à un nombre raisonnable de pages plutôt que de crawler des milliers en une seule exécution.

Étape 5 : Enregistrer les données en CSV

Avec les enregistrements collectés, écrivez-les dans un fichier CSV pour pouvoir ouvrir les données dans un tableur ou les charger dans un autre outil. La bibliothèque csv-writer vous permet de définir des en-têtes qui correspondent à vos noms de champs et d'écrire tous les enregistrements en un seul appel. JSON et CSV ont chacun leur place ; le guide sur le scraping web e-commerce couvre quand utiliser l'un ou l'autre.

const createCsvWriter = require('csv-writer').createObjectCsvWriter;

const csvWriter = createCsvWriter({
  path: 'ecommerce_products.csv',
  header: [
    { id: 'productPageUrl', title: 'Product Page URL' },
    { id: 'thumbnailImage', title: 'Thumbnail Image URL' },
    { id: 'title', title: 'Title' },
    { id: 'price', title: 'Price' },
    { id: 'noOfReviews', title: 'Number of Reviews' },
    { id: 'location', title: 'Location' },
  ],
});

async function saveToCsv(data) {
  await csvWriter.writeRecords(data);
}

(async () => {
  const products = await crawlAll('watches for men');
  await saveToCsv(products);
  console.log(`Saved ${products.length} products to ecommerce_products.csv`);
})();

Le tableau d'en-têtes fait correspondre chaque identifiant de champ à un titre de colonne lisible, de sorte que le CSV résultant s'ouvre proprement dans Excel ou Google Sheets avec les colonnes étiquetées. Pour persister les mêmes enregistrements dans une base de données, les objets structurés correspondent directement aux lignes de table : gardez les mêmes noms de champs comme colonnes et insérez une ligne par produit. La forme des données ne change pas, seule la destination change.

Passer à l'échelle et rester non bloqué

Même avec le rendu géré, les plateformes de vente au détail surveillent le trafic à l'allure d'un scraper. Quelques habitudes maintiennent une exécution saine, et elles s'appliquent à toute cible commerciale difficile.

• Cadencez vos requêtes. Marteler les pages dans une boucle serrée est le moyen le plus rapide d'être limité. Espacez les requêtes et variez vos requêtes plutôt que de crawler un chemin à pleine vitesse.
• Misez sur la rotation. Un pool d'IP résidentielles répartit les requêtes sur de nombreuses adresses d'utilisateurs réels pour qu'aucune ne déclenche une limite de débit. La Crawling API gère cela pour vous ; si vous construisez votre propre stack, c'est la partie à bien maîtriser.
• Lisez les codes de statut. Une exécution qui commence à retourner des challenges ou des erreurs vous indique que le débit ou le niveau d'IP actuel n'est plus suffisant. Traitez cela comme un signal pour ralentir, pas comme du bruit à ignorer.
• Mettez en cache et déduplicquez. Stockez le HTML rendu ou les lignes analysées pour qu'une nouvelle exécution ne re-récupère pas les pages déjà téléchargées, ce qui maintient à la fois vos coûts et votre volume de requêtes bas.

Pour le manuel complet, voir comment scraper des sites web sans être bloqué. Si vous préférez acheminer votre propre trafic via un pool rotatif plutôt que d'utiliser l'API gérée, le Smart AI Proxy vous offre la même rotation d'IP résidentielles comme endpoint proxy. Le pattern de récupération puis d'analyse dans ce guide s'applique à la plupart des boutiques : seuls les sélecteurs et le paramètre de pagination changent d'un site à l'autre.

Est-il légal de crawler des sites e-commerce ?

La légalité du crawling d'un site e-commerce dépend des conditions d'utilisation de ce site, de votre juridiction et de ce que vous faites des données. De nombreuses boutiques restreignent l'accès automatisé dans leurs conditions, de sorte que le crawling peut aller à l'encontre de ces conditions, quelle que soit la prudence de vos outils. Aucun du code ici ne change cela ; il fait simplement fonctionner la partie technique. Lisez les conditions d'utilisation du site et son robots.txt, et traitez les deux comme la limite de ce que vous collectez et à quelle fréquence vous le demandez.

Quelques lignes à respecter. Collectez uniquement des données produit publiques : le titre, le prix, la note, la disponibilité, l'image et le lien produit que n'importe qui peut voir sans compte. Gardez votre volume de requêtes suffisamment bas pour ne pas surcharger les serveurs du site, et respectez toute attente de débit qu'il indique. Restez à l'écart de tout ce qui se trouve derrière une connexion, y compris les pages de compte, les paniers et l'historique des commandes, et évitez les données personnelles liées à des acheteurs ou vendeurs identifiables. Ne redistribuez pas les médias protégés par le droit d'auteur tels que les photos de produits ou les descriptions de manières que le site n'a pas autorisées ; réutiliser ceux-ci commercialement est une question distincte de la lecture d'un prix public.

Pour un usage en volume ou commercial, préférez un canal officiel lorsqu'il en existe un. De nombreux grands détaillants et places de marché publient des API officielles de produits ou d'affiliation qui vous donnent une structure garantie et des droits d'utilisation clairs, et ce sont les bons outils quand vous avez besoin de gros volumes ou d'une réutilisation commerciale. Ce guide est délibérément limité aux pages de fiches et de recherche publiques car c'est la limite qui rend le travail défendable. Il ne couvre pas ce qui se trouve derrière l'authentification, les données personnelles, les informations de compte ou de commande privées, ni toute tentative de contourner une connexion. Si votre projet nécessite plus que des fiches publiques, une API officielle ou un accord sur les données est la bonne voie, pas un scraper plus astucieux.

Foire aux questions

Quelle est la différence entre le web crawling et le web scraping ?

Le web crawling est le processus de navigation systématique sur un site et de collecte de données sur de nombreuses pages, en suivant les liens et la pagination au fur et à mesure. Le web scraping est l'extraction de champs spécifiques, comme le prix ou le titre, depuis une page donnée. En pratique, les deux fonctionnent ensemble : le crawler parcourt les pages de fiches, et l'étape de scraping extrait les champs structurés de chacune. Le script dans ce guide fait les deux.

Pourquoi une requête simple retourne-t-elle des données incomplètes depuis les sites e-commerce ?

Parce que la plupart des boutiques rendent les prix, les notes et la majeure partie de chaque carte produit côté client avec JavaScript et AJAX. Le HTML initial est partiel jusqu'à ce que les scripts de la page s'exécutent dans un navigateur, donc une requête HTTP brute retourne le statut 200 avec des champs clés manquants ou vides. Pour obtenir une page complète, vous devez d'abord la rendre, ce que le token JS de la Crawling API gère pour vous.

Ai-je besoin du token normal ou du token JS ?

Utilisez le token JS pour les pages de recherche et de fiches e-commerce. Le token normal récupère le HTML statique, qui sur une boutique rendue côté client peut revenir avec des prix ou des notes manquants. Le token JS rend la page dans un vrai navigateur avant de retourner le HTML, et vous permet de passer des paramètres d'attente comme ajax_wait et page_wait pour que les cartes chargées dynamiquement soient présentes quand Cheerio les analyse.

Mes sélecteurs retournent null. Qu'est-ce qui a changé ?

Presque certainement le balisage du site. Les noms de classes hachés que les outils de build des boutiques génèrent changent sans préavis, et ils diffèrent entre les pages de recherche et les pages produit individuelles, donc des sélecteurs qui fonctionnaient le mois dernier peuvent se casser. Réinspectez une page en direct dans les outils de développement de votre navigateur et mettez à jour les sélecteurs, en vous appuyant sur des attributs stables comme data-qa-locator lorsqu'ils existent. La maintenance périodique des sélecteurs est normale pour tout scraper en production.

Comment stocker les données produit scrapées ?

Pour un résultat rapide, écrivez les enregistrements dans un fichier CSV avec csv-writer pour que les données s'ouvrent dans n'importe quel tableur. Pour des exécutions répétées ou plus importantes, insérez les mêmes objets structurés dans une base de données, en gardant vos noms de champs comme colonnes et une ligne par produit. Dans les deux cas, la forme de l'enregistrement reste la même ; seule la destination change, vous pouvez donc commencer avec CSV et passer à une base de données plus tard sans réécrire l'analyseur.

Comment éviter d'être bloqué lors du crawling de sites e-commerce ?

Gardez votre débit de requêtes par IP bas, variez vos requêtes au lieu de boucler sur un chemin, et acheminez via des IP résidentielles rotatives pour qu'aucune adresse ne déclenche une limite de débit. La Crawling API gère la rotation et un pool d'IP de confiance pour vous ; si vous construisez votre propre stack, c'est la partie dans laquelle investir. Surveillez les codes de statut et ralentissez quand vous commencez à voir des challenges plutôt que de les forcer.

HR

Hassan Rehan

Ingénieur logiciel · Crawlbase

Ingénieur logiciel chez Crawlbase, il rédige des guides pratiques sur les proxys rotatifs, le scraping et les détails concrets de l'intégration de proxys dans du vrai code.