Multi-Channel Affiliate Link Management System
Generate, track, and analyze affiliate links across all your marketing channels.
Sales by Channel
Sales by Affiliate
Top Performing Links
| Product | Affiliate / Channel | Sales ($) | EPC ($) |
|---|
Generate New Affiliate Link
All Generated Links
| Link Details | Clicks | Conversions | Sales ($) | Actions |
|---|
Manage Affiliates
Manage Channels
${totalLinks}
Total Clicks
${totalClicks.toLocaleString()}
Conversions
${totalConversions.toLocaleString()}
Total Sales
$${totalSales.toLocaleString(undefined, {minimumFractionDigits:2})}
Conv. Rate
${convRate.toFixed(2)}%
EPC
$${epc.toFixed(2)}
${link.product}
${link.affiliate} / ${link.channel}
${item}
`;
document.getElementById('affiliates-list').innerHTML = state.affiliates.map(a => createListItem(a, 'affiliate')).join('');
document.getElementById('channels-list').innerHTML = state.channels.map(c => createListItem(c, 'channel')).join('');
};
// --- EVENT HANDLERS ---
const handleTabClick = (tabName) => {
state.activeTab = tabName;
renderAll();
};
const handleNavClick = (direction) => {
const currentIndex = TABS.indexOf(state.activeTab);
const newIndex = direction === 'next' ? currentIndex + 1 : currentIndex - 1;
if (newIndex >= 0 && newIndex < TABS.length) {
state.activeTab = TABS[newIndex];
renderAll();
}
};
const handleGenerateLink = () => {
const product = document.getElementById('product-name').value.trim();
const baseUrl = document.getElementById('base-url').value.trim();
const affiliate = document.getElementById('select-affiliate').value;
const channel = document.getElementById('select-channel').value;
if (!product || !baseUrl || !affiliate || !channel) {
alert("Please fill all fields to generate a link.");
return;
}
const newLink = {
id: Date.now(),
product, baseUrl, affiliate, channel, clicks: 0, conversions: 0, sales: 0
};
state.links.push(newLink);
renderLinksManagement();
document.getElementById('product-name').value = '';
document.getElementById('base-url').value = '';
};
const handleLinkTableInteraction = e => {
const target = e.target;
// Update data
if (target.matches('.table-input')) {
const id = parseInt(target.dataset.id);
const field = target.dataset.field;
const value = parseFloat(target.value) || 0;
const link = state.links.find(l => l.id === id);
if(link) link[field] = value;
// Note: No re-render here to avoid losing focus. Data is updated in state.
return;
}
// Delete button
if(target.closest('.delete-link-btn')) {
const id = parseInt(target.closest('.delete-link-btn').dataset.id);
state.links = state.links.filter(l => l.id !== id);
renderLinksManagement();
}
// Copy button
if(target.closest('.copy-link-btn')) {
const linkToCopy = target.closest('.copy-link-btn').dataset.link;
navigator.clipboard.writeText(linkToCopy).then(() => {
const originalText = target.closest('.copy-link-btn').innerHTML;
target.closest('.copy-link-btn').innerHTML = ``;
setTimeout(() => { target.closest('.copy-link-btn').innerHTML = originalText; }, 1500);
});
}
};
const handleAddConfigItem = (type) => {
const input = document.getElementById(type === 'affiliate' ? 'new-affiliate-name' : 'new-channel-name');
const name = input.value.trim();
if (name) {
const list = type === 'affiliate' ? state.affiliates : state.channels;
if (!list.includes(name)) {
list.push(name);
input.value = '';
renderConfiguration();
} else {
alert(`${name} already exists.`);
}
}
};
const handleDeleteConfigItem = (e) => {
const btn = e.target.closest('.delete-config-btn');
if (btn) {
const {type, name} = btn.dataset;
if (type === 'affiliate') {
state.affiliates = state.affiliates.filter(a => a !== name);
} else {
state.channels = state.channels.filter(c => c !== name);
}
renderConfiguration();
}
};
const generatePDF = () => {
const { jsPDF } = window.jspdf;
const pdfContent = document.getElementById('pdf-content');
const pdfBtnContainer = document.getElementById('pdf-button-container');
if (!pdfContent || !pdfBtnContainer) return;
pdfBtnContainer.style.display = 'none';
html2canvas(pdfContent, { scale: 2, useCORS: true }).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF({ orientation: 'l', unit: 'mm', format: 'a4' });
const pdfWidth = pdf.internal.pageSize.getWidth();
const imgWidth = pdfWidth - 20;
const imgHeight = (canvas.height * imgWidth) / canvas.width;
pdf.setFontSize(22);
pdf.setFont('helvetica', 'bold');
pdf.text('Affiliate Performance Dashboard', pdfWidth / 2, 15, { align: 'center' });
pdf.addImage(imgData, 'PNG', 10, 25, imgWidth, imgHeight);
pdf.save('affiliate-performance-dashboard.pdf');
pdfBtnContainer.style.display = 'block';
}).catch(err => {
console.error("Error generating PDF:", err);
pdfBtnContainer.style.display = 'block';
});
};
// --- ATTACH EVENT LISTENERS ---
Object.keys(tabButtons).forEach(key => tabButtons[key].addEventListener('click', () => handleTabClick(key)));
prevBtn.addEventListener('click', () => handleNavClick('prev'));
nextBtn.addEventListener('click', () => handleNavClick('next'));
document.getElementById('generate-link-btn').addEventListener('click', handleGenerateLink);
document.getElementById('links-table-body').addEventListener('click', handleLinkTableInteraction);
document.getElementById('links-table-body').addEventListener('change', handleLinkTableInteraction);
document.getElementById('add-affiliate-btn').addEventListener('click', () => handleAddConfigItem('affiliate'));
document.getElementById('add-channel-btn').addEventListener('click', () => handleAddConfigItem('channel'));
document.getElementById('config').addEventListener('click', handleDeleteConfigItem);
downloadPdfBtn.addEventListener('click', generatePDF);
// --- INITIAL RENDER ---
renderAll();
});