Transactional

Analytics

Track form performance and user behavior

Form Analytics

Transactional Forms provides comprehensive analytics to help you understand form performance and user behavior.

Overview Dashboard

The analytics dashboard shows key metrics at a glance:

MetricDescription
ViewsTotal form loads
StartsUsers who began filling the form
CompletionsSuccessfully submitted forms
Completion RateCompletions / Starts
Avg. TimeAverage time to complete
Drop-off RateStarts - Completions / Starts

Events Tracked

All form interactions are tracked automatically:

VIEW

Triggered when the form loads.

{
  category: 'FORM',
  eventType: 'VIEW',
  formId: 123,
  sessionId: 'abc-123',
  metadata: {
    referrer: 'https://example.com',
    userAgent: 'Mozilla/5.0...'
  }
}

START

Triggered when the user begins interacting with the form.

{
  category: 'FORM',
  eventType: 'START',
  formId: 123,
  sessionId: 'abc-123'
}

FIELD_ANSWER

Triggered when a field is answered.

{
  category: 'FORM',
  eventType: 'FIELD_ANSWER',
  formId: 123,
  sessionId: 'abc-123',
  metadata: {
    fieldId: 456,
    fieldType: 'EMAIL'
  }
}

DROP_OFF

Triggered when a user abandons the form.

{
  category: 'FORM',
  eventType: 'DROP_OFF',
  formId: 123,
  sessionId: 'abc-123',
  metadata: {
    lastFieldId: 456,
    timeSpent: 45 // seconds
  }
}

COMPLETE

Triggered on successful submission.

{
  category: 'FORM',
  eventType: 'COMPLETE',
  formId: 123,
  sessionId: 'abc-123',
  metadata: {
    submissionId: 'sub-uuid',
    totalTime: 120 // seconds
  }
}

Accessing Analytics

Dashboard

Navigate to Forms > Select a form > Analytics tab.

API

Get analytics for a specific form:

const response = await fetch('/api/forms/{formId}/analytics', {
  headers: {
    'X-API-Key': 'your-api-key',
  },
});
 
const { data } = await response.json();

Response:

{
  data: {
    summary: {
      views: 1500,
      starts: 1200,
      completions: 800,
      completionRate: 0.667,
      avgCompletionTime: 95, // seconds
      dropOffRate: 0.333
    },
    daily: [
      { date: '2024-01-15', views: 150, starts: 120, completions: 80 },
      { date: '2024-01-14', views: 140, starts: 110, completions: 75 },
      // ...
    ],
    fieldAnalytics: [
      {
        fieldId: 1,
        label: 'Email',
        avgTime: 8,
        dropOffCount: 5
      },
      // ...
    ]
  }
}

Field-Level Analytics

Understand which fields cause the most friction:

const response = await fetch('/api/forms/{formId}/analytics/fields', {
  headers: {
    'X-API-Key': 'your-api-key',
  },
});
 
const { data } = await response.json();

Response:

{
  data: [
    {
      fieldId: 1,
      label: 'Email',
      type: 'EMAIL',
      metrics: {
        views: 1200,
        answers: 1180,
        answerRate: 0.983,
        avgTimeSeconds: 8,
        dropOffs: 5,
        dropOffRate: 0.004
      }
    },
    {
      fieldId: 2,
      label: 'Phone Number',
      type: 'PHONE',
      metrics: {
        views: 1175,
        answers: 900,
        answerRate: 0.766,
        avgTimeSeconds: 15,
        dropOffs: 50,
        dropOffRate: 0.043
      }
    }
  ]
}

Funnel Analysis

Track the conversion funnel from view to completion:

const response = await fetch('/api/forms/{formId}/analytics/funnel', {
  headers: {
    'X-API-Key': 'your-api-key',
  },
});
 
const { data } = await response.json();

Response:

{
  data: {
    stages: [
      { stage: 'View', count: 1500, rate: 1.0 },
      { stage: 'Start', count: 1200, rate: 0.8 },
      { stage: 'Field 1 (Email)', count: 1180, rate: 0.787 },
      { stage: 'Field 2 (Phone)', count: 900, rate: 0.6 },
      { stage: 'Field 3 (Message)', count: 850, rate: 0.567 },
      { stage: 'Complete', count: 800, rate: 0.533 }
    ]
  }
}

Time-Based Analytics

Date Range Filtering

GET /api/forms/{formId}/analytics?startDate=2024-01-01&endDate=2024-01-31

Hourly Breakdown

GET /api/forms/{formId}/analytics/hourly

Weekly Trends

GET /api/forms/{formId}/analytics/weekly

Source Tracking

Track where form traffic comes from:

{
  data: {
    sources: [
      { source: 'Direct', count: 500 },
      { source: 'Google', count: 400 },
      { source: 'Twitter', count: 200 },
      { source: 'Email Campaign', count: 150 }
    ]
  }
}

UTM Parameters

Forms automatically capture UTM parameters:

https://your-form-url?utm_source=newsletter&utm_medium=email&utm_campaign=launch

Access in analytics:

{
  metadata: {
    utmSource: 'newsletter',
    utmMedium: 'email',
    utmCampaign: 'launch'
  }
}

Device Analytics

Understand device usage:

{
  data: {
    devices: [
      { device: 'Desktop', count: 800, rate: 0.53 },
      { device: 'Mobile', count: 600, rate: 0.40 },
      { device: 'Tablet', count: 100, rate: 0.07 }
    ],
    browsers: [
      { browser: 'Chrome', count: 700 },
      { browser: 'Safari', count: 400 },
      { browser: 'Firefox', count: 200 }
    ]
  }
}

Real-Time Analytics

For high-traffic forms, access real-time data:

// WebSocket connection for real-time updates
const ws = new WebSocket('wss://api.usetransactional.com/forms/{formId}/analytics/live');
 
ws.onmessage = (event) => {
  const update = JSON.parse(event.data);
  // { type: 'view' | 'start' | 'complete', timestamp: '...' }
};

Exporting Analytics

Export analytics data for further analysis:

// CSV export
GET /api/forms/{formId}/analytics/export?format=csv&startDate=2024-01-01&endDate=2024-01-31
 
// JSON export
GET /api/forms/{formId}/analytics/export?format=json&startDate=2024-01-01&endDate=2024-01-31

Next Steps