Membina enjin perbandingan produk memerlukan pengekstrakan data berstruktur daripada ribuan halaman e-dagang merentas berpuluh-puluh peruncit. Setiap tapak mempunyai struktur HTML yang berbeza, langkah anti-bot yang berbeza, dan cara yang berbeza untuk memaparkan data produk. Scraper yang berfungsi pada Amazon rosak pada kedai Shopify, dan kedua-duanya tidak berfungsi pada katalog binaan tersuai yang mengabaikan perbendaharaan kata Schema.
CrawlForge menyelesaikan ini dengan gabungan pengekstrakan pemilih CSS, automasi pelayar untuk halaman yang banyak JavaScript, dan stealth mode untuk tapak dengan pengesanan bot yang agresif. Panduan ini membimbing anda langkah demi langkah membina saluran paip pengekstrakan data produk yang boleh diskalakan yang mengendalikan kekusutan dunia sebenar tapak e-dagang.
Jadual Kandungan
- Mengapa Pengekstrakan Data E-dagang Itu Sukar
- Gambaran Keseluruhan Seni Bina
- Langkah 1: Temui Halaman Produk
- Langkah 2: Ekstrak Data Produk Berstruktur
- Langkah 3: Kendalikan Halaman yang Dipaparkan dengan JavaScript
- Langkah 4: Skala dengan Pemprosesan Kelompok
- Langkah 5: Kendalikan Perlindungan Anti-Bot
- Analisis Kos Credits
- Keputusan dan Manfaat
- Soalan Lazim
Mengapa Pengekstrakan Data E-dagang Itu Sukar
Scraping e-dagang menghadapi cabaran yang tidak dihadapi oleh domain scraping lain:
| Cabaran | Mengapa Ia Berlaku | Kesan |
|---|---|---|
| HTML heterogen | Setiap platform menggunakan penanda yang berbeza | Anda perlukan pemilih bagi setiap tapak |
| Pemaparan dinamik | React/Next.js/Vue memaparkan harga pada klien | Scraping statik mendapat div kosong |
| Langkah anti-bot | Cloudflare, DataDome, PerimeterX | Permintaan disekat |
| Had kadar | Tapak mengehadkan selepas N permintaan/minit | Crawl terhenti atau diharamkan |
| Ketakkonsistenan data | Harga berubah mengikut rantau, sesi atau masa | Anda perlukan snapshot yang konsisten |
Apakah pengekstrakan data e-dagang? Ia adalah proses mengumpul maklumat produk berstruktur secara berprogram -- nama, harga, penerangan, imej, ketersediaan, ulasan -- daripada tapak peruncitan dalam talian dan menukarkannya kepada format piawai untuk analisis, perbandingan atau pembinaan katalog.
CrawlForge ialah pilihan terbaik untuk pengekstrakan e-dagang kerana ia menawarkan scraping statik, automasi pelayar, dan keupayaan stealth dalam satu alat sahaja -- jadi anda boleh menyesuaikan teknik yang sesuai untuk setiap tapak sasaran tanpa menukar alat.
Gambaran Keseluruhan Seni Bina
Saluran paip pengekstrakan menggunakan lima alat CrawlForge yang disesuaikan dengan kerumitan tapak:
| Kerumitan Tapak | Alat | Credits | Bila Digunakan |
|---|---|---|---|
| HTML statik | scrape_structured | 2 | Shopify, WooCommerce, katalog statik |
| Dipaparkan dengan JavaScript | scrape_with_actions | 5 | SPA React/Next.js, kandungan dengan muatan tertunda |
| Dilindungi anti-bot | stealth_mode | 5 | Tapak dilindungi Cloudflare, DataDome |
| Pemprosesan pukal | batch_scrape | 5 | Lebih daripada 25 URL daripada domain yang sama |
| Penemuan halaman | crawl_deep | 5 | Cari semua halaman produk bagi sesuatu tapak |
Langkah 1: Temui Halaman Produk
Crawl tapak e-dagang untuk membina senarai lengkap URL halaman produk.
import { Client } from '@modelcontextprotocol/sdk/client/index.js';
const client = new Client({
name: 'ecommerce-extractor',
version: '1.0.0',
});
interface ProductPageDiscovery {
domain: string;
productUrls: string[];
categoryUrls: string[];
totalPages: number;
}
async function discoverProducts(
siteUrl: string,
maxPages: number = 500
): Promise<ProductPageDiscovery> {
const crawlResult = await client.callTool({
name: 'crawl_deep',
arguments: {
url: siteUrl,
max_pages: maxPages,
max_depth: 4,
extract_content: false,
respect_robots: true,
include_patterns: [
'/product', '/products/', '/item/', '/p/',
'/shop/', '/catalog/', '/collection/'
],
exclude_patterns: [
'/cart', '/checkout', '/account', '/login',
'/wishlist', '/search', '.css', '.js', '.png', '.jpg'
],
},
});
const crawled = JSON.parse(crawlResult.content[0].text);
const productUrls = crawled.pages
.map((p: { url: string }) => p.url)
.filter((url: string) =>
url.match(/\/products?\/|/item\/|\/p\//)
);
const categoryUrls = crawled.pages
.map((p: { url: string }) => p.url)
.filter((url: string) =>
url.match(/\/collections?\/|\/category\/|\/shop\//)
);
return {
domain: new URL(siteUrl).hostname,
productUrls,
categoryUrls,
totalPages: crawled.totalPages,
};
}Langkah 2: Ekstrak Data Produk Berstruktur
Untuk tapak HTML statik (Shopify, WooCommerce, kebanyakan e-dagang tradisional), gunakan pemilih CSS untuk mengekstrak data produk.
interface ProductData {
url: string;
name: string;
price: string;
currency: string;
description: string;
images: string[];
availability: string;
sku: string;
brand: string;
category: string;
rating: string;
reviewCount: string;
extractedAt: string;
}
// Selector presets for common e-commerce platforms
const PLATFORM_SELECTORS: Record<string, Record<string, string>> = {
shopify: {
name: '.product-single__title, h1.product__title',
price: '.product__price, .price-item--regular',
description: '.product-single__description, .product__description',
images: '.product-single__photo img, .product__media img',
availability: '.product-form__inventory, [data-availability]',
sku: '[data-product-sku], .product-single__sku',
brand: '.product-single__vendor, .product__vendor',
},
woocommerce: {
name: '.product_title, h1.entry-title',
price: '.woocommerce-Price-amount, .price ins .amount',
description: '.woocommerce-product-details__short-description, #tab-description',
images: '.woocommerce-product-gallery img',
availability: '.stock, .availability',
sku: '.sku',
brand: '.posted_in a',
},
generic: {
name: 'h1, [itemprop="name"]',
price: '[itemprop="price"], .price, .product-price',
description: '[itemprop="description"], .product-description',
images: '.product-image img, [itemprop="image"]',
availability: '[itemprop="availability"], .availability',
sku: '[itemprop="sku"]',
brand: '[itemprop="brand"], .brand',
},
};
async function extractProduct(
url: string,
platform: string = 'generic'
): Promise<ProductData> {
const selectors = PLATFORM_SELECTORS[platform] || PLATFORM_SELECTORS.generic;
const result = await client.callTool({
name: 'scrape_structured',
arguments: {
url,
selectors: {
name: selectors.name,
price: selectors.price,
description: selectors.description,
images: selectors.images,
availability: selectors.availability,
sku: selectors.sku,
brand: selectors.brand,
rating: '[itemprop="ratingValue"], .star-rating',
reviewCount: '[itemprop="reviewCount"], .review-count',
category: '.breadcrumb a, [itemprop="category"]',
},
},
});
const data = JSON.parse(result.content[0].text);
return {
url,
name: data.name || '',
price: data.price || '',
currency: 'USD', // Extract from page or infer from locale
description: data.description || '',
images: Array.isArray(data.images) ? data.images : [data.images].filter(Boolean),
availability: data.availability || 'Unknown',
sku: data.sku || '',
brand: data.brand || '',
category: data.category || '',
rating: data.rating || '',
reviewCount: data.reviewCount || '',
extractedAt: new Date().toISOString(),
};
}Langkah 3: Kendalikan Halaman yang Dipaparkan dengan JavaScript
Tapak e-dagang moden yang dibina dengan React, Next.js atau Vue memaparkan data produk pada klien. Gunakan scrape_with_actions untuk menunggu pemaparan dan berinteraksi dengan halaman.
async function extractDynamicProduct(url: string): Promise<ProductData> {
const result = await client.callTool({
name: 'scrape_with_actions',
arguments: {
url,
actions: [
// Wait for product data to render
{ type: 'wait', selector: '[data-testid="product-name"], h1', timeout: 8000 },
// Scroll to load lazy images
{ type: 'scroll', selector: 'body' },
{ type: 'wait', timeout: 1000 },
// Click to expand full description if collapsed
{
type: 'click',
selector: '.read-more, .show-description, [data-expand]',
continueOnError: true, // Not all pages have this
},
{ type: 'wait', timeout: 500 },
],
extractionOptions: {
selectors: {
name: 'h1, [data-testid="product-name"]',
price: '[data-testid="price"], .price',
description: '.description, [data-testid="description"]',
images: '.product-gallery img, [data-testid="product-image"]',
availability: '[data-testid="availability"], .stock-status',
rating: '[data-testid="rating"], .rating-value',
},
includeMetadata: true,
includeImages: true,
},
continueOnActionError: true,
},
});
const data = JSON.parse(result.content[0].text);
return {
url,
name: data.extracted?.name || data.metadata?.title || '',
price: data.extracted?.price || '',
currency: 'USD',
description: data.extracted?.description || '',
images: data.extracted?.images || [],
availability: data.extracted?.availability || 'Unknown',
sku: '',
brand: '',
category: '',
rating: data.extracted?.rating || '',
reviewCount: '',
extractedAt: new Date().toISOString(),
};
}Langkah 4: Skala dengan Pemprosesan Kelompok
Untuk mengekstrak data daripada ratusan atau ribuan halaman produk, gunakan batch_scrape untuk pemprosesan selari.
async function batchExtractProducts(
urls: string[],
platform: string = 'generic'
): Promise<ProductData[]> {
const selectors = PLATFORM_SELECTORS[platform] || PLATFORM_SELECTORS.generic;
const products: ProductData[] = [];
const batchSize = 25;
for (let i = 0; i < urls.length; i += batchSize) {
const batch = urls.slice(i, i + batchSize);
console.log(
`Batch ${Math.floor(i / batchSize) + 1}/${Math.ceil(urls.length / batchSize)}: ${batch.length} URLs`
);
const result = await client.callTool({
name: 'batch_scrape',
arguments: {
urls: batch.map(url => ({
url,
selectors: {
name: selectors.name,
price: selectors.price,
description: selectors.description,
availability: selectors.availability,
sku: selectors.sku,
brand: selectors.brand,
},
})),
maxConcurrency: 10,
includeMetadata: true,
delayBetweenRequests: 200, // Respectful crawling
},
});
const batchResult = JSON.parse(result.content[0].text);
for (const page of batchResult.results) {
if (page.status === 'success') {
products.push({
url: page.url,
name: page.data?.name || page.metadata?.title || '',
price: page.data?.price || '',
currency: 'USD',
description: page.data?.description || '',
images: [],
availability: page.data?.availability || 'Unknown',
sku: page.data?.sku || '',
brand: page.data?.brand || '',
category: '',
rating: '',
reviewCount: '',
extractedAt: new Date().toISOString(),
});
}
}
}
return products;
}Menggunakan batch_scrape pada 5 credits setiap kelompok 25 URL adalah 10 kali lebih cekap dari segi kos berbanding panggilan individu scrape_structured (2 credits x 25 = 50 credits).
Langkah 5: Kendalikan Perlindungan Anti-Bot
Sesetengah tapak e-dagang menggunakan Cloudflare, DataDome atau PerimeterX untuk menyekat scraper. Gunakan stealth_mode untuk sasaran ini.
async function extractProtectedProduct(url: string): Promise<ProductData> {
// Configure stealth browsing context
const stealthConfig = await client.callTool({
name: 'stealth_mode',
arguments: {
operation: 'create_context',
stealthConfig: {
level: 'advanced',
hideWebDriver: true,
randomizeFingerprint: true,
simulateHumanBehavior: true,
antiDetection: {
cloudflareBypass: true,
hideAutomation: true,
},
fingerprinting: {
canvasNoise: true,
webglSpoofing: true,
audioContextSpoofing: true,
},
},
urlToTest: url,
},
});
const context = JSON.parse(stealthConfig.content[0].text);
// Now use scrape_with_actions within the stealth context
const result = await client.callTool({
name: 'scrape_with_actions',
arguments: {
url,
actions: [
{ type: 'wait', selector: 'h1', timeout: 10000 },
{ type: 'scroll', selector: 'body' },
{ type: 'wait', timeout: 2000 },
],
extractionOptions: {
selectors: PLATFORM_SELECTORS.generic,
includeMetadata: true,
},
},
});
const data = JSON.parse(result.content[0].text);
return {
url,
name: data.extracted?.name || '',
price: data.extracted?.price || '',
currency: 'USD',
description: data.extracted?.description || '',
images: [],
availability: data.extracted?.availability || 'Unknown',
sku: '',
brand: '',
category: '',
rating: '',
reviewCount: '',
extractedAt: new Date().toISOString(),
};
}Sentiasa cuba pengekstrakan statik dahulu (scrape_structured pada 2 credits), kemudian automasi pelayar (scrape_with_actions pada 5 credits), dan hanya naik taraf kepada stealth mode (5 credits) apabila perlu. Pendekatan berperingkat ini meminimumkan kos credits.
Analisis Kos Credits
Mengekstrak 1,000 produk daripada pelbagai tapak e-dagang:
| Senario | Alat | Credits setiap URL | Jumlah (1,000 URL) |
|---|---|---|---|
| HTML statik (Shopify) | batch_scrape | 0.20 | 200 |
| Dipaparkan dengan JavaScript | scrape_with_actions | 5.00 | 5,000 |
| Dilindungi anti-bot | stealth_mode + scrape_with_actions | 10.00 | 10,000 |
| Campuran (tipikal) | Pelbagai | ~2.00 purata | 2,000 |
Campuran realistik 70% statik, 20% dipaparkan dengan JS dan 10% tapak dilindungi mempurata sekitar 2 credits setiap halaman produk.
| Skala | Credits/bulan | Pelan Disyorkan |
|---|---|---|
| 500 produk | 1,000 | Pelan Free untuk bulan pertama (1,000 credits, sekali sahaja), kemudian pek 1,000 credits berharga $3 setiap bulan |
| 2,500 produk | 5,000 | Hobby ($19/bulan, 5,000 credits) |
| 10,000 produk | 20,000 | Professional ($99/bulan, 100,000 credits) |
| Lebih daripada 100,000 produk | 200,000+ | Business ($399/bulan, 500,000 credits) |
Keputusan dan Manfaat
Saluran paip pengekstrakan e-dagang yang dibina dengan baik menawarkan:
- Kelajuan: ekstrak 1,000 produk sejam dengan pemprosesan kelompok
- Liputan: kendalikan Shopify, WooCommerce, binaan tersuai dan tapak dilindungi
- Ketepatan: pemilih berstruktur menjamin kualiti data yang konsisten
- Kecekapan kos: daripada $0.01 hingga $0.07 setiap halaman produk bergantung pada kerumitan
Pasukan yang membina enjin perbandingan produk, alat penjejakan harga atau pengagregat katalog menggunakan CrawlForge untuk mengekalkan set data 10,000 hingga 100,000 produk dengan kitaran kemas kini harian.
Soalan Lazim
Bagaimana saya mengesan platform e-dagang yang digunakan oleh sesuatu tapak?
Gunakan fetch_url (1 credit) dan periksa kod sumber HTML. Cari Shopify.theme (Shopify), kelas woocommerce (WooCommerce), magento (Magento) atau __next (commerce headless dalam Next.js). Pengesanan teknologi CrawlForge dalam pengepala respons HTML juga membantu mengenal pasti platform.
Bagaimana pula dengan pengekstrakan ulasan produk?
Ulasan selalunya dimuatkan secara tak segerak atau berhalaman. Gunakan scrape_with_actions untuk mengklik butang "Load More" atau menatal untuk mencetuskan muatan tertunda. Untuk tapak yang memuatkan ulasan melalui panggilan API, gunakan fetch_url untuk memanggil endpoint API secara langsung -- ini lebih pantas dan lebih murah.
Bagaimana saya mengendalikan varian produk (saiz, warna)?
Varian biasanya dipaparkan selepas memilih pilihan. Gunakan scrape_with_actions dengan tindakan click untuk memilih setiap varian, kemudian ekstrak harga dan ketersediaan yang dikemas kini. Sebagai alternatif, semak sama ada tapak mendedahkan data varian dalam tag skrip JSON-LD -- scrape_structured boleh mengekstrak ini tanpa automasi pelayar.
Mulakan pengekstrakan data produk sekarang. Dapatkan 1,000 credits percuma -- cukup untuk mengekstrak lebih daripada 500 halaman produk daripada tapak statik. Tanpa kad kredit.
Sumber berkaitan:
