olsch01
20c7813363
- deploy.sh: Zero-downtime deployment script for HOALedgerIQ - content/: Generated content files (blog outlines, social posts, images) - marketing/: Marketing content and daily summaries - marketing-content/: Archived marketing content with research and tracking - marketing-content-2026-03-25.md: Initial marketing content archive
82 lines
2.7 KiB
Plaintext
82 lines
2.7 KiB
Plaintext
<!-- Google Analytics 4 Event Tracking for ROI Calculator -->
|
|
<!-- Add this to your homepage, after the GA4 base tag -->
|
|
|
|
<script>
|
|
// Wait for DOM to load
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
// Track calculator modal opens
|
|
const calcOpenBtn = document.querySelector('[data-calc-open], .calc-trigger, button[id*="calc"]');
|
|
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 calcForm = document.querySelector('form[id*="calc"], form[class*="calc"]');
|
|
if (calcForm) {
|
|
calcForm.addEventListener('submit', function(e) {
|
|
// Get form values (anonymized)
|
|
const homesites = this.querySelector('input[name*="home"]')?.value || 'unknown';
|
|
const propertyType = this.querySelector('select[name*="type"]')?.value || 'unknown';
|
|
|
|
gtag('event', 'calculator_submit', {
|
|
'event_category': 'conversion',
|
|
'event_label': 'ROI Calculator Submitted',
|
|
'value': 1,
|
|
'homesites': homesites,
|
|
'property_type': propertyType
|
|
});
|
|
|
|
console.log('GA4: calculator_submit event sent');
|
|
});
|
|
}
|
|
|
|
// Track API response (success/failure)
|
|
// You'll need to hook this into your existing submit handler
|
|
window.trackCalculatorSuccess = function(data) {
|
|
gtag('event', 'calculator_success', {
|
|
'event_category': 'conversion',
|
|
'event_label': 'ROI Calculator Results Shown',
|
|
'value': 1,
|
|
'annual_income': data.annual_income || 'unknown',
|
|
'reserve_funds': data.reserve_funds || 'unknown'
|
|
});
|
|
console.log('GA4: calculator_success event sent');
|
|
};
|
|
|
|
window.trackCalculatorError = function(error) {
|
|
gtag('event', 'calculator_error', {
|
|
'event_category': 'error',
|
|
'event_label': 'ROI Calculator Error',
|
|
'error_message': error?.message || 'unknown'
|
|
});
|
|
console.log('GA4: calculator_error event sent');
|
|
};
|
|
|
|
});
|
|
</script>
|
|
|
|
<!--
|
|
INSTALLATION INSTRUCTIONS:
|
|
1. Add this script AFTER your GA4 base tag (gtag.js)
|
|
2. Make sure gtag is initialized (your site already has this)
|
|
3. Test in browser console - you should see "GA4: calculator_open event sent" when clicking calculator
|
|
4. Check GA4 Realtime report to verify events are coming through
|
|
|
|
TRACKED EVENTS:
|
|
- calculator_open: User opens the calculator modal
|
|
- calculator_submit: User submits the form
|
|
- calculator_success: API returns results successfully
|
|
- calculator_error: API call fails
|
|
|
|
These will appear in GA4 under:
|
|
- Reports → Engagement → Events
|
|
- Realtime → Event count (for testing)
|
|
-->
|