PozoAppUptoWebinar/WEBINAR_INTEGRATION.md

# Webinar Integration Documentation

## Overview

This document provides technical details for the PozoApp webinar landing pages, including admin panel integration, GTM tracking, and performance optimization.

## Admin Panel Integration

### Data Structure

Both webinar forms submit data to the admin panel using the `postAdminPanel` API endpoint (`/HomePage`).

#### Main Webinar Registration

**SectionName:** `WebinarRegistrations`

**Content (JSON):**
```json
{
  "fullName": "string",
  "storeName": "string",
  "city": "string",
  "state": "string",
  "whatsapp": "string",
  "email": "string",
  "outlets": "string (1 / 2-3 / 4+)",
  "currentPOS": "string",
  "problems": ["array of selected problems"],
  "language": "string",
  "consent": boolean,
  "utm_source": "string",
  "utm_medium": "string",
  "utm_campaign": "string",
  "utm_term": "string",
  "utm_content": "string",
  "submittedAt": "ISO 8601 timestamp",
  "pageUrl": "string",
  "userAgent": "string"
}
```

#### Post-Webinar Recording Access

**SectionName:** `WebinarRecordingAccess`

**Content (JSON):**
```json
{
  "fullName": "string",
  "email": "string",
  "storeName": "string (optional)",
  "consent": boolean,
  "leadType": "recording-access",
  "utm_source": "string",
  "utm_medium": "string",
  "utm_campaign": "string",
  "utm_term": "string",
  "utm_content": "string",
  "submittedAt": "ISO 8601 timestamp",
  "pageUrl": "string",
  "userAgent": "string"
}
```

### API Request Format

```javascript
{
  SectionName: 'WebinarRegistrations' | 'WebinarRecordingAccess',
  Content: JSON.stringify(formData),
  CreatedBy: 0, // Public form submission
  ActiveStatus: 'A'
}
```

## GTM Event Tracking

### Setup

1. Replace `GTM-XXXXXXX` in `index.html` with your actual GTM container ID
2. Events are automatically tracked via `window.dataLayer.push()`

### Events

#### Page View
```javascript
{
  event: 'page_view',
  page_path: '/webinar',
  page_title: 'Webinar Landing Page'
}
```

#### Webinar Registration
```javascript
{
  event: 'webinar_registration',
  formData: {
    email: 'user@example.com',
    outlets: '2-3',
    utm_source: 'google',
    utm_medium: 'cpc',
    utm_campaign: 'webinar_2025',
    utm_term: 'retail_pos',
    utm_content: 'ad_variant_a'
  }
}
```

#### Recording Access
```javascript
{
  event: 'webinar_recording_access',
  formData: {
    email: 'user@example.com',
    utm_source: 'email',
    utm_medium: 'newsletter',
    utm_campaign: 'webinar_followup'
  }
}
```

## Consent Tracking

### Requirements

Both forms require explicit consent before submission:

**Main Webinar:** "I agree to receive event reminders and follow-ups on WhatsApp/email."

**Post-Webinar:** "I agree to receive follow-up emails from the Pozo team"

### Implementation

- Consent checkbox is **required** (HTML5 validation)
- JavaScript validation shows error message if unchecked
- Consent value is stored in admin panel as boolean
- Timestamp of submission is recorded

## Performance Optimization

### Implemented Optimizations

1. **Scroll Handler Debouncing**
   - Scroll events debounced by 50ms
   - Uses `{ passive: true }` for better performance
   - Reduces unnecessary re-renders

2. **Image Optimization**
   - Logo images use optimized WebP format
   - Explicit width/height to prevent layout shift

3. **CSS Optimizations**
   - Efficient selectors
   - Minimal use of box-shadow
   - Optimized animations with `cubic-bezier` timing

### Performance Targets

- **LCP (Largest Contentful Paint):** < 2.0s on 4G
- **FID (First Input Delay):** < 100ms
- **CLS (Cumulative Layout Shift):** < 0.1

### Testing

Run Lighthouse audit:
```bash
npm run build
npx serve -s dist
# Open Chrome DevTools > Lighthouse > Run audit
```

## Canonical URL Setup

### Current Setup

- Main webinar: `/webinar`
- Post-webinar: `/webinar/recording`

### Production Deployment

1. Ensure HTTPS is enforced
2. Add canonical tags in `index.html`:

```html
<link rel="canonical" href="https://yourdomain.com/webinar" />
```

3. Set up 301 redirects for any alternate URLs

## UTM Parameter Tracking

### Supported Parameters

- `utm_source` - Traffic source (e.g., google, facebook, email)
- `utm_medium` - Marketing medium (e.g., cpc, social, newsletter)
- `utm_campaign` - Campaign name (e.g., webinar_2025_q1)
- `utm_term` - Paid keywords (e.g., retail_pos_software)
- `utm_content` - Ad variant (e.g., ad_variant_a)

### Example URLs

```
https://yourdomain.com/webinar?utm_source=google&utm_medium=cpc&utm_campaign=webinar_2025&utm_term=retail_pos&utm_content=ad_variant_a

https://yourdomain.com/webinar/recording?utm_source=email&utm_medium=newsletter&utm_campaign=webinar_followup
```

### Data Flow

1. URL parameters are captured on page load
2. Stored in form submission
3. Sent to admin panel
4. Tracked in GTM events

## Error Handling

### Form Validation

- HTML5 validation for required fields
- JavaScript validation for consent checkbox
- Email format validation (browser native)

### API Error Handling

```javascript
try {
  const response = await dispatch(postAdminPanel(data)).unwrap();
  if (response?.data?.statusCode === 1) {
    // Success
    message.success('Registration successful!');
  } else {
    // API returned error
    message.error('Registration failed. Please try again.');
  }
} catch (error) {
  // Network or other error
  console.error('Form submission error:', error);
  message.error('An error occurred. Please try again later.');
}
```

### User Feedback

- Success: Ant Design `message.success()`
- Error: Ant Design `message.error()`
- Loading state: Button shows "Submitting..." and is disabled

## Security Considerations

1. **HTTPS Only:** Enforce HTTPS in production
2. **CORS:** Ensure admin panel API allows requests from webinar domain
3. **Rate Limiting:** Consider implementing rate limiting on API
4. **Data Sanitization:** Form data is JSON stringified before storage
5. **No Sensitive Data:** Avoid storing passwords or payment info

## Maintenance

### Regular Tasks

1. **Monitor Form Submissions**
   - Check admin panel for new leads
   - Verify UTM tracking is working
   - Review error logs

2. **Performance Monitoring**
   - Run monthly Lighthouse audits
   - Monitor Core Web Vitals in Google Search Console
   - Check GTM event firing in Preview mode

3. **Content Updates**
   - Update event dates/times
   - Refresh testimonials
   - Update FAQ as needed

## Support

For technical issues:
- Check browser console for errors
- Verify GTM container ID is correct
- Test form submission in admin panel
- Review network tab for API responses

For questions, contact the development team.