Andrew Yim
236be6c580
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
158 lines
3.2 KiB
Markdown
158 lines
3.2 KiB
Markdown
# Form Tracking Reference
|
|
|
|
## GA4 Form Events
|
|
|
|
### form_start
|
|
Fires on first interaction with form field.
|
|
|
|
```javascript
|
|
dataLayer.push({
|
|
event: "form_start",
|
|
form_id: "contact-form",
|
|
form_name: "Contact Us",
|
|
form_destination: "/submit-contact"
|
|
});
|
|
```
|
|
|
|
### form_submit
|
|
Fires on successful form submission.
|
|
|
|
```javascript
|
|
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.
|
|
|
|
```javascript
|
|
dataLayer.push({
|
|
event: "generate_lead",
|
|
currency: "USD",
|
|
value: 100, // Estimated lead value
|
|
form_id: "quote-request"
|
|
});
|
|
```
|
|
|
|
## Form Field Events (Custom)
|
|
|
|
### field_focus
|
|
```javascript
|
|
dataLayer.push({
|
|
event: "field_focus",
|
|
form_id: "signup-form",
|
|
field_name: "email",
|
|
field_type: "email"
|
|
});
|
|
```
|
|
|
|
### field_complete
|
|
```javascript
|
|
dataLayer.push({
|
|
event: "field_complete",
|
|
form_id: "signup-form",
|
|
field_name: "email",
|
|
field_type: "email",
|
|
is_valid: true
|
|
});
|
|
```
|
|
|
|
### field_error
|
|
```javascript
|
|
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:
|
|
|
|
```javascript
|
|
// 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:
|
|
```javascript
|
|
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)
|