Files
our-claude-skills/custom-skills/60-gtm-audit/code/docs/form_tracking.md
Andrew Yim 7c5efea817 Restructure skill numbering: SEO 11-30, GTM 60-69, reserve 19-28 for future skills
Renumber 12 existing skills to new ranges:
- SEO: 11→13, 12→18, 13→16, 14→17, 15→14, 16→15, 17→29, 18→30, 19→12
- GTM: 20→60, 21→61, 22→62

Update cross-references in gateway architect/builder skills, GTM guardian
README, CLAUDE.md (skill tables + directory layout), and AGENTS.md
(domain routing ranges).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-13 02:37:39 +09:00

3.2 KiB

Form Tracking Reference

GA4 Form Events

form_start

Fires on first interaction with form field.

dataLayer.push({
  event: "form_start",
  form_id: "contact-form",
  form_name: "Contact Us",
  form_destination: "/submit-contact"
});

form_submit

Fires on successful form submission.

dataLayer.push({
  event: "form_submit",
  form_id: "contact-form",
  form_name: "Contact Us",
  form_destination: "/submit-contact",
  form_submit_text: "Send Message"
});

generate_lead

Fires when form generates a qualified lead.

dataLayer.push({
  event: "generate_lead",
  currency: "USD",
  value: 100,  // Estimated lead value
  form_id: "quote-request"
});

Form Field Events (Custom)

field_focus

dataLayer.push({
  event: "field_focus",
  form_id: "signup-form",
  field_name: "email",
  field_type: "email"
});

field_complete

dataLayer.push({
  event: "field_complete",
  form_id: "signup-form",
  field_name: "email",
  field_type: "email",
  is_valid: true
});

field_error

dataLayer.push({
  event: "field_error",
  form_id: "signup-form",
  field_name: "email",
  error_message: "Invalid email format"
});

Form Abandonment Tracking

Detecting Abandonment

Track when user leaves form without submitting:

// Track form start
let formStarted = false;
document.querySelectorAll('form input, form select, form textarea')
  .forEach(field => {
    field.addEventListener('focus', function() {
      if (!formStarted) {
        formStarted = true;
        dataLayer.push({ event: 'form_start', form_id: this.form.id });
      }
    });
  });

// Track abandonment on page leave
window.addEventListener('beforeunload', function() {
  if (formStarted && !formSubmitted) {
    dataLayer.push({
      event: 'form_abandon',
      form_id: 'contact-form',
      last_field: lastFocusedField,
      fields_completed: completedFieldCount
    });
  }
});

GTM Trigger Configuration

Form Submission Trigger

Setting Value
Trigger Type Form Submission
Wait for Tags Check (if AJAX form)
Check Validation Check
Form ID equals contact-form

Form Start Trigger (Custom Event)

Setting Value
Trigger Type Custom Event
Event Name form_start
Fire On All Custom Events

Common Form Types & Tracking

Contact Forms

Events: form_start, form_submit, generate_lead

Newsletter Signup

Events: form_start, form_submit, sign_up

Login Forms

Events: form_start, login

Search Forms

Events: search (with search_term parameter)

Multi-Step Forms

Track each step:

dataLayer.push({
  event: "form_step",
  form_id: "checkout-form",
  step_number: 2,
  step_name: "Shipping Address"
});

Validation Checklist

  • Form has id or name attribute
  • All required fields have names
  • Submit button identifiable
  • form_start fires on first interaction
  • form_submit fires only on success
  • generate_lead has value parameter
  • Error events track validation failures
  • Abandonment tracking implemented (optional)