Form Analytics - Open Source Site Tracking

Overview

Form analytics provides comprehensive insights into how users interact with forms on your website, including form submissions, field interactions, abandonment rates, and conversion optimization opportunities.

Features

Form Interaction Tracking

Field Focus: Track when users focus on form fields
Field Blur: Track when users leave form fields
Input Changes: Track user input modifications
Validation Events: Track form validation attempts
Submission Attempts: Track form submission attempts

Conversion Analytics

Conversion Rates: Calculate form conversion rates
Abandonment Analysis: Identify form abandonment points
Time to Complete: Track form completion time
Field Performance: Analyze individual field performance
User Journey: Track user path to form

Advanced Insights

A/B Testing: Compare different form versions
User Segmentation: Analyze by user segments
Device Analysis: Compare performance across devices
Traffic Sources: Analyze by traffic source
Geographic Analysis: Analyze by geographic location

Implementation

Form Tracking Setup

1Initialize Form Analytics

// Initialize form analytics
FormAnalytics.init({
  projectId: 'your-project-id',
  tracking: {
    fieldFocus: true,
    fieldBlur: true,
    inputChanges: true,
    validation: true,
    submissions: true,
    abandonments: true
  },
  sampling: {
    focusSampling: 1.0,      // 100% of focus events
    blurSampling: 1.0,       // 100% of blur events
    inputSampling: 0.5,      // 50% of input changes
    submissionSampling: 1.0   // 100% of submissions
  },
  privacy: {
    excludePII: true,        // Exclude personally identifiable information
    maskEmails: true,        // Mask email addresses
    maskPhoneNumbers: true   // Mask phone numbers
  }
});

2Auto-Track Forms

// Automatically track all forms
FormAnalytics.autoTrack({
  formSelector: 'form',           // CSS selector for forms
  fieldSelector: 'input, textarea, select',  // CSS selector for fields
  excludeForms: '.no-track',      // Exclude forms with this class
  includeHidden: false,          // Include hidden fields
  trackFileUploads: true          // Track file upload fields
});

3Manual Form Tracking

// Manual form tracking for custom forms
const customForm = document.getElementById('my-custom-form');
// Track form start
FormAnalytics.trackFormStart(customForm, {
  formName: 'contact-form',
  formType: 'contact',
  source: 'homepage'
});
// Track field interactions
customForm.addEventListener('focus', function(event) {
  FormAnalytics.trackFieldFocus(event.target, {
    fieldName: event.target.name,
    fieldType: event.target.type,
    fieldValue: event.target.value
  });
});
// Track form submission
customForm.addEventListener('submit', function(event) {
  FormAnalytics.trackFormSubmission(customForm, {
    success: true,
    formData: new FormData(customForm),
    submissionTime: Date.now()
  });
});

Advanced Configuration

Custom Field Tracking

// Configure custom field tracking
FormAnalytics.configureFieldTracking({
  emailFields: {
    selector: 'input[type="email"]',
    maskValue: true,
    trackLength: true,
    trackValidation: true
  },
  phoneFields: {
    selector: 'input[type="tel"]',
    maskValue: true,
    trackFormat: true,
    trackValidation: true
  },
  creditCardFields: {
    selector: 'input[data-credit-card]',
    maskValue: true,
    trackLength: false,
    trackValidation: false
  },
  passwordFields: {
    selector: 'input[type="password"]',
    maskValue: true,
    trackLength: true,
    trackValidation: true
  }
});

Data Collection

Event Tracking

Form Start Event

// Track when user starts interacting with form
function trackFormStart(form, metadata = {}) {
  const formData = {
    formId: form.id || generateFormId(form),
    formName: form.name || form.getAttribute('data-form-name'),
    formType: form.getAttribute('data-form-type'),
    pageUrl: window.location.href,
    timestamp: Date.now(),
    userAgent: navigator.userAgent,
    referrer: document.referrer,
    sessionId: getSessionId(),
    userId: getUserId(),
    ...metadata
  };
  
  FormAnalytics.track('form_start', formData);
}

