# Shared Components Documentation

**Last Updated:** 2026-01-10

Complete documentation for all shared JavaScript and PHP components used across the Ordio website for forms, modals, tracking, and lead capture.

## Overview

This directory contains documentation for reusable components that are shared across multiple pages:

- **Email Modal Component** - Email collection modal for tools/calculators
- **Email Modal Utilities** - Shared utilities for email validation and storage
- **UTM Tracking System** - Comprehensive UTM parameter tracking
- **GTM Form Tracking** - Google Tag Manager form tracking utility
- **Lead Capture Component** - Two-step progressive lead capture popup

## Components

### 1. Email Modal Component

**File:** `v2/js/shared/email-modal.js`  
**Dependencies:** `email-modal-utils.js`

Email collection modal for tools/calculators with HubSpot integration.

- **[Email Modal Component Guide](EMAIL_MODAL_COMPONENT.md)** - Complete component documentation

### 2. Email Modal Utilities

**File:** `v2/js/shared/email-modal-utils.js`  
**Global Object:** `window.OrdioEmailModalUtils`

Shared utilities for email validation, localStorage management, cookie handling, and UTM data collection.

- **[Email Modal Utilities Reference](EMAIL_MODAL_UTILS.md)** - Complete utilities reference

### 3. UTM Tracking System

**File:** `v2/js/utm-tracking.js`  
**Global Class:** `window.UTMTracker`

Comprehensive UTM parameter tracking system with cookie management, Google Ads correction, and traffic source detection.

- **[UTM Tracking System Guide](UTM_TRACKING_SYSTEM.md)** - Complete tracking system documentation

### 4. GTM Form Tracking

**File:** `v2/js/gtm-form-tracking.js`  
**Global Object:** `window.GTMFormTracker`

Centralized utility for tracking form submissions in Google Tag Manager via dataLayer.

- **[GTM Form Tracking Guide](GTM_FORM_TRACKING.md)** - Complete tracking utility documentation

### 5. Lead Capture Component

**File:** `v2/components/lead-capture-popup.php`  
**Trigger Script:** `v2/js/lead-capture-triggers.js`

Two-step progressive lead capture popup with dynamic copy detection and HubSpot integration.

- **[Lead Capture Component Guide](LEAD_CAPTURE_COMPONENT.md)** - Complete component documentation

## Usage Guide

- **[Component Usage Guide](COMPONENT_USAGE_GUIDE.md)** - When to use which component and integration patterns

## Related Documentation

- [Form-to-Page Mapping](../forms/FORM_TO_PAGE_MAPPING.md) - Which forms are used where
- [HubSpot API Reference](../apis/HUBSPOT_API_REFERENCE.md) - API endpoint documentation
- [Lead Capture System](../lead-capture/README.md) - Lead capture system documentation
- [Form Tracking Guide](../../forms/FORM_TRACKING_DEVELOPER_GUIDE.md) - Form tracking implementation