feat: Add GA4 event tracking for ROI calculator

- Track calculator_open events when users open the modal
- Track calculator_submit events when users submit the form
- Track calculator_success events when results are shown
- Includes anonymized form data (homesites, reserve funds)
- Console logging for debugging

This enables tracking of calculator engagement in GA4 to measure:
- How many users open the calculator
- Form submission rate
- Success/failure rate
- User behavior patterns

Events will appear in GA4 under Engagement → Events
This commit is contained in:
2026-03-29 12:14:36 -04:00
parent e56d3f97b5
commit a725965721

View File

@@ -18,6 +18,54 @@
gtag('js', new Date()); gtag('js', new Date());
gtag('config', 'G-RTWNVXPMRF'); gtag('config', 'G-RTWNVXPMRF');
// ROI Calculator Event Tracking
document.addEventListener('DOMContentLoaded', function() {
// Track calculator modal opens
const calcOpenBtn = document.querySelector('[data-calc-open], .calc-trigger, button[id*="calc"]:not(#calcClose)');
if (calcOpenBtn) {
calcOpenBtn.addEventListener('click', function() {
gtag('event', 'calculator_open', {
'event_category': 'engagement',
'event_label': 'ROI Calculator Modal Opened'
});
console.log('✓ GA4: calculator_open event sent');
});
}
// Track form submissions
const calcSubmitBtn = document.getElementById('calcSubmit');
if (calcSubmitBtn) {
calcSubmitBtn.addEventListener('click', function() {
// Get form values (anonymized)
const homesites = document.querySelector('input[id*="homesite"]')?.value || 'unknown';
const reserveFunds = document.querySelector('input[id*="reserve"]')?.value || 'unknown';
gtag('event', 'calculator_submit', {
'event_category': 'conversion',
'event_label': 'ROI Calculator Submitted',
'value': 1,
'homesites': homesites,
'reserve_funds': reserveFunds
});
console.log('✓ GA4: calculator_submit event sent');
});
}
// Track success (hook into existing submit handler)
const originalSubmit = window.showCalcResults;
if (originalSubmit) {
window.showCalcResults = function(data) {
gtag('event', 'calculator_success', {
'event_category': 'conversion',
'event_label': 'ROI Calculator Results Shown',
'value': 1
});
console.log('✓ GA4: calculator_success event sent');
return originalSubmit(data);
};
}
});
</script> </script>
<body> <body>