Field Interaction Events

// Track field focus events
function trackFieldFocus(field, metadata = {}) {
  const fieldData = {
    formId: field.form.id || generateFormId(field.form),
    fieldName: field.name || field.getAttribute('data-field-name'),
    fieldType: field.type || field.getAttribute('type'),
    fieldId: field.id,
    fieldValue: getFieldValue(field),
    fieldIndex: getFieldIndex(field),
    timestamp: Date.now(),
    sessionId: getSessionId(),
    userId: getUserId(),
    ...metadata
  };
  
  FormAnalytics.track('field_focus', fieldData);
}
// Track field blur events
function trackFieldBlur(field, metadata = {}) {
  const fieldData = {
    formId: field.form.id || generateFormId(field.form),
    fieldName: field.name || field.getAttribute('data-field-name'),
    fieldType: field.type || field.getAttribute('type'),
    fieldValue: getFieldValue(field),
    fieldIndex: getFieldIndex(field),
    timeInField: Date.now() - field.focusTime,
    isValid: validateField(field),
    timestamp: Date.now(),
    sessionId: getSessionId(),
    userId: getUserId(),
    ...metadata
  };
  
  FormAnalytics.track('field_blur', fieldData);
}

Form Submission Events

// Track form submission events
function trackFormSubmission(form, success, metadata = {}) {
  const submissionData = {
    formId: form.id || generateFormId(form),
    formName: form.name || form.getAttribute('data-form-name'),
    formType: form.getAttribute('data-form-type'),
    success: success,
    completionTime: Date.now() - form.startTime,
    fieldCount: form.elements.length,
    filledFields: getFilledFieldCount(form),
    validatedFields: getValidatedFieldCount(form),
    errors: getFormErrors(form),
    timestamp: Date.now(),
    sessionId: getSessionId(),
    userId: getUserId(),
    ...metadata
  };
  
  FormAnalytics.track('form_submission', submissionData);
}

Data Processing

Form Performance Metrics

# Backend form analytics processing
class FormAnalyticsProcessor:
    def __init__(self, project_id):
        self.project_id = project_id
        self.form_data = []
        self.field_data = []
        self.submission_data = []
    
    def calculate_conversion_rate(self, form_id, start_date, end_date):
        """Calculate form conversion rate"""
        starts = self.get_form_starts(form_id, start_date, end_date)
        submissions = self.get_form_submissions(form_id, start_date, end_date)
        
        if len(starts) == 0:
            return 0.0
        
        return (len(submissions) / len(starts)) * 100
    
    def calculate_abandonment_rate(self, form_id, start_date, end_date):
        """Calculate form abandonment rate"""
        starts = self.get_form_starts(form_id, start_date, end_date)
        submissions = self.get_form_submissions(form_id, start_date, end_date)
        
        if len(starts) == 0:
            return 0.0
        
        return ((len(starts) - len(submissions)) / len(starts)) * 100
    
    def analyze_field_performance(self, form_id, start_date, end_date):
        """Analyze individual field performance"""
        field_data = self.get_field_data(form_id, start_date, end_date)
        
        field_analysis = {}
        for field_name, data in field_data.items():
            field_analysis[field_name] = {
                'focus_count': len(data['focuses']),
                'blur_count': len(data['blurs']),
                'input_changes': len(data['changes']),
                'validation_errors': len(data['errors']),
                'average_time_in_field': self.calculate_average_time(data['focuses'], data['blurs']),
                'completion_rate': self.calculate_field_completion_rate(data),
                'error_rate': self.calculate_field_error_rate(data)
            }
        
        return field_analysis

Analytics Dashboard

Dashboard Components

Form Overview

Form List: All tracked forms with key metrics
Conversion Rates: Overall and individual form conversion rates
Abandonment Rates: Form abandonment analysis
Performance Trends: Historical performance trends

