Files

Andrew Yim 31506e026d refactor(gtm): Split into lightweight audit and comprehensive manager

- 13-ourdigital-gtm-audit: Lightweight audit-only tool (original)
  - GTM container validation
  - DataLayer event checking
  - Form and checkout analysis
  - No Notion integration, no inject mode

- 14-ourdigital-gtm-manager: Comprehensive management toolkit
  - Full audit capabilities
  - DataLayerInjector for custom HTML tag generation
  - Notion integration for audit logging
  - 20+ GA4 event templates

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

2025-12-20 22:46:16 +09:00

3.2 KiB

Raw Blame History

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

Events: form_start, form_submit, sign_up

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)

3.2 KiB Raw Blame History