Smart Checkout Abandonment Detector
Analyze user behavior signals to predict checkout abandonment risk.
Awaiting Session Data
Go to the 'Session Configuration' tab to input user behavior data and run the analysis.
Abandonment Risk Score
0
LOW
Risk Factor Contribution
Summary & Recommendations
Calm
${summary}
Recommendation:
`;
if (riskFactorChart) riskFactorChart.destroy();
riskFactorChart = new Chart(document.getElementById('risk-factor-chart').getContext('2d'), {
type: 'doughnut',
data: {
labels: ['Time on Page', 'Mouse Behavior', 'Form Hesitation', 'Promo Field'],
datasets: [{ data: [factors.time, factors.mouse, factors.form, factors.promo], backgroundColor: ['#60a5fa', '#fbbf24', '#f87171', '#a78bfa'] }]
},
options: { responsive: true, plugins: { legend: { position: 'top' } } }
});
};
// --- EVENT HANDLERS ---
const handleNavClick = (isNext) => showTab(isNext ? 'config' : 'dashboard');
const generatePDF = () => {
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: 'p', 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('Checkout Abandonment Risk Report', pdfWidth / 2, 15, { align: 'center' });
pdf.addImage(imgData, 'PNG', 10, 25, imgWidth, imgHeight);
pdf.save('checkout-abandonment-report.pdf');
pdfBtnContainer.style.display = 'block';
}).catch(err => {
console.error("Error generating PDF:", err);
pdfBtnContainer.style.display = 'block';
});
};
// --- ATTACH LISTENERS ---
prevBtn.addEventListener('click', () => handleNavClick(false));
nextBtn.addEventListener('click', () => handleNavClick(true));
tabButtons.dashboard.addEventListener('click', () => showTab('dashboard'));
tabButtons.config.addEventListener('click', () => showTab('config'));
analyzeBtn.addEventListener('click', analyzeSession);
mouseMovementSlider.addEventListener('input', updateMouseMovementLabel);
downloadPdfBtn.addEventListener('click', generatePDF);
// --- INITIALIZATION ---
updateMouseMovementLabel();
});
${recommendation}