Form Details

Field Performance: Individual field analysis
User Journey: Path users take to form
Time Analysis: Time to complete form
Error Analysis: Common validation errors

Advanced Analytics

A/B Testing

Form Variants: Compare different form versions
Statistical Significance: Calculate significance of differences
Conversion Impact: Measure impact on conversion rates
Recommendations: Get optimization recommendations

Funnel Analysis

Conversion Funnel: Visual representation of form funnel
Drop-off Points: Where users abandon the form
Optimization Opportunities: Areas for improvement
Impact Analysis: Impact of changes on funnel performance

API Endpoints

Form Analytics API

Get Form Analytics

# Get form overview
GET /api/v1/forms/analytics/{project_id}
Parameters:
- start_date: Start date for analytics
- end_date: End date for analytics
- form_id: Specific form ID (optional)
Response:
{
  "forms": [
    {
      "form_id": "contact-form",
      "form_name": "Contact Form",
      "conversion_rate": 25.5,
      "abandonment_rate": 74.5,
      "total_starts": 1000,
      "total_submissions": 255,
      "average_completion_time": 120.5
    }
  ],
  "summary": {
    "overall_conversion_rate": 22.8,
    "overall_abandonment_rate": 77.2,
    "total_forms": 5,
    "total_submissions": 1250
  }
}

Get Field Analytics

# Get field performance data
GET /api/v1/forms/fields/{form_id}/analytics
Parameters:
- start_date: Start date for analytics
- end_date: End date for analytics
Response:
{
  "fields": [
    {
      "field_name": "email",
      "field_type": "email",
      "focus_count": 800,
      "completion_rate": 95.5,
      "error_rate": 8.2,
      "average_time_in_field": 2.5,
      "validation_errors": 65
    }
  ],
  "summary": {
    "total_fields": 5,
    "average_completion_rate": 85.2,
    "average_error_rate": 12.8
  }
}

Configuration API

Update Form Configuration

# Update form tracking configuration
PUT /api/v1/forms/config/{project_id}
{
  "tracking": {
    "field_focus": true,
    "field_blur": true,
    "input_changes": true,
    "validation": true,
    "submissions": true
  },
  "privacy": {
    "exclude_pii": true,
    "mask_emails": true,
    "mask_phone_numbers": true,
    "mask_credit_cards": true
  },
  "sampling": {
    "focus_sampling": 1.0,
    "blur_sampling": 1.0,
    "input_sampling": 0.5,
    "submission_sampling": 1.0
  }
}

Best Practices

Form Optimization

Design Best Practices

Keep Forms Simple: Minimize form fields
Clear Labels: Use clear and descriptive labels
Progressive Disclosure: Show fields progressively
Smart Defaults: Use intelligent default values
Real-time Validation: Provide immediate feedback

Performance Optimization

Minimize Tracking: Track only essential events
Batch Events: Send events in batches
Debounce Events: Debounce rapid events
Optimize Data: Minimize data payload
Use Web Workers: Process data in background

Privacy and Compliance

Data Protection

Exclude PII: Exclude personally identifiable information
Mask Sensitive Data: Mask sensitive field values
User Consent: Obtain user consent for tracking
Data Retention: Implement data retention policies
GDPR Compliance: Ensure GDPR compliance

Security Considerations

Secure Transmission: Use HTTPS for data transmission
Data Encryption: Encrypt sensitive data
Access Control: Implement proper access controls
Audit Logging: Log all access to form data
Regular Security Reviews: Conduct regular security audits

Implementation Checklist

✅ Initialize form analytics tracking
✅ Configure form auto-tracking
✅ Set up data collection
✅ Configure privacy settings
✅ Set up analytics dashboard
✅ Monitor form performance
✅ Optimize based on insights
✅ Regular performance reviews
✅ A/B test form improvements
✅ Document form analytics setup