Building a Competitor Analysis Tool with Brand Data
What We Are Building
In this tutorial, we will build a simple competitor analysis tool that takes a list of company URLs and generates a side-by-side comparison of their brand elements: logos, colors, fonts, and social presence.
This is a practical tool that agencies and marketing teams use daily. By the end, you will have a working prototype you can extend.
Prerequisites
- A Fetching Company API key (sign up free)
- Node.js 18+ installed
- Basic familiarity with JavaScript
Step 1: Set Up the Project
mkdir brand-tracker && cd brand-tracker
npm init -y
npm install node-fetch
Create a file called tracker.js:
const API_KEY = process.env.FETCHING_API_KEY;
const BASE_URL = 'https://api.fetching.company/v1';
async function analyzeBrand(url) {
const response = await fetch(`${BASE_URL}/analyze`, {
method: 'POST',
headers: {
'Authorization': `Bearer ${API_KEY}`,
'Content-Type': 'application/json',
},
body: JSON.stringify({ url }),
});
if (!response.ok) {
throw new Error(`Failed to analyze ${url}: ${response.status}`);
}
return response.json();
}
Step 2: Analyze Multiple Competitors
async function compareCompetitors(urls) {
const results = await Promise.allSettled(
urls.map(url => analyzeBrand(url))
);
return results
.filter(r => r.status === 'fulfilled')
.map(r => r.value);
}
const competitors = [
'https://stripe.com',
'https://square.com',
'https://paypal.com',
];
const data = await compareCompetitors(competitors);
Step 3: Generate the Comparison Report
function generateReport(brands) {
console.log('\n=== Competitor Brand Analysis ===\n');
for (const brand of brands) {
console.log(`--- ${brand.domain} ---`);
console.log(`Primary Color: ${brand.colors?.primary || 'N/A'}`);
console.log(`Heading Font: ${brand.fonts?.heading || 'N/A'}`);
console.log(`Logo (SVG): ${brand.logos?.[0]?.url || 'N/A'}`);
console.log(`Social Profiles: ${brand.socials?.length || 0}`);
console.log('');
}
}
generateReport(data);
Step 4: Add Visual HTML Output
For a more visual report, generate an HTML file:
function generateHTML(brands) {
const cards = brands.map(brand => `
<div style="border: 1px solid #e5e7eb; border-radius: 12px;
padding: 24px; margin: 12px 0;">
<div style="display: flex; align-items: center; gap: 16px;">
${brand.logos?.[0]?.url
? `<img src="${brand.logos[0].url}" width="48" height="48">`
: ''}
<h2>${brand.domain}</h2>
</div>
<div style="display: flex; gap: 8px; margin-top: 16px;">
${Object.entries(brand.colors || {}).map(([key, val]) => `
<div style="text-align: center;">
<div style="width: 40px; height: 40px; border-radius: 8px;
background: ${val};"></div>
<small>${key}</small>
</div>
`).join('')}
</div>
</div>
`).join('');
return `<!DOCTYPE html>
<html><head><title>Brand Comparison</title></head>
<body style="max-width: 800px; margin: 0 auto; padding: 40px;
font-family: system-ui;">
<h1>Competitor Brand Analysis</h1>
${cards}
</body></html>`;
}
Step 5: Track Changes Over Time
For ongoing competitive intelligence, store results in a JSON file and compare on each run:
import { readFileSync, writeFileSync } from 'fs';
function detectChanges(current, previous) {
const changes = [];
if (current.colors?.primary !== previous.colors?.primary) {
changes.push(`Primary color changed from ${previous.colors.primary} to ${current.colors.primary}`);
}
if (current.fonts?.heading !== previous.fonts?.heading) {
changes.push(`Heading font changed from ${previous.fonts.heading} to ${current.fonts.heading}`);
}
return changes;
}
Extending the Tool
From here, you can add features like:
- Scheduled runs via cron to detect brand changes automatically
- Email alerts when a competitor updates their visual identity
- Database storage for historical comparison
- Dashboard UI using React or Vue for interactive exploration
Credit Usage
Each brand analysis uses 1 credit. Analyzing 3 competitors daily costs about 90 credits per month, well within the Starter plan at 500 credits per month.
Conclusion
Brand intelligence APIs make competitive analysis scalable. Instead of manually checking competitor websites, you get structured data you can process, compare, and track programmatically. Get started with a free account to build your own competitor tracker.
