Skip to main content

How to Track AJAX Forms

Track conversions when AJAX forms are submitted successfully.

Prerequisites​

Ensure the SealMetrics tracker is installed on your page:

<script src="https://t.sealmetrics.com/t.js?id=YOUR_ACCOUNT_ID" defer></script>

Basic Implementation​

Call sealmetrics.conv() or sealmetrics.micro() in your AJAX success callback:

// Example with fetch API
fetch('/api/submit-form', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.then(data => {
  if (data.success) {
    // Track the form submission as a conversion
    if (typeof sealmetrics !== 'undefined') {
      sealmetrics.conv('lead', 0, {
        form_name: 'contact',
        form_location: 'homepage'
      });
    }
  }
});

jQuery AJAX Example​

$.ajax({
  url: '/api/submit-form',
  method: 'POST',
  data: formData,
  success: function(response) {
    // Track successful submission
    if (typeof sealmetrics !== 'undefined') {
      sealmetrics.conv('lead', 0, {
        form_name: 'newsletter',
        source: 'footer'
      });
    }
  }
});

Conversion vs Microconversion​

Choose the right method based on your goal:

Goal TypeMethodExample
Lead form (valuable)sealmetrics.conv()Contact form, quote request
Newsletter signupsealmetrics.conv()Email subscription
Minor interactionsealmetrics.micro()Feedback form, comments

Conversion Example (with value)​

// Lead with estimated value
sealmetrics.conv('lead', 50, {
  form_name: 'quote_request',
  service: 'consulting'
});

Microconversion Example​

// Form step completion (no monetary value)
sealmetrics.micro('form_step', {
  step: 'personal_info',
  form_name: 'checkout'
});

Framework Examples​

React​

const handleSubmit = async (e) => {
  e.preventDefault();

  try {
    const response = await fetch('/api/contact', {
      method: 'POST',
      body: JSON.stringify(formData)
    });

    if (response.ok) {
      // Track conversion
      if (typeof sealmetrics !== 'undefined') {
        sealmetrics.conv('lead', 0, {
          form_name: 'contact'
        });
      }
    }
  } catch (error) {
    console.error('Form submission failed');
  }
};

Vue.js​

async submitForm() {
  try {
    await this.$axios.post('/api/contact', this.formData);

    // Track conversion
    if (typeof sealmetrics !== 'undefined') {
      sealmetrics.conv('lead', 0, {
        form_name: 'contact'
      });
    }
  } catch (error) {
    console.error('Form submission failed');
  }
}

Best Practices​

  1. Track only on success — Don't fire tracking on form errors
  2. Check tracker exists — Always use typeof sealmetrics !== 'undefined'
  3. Include form context — Add properties like form_name and form_location
  4. Avoid duplicates — Track once per successful submission

Troubleshooting​

Conversion not appearing​

  1. Check browser Network tab for beacon to t.sealmetrics.com
  2. Verify the tracker script is loaded before your AJAX code
  3. Ensure the success callback is actually firing

Duplicate conversions​

If you're seeing duplicates, ensure your tracking code only fires once:

let formTracked = false;

function onFormSuccess() {
  if (!formTracked && typeof sealmetrics !== 'undefined') {
    sealmetrics.conv('lead', 0, { form_name: 'contact' });
    formTracked = true;
  }
}