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:
48
index.html
48
index.html
@@ -18,6 +18,54 @@
|
||||
gtag('js', new Date());
|
||||
|
||||
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>
|
||||
<body>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user