6.5 KiB

Raw Blame History

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):

{
  "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):

{
  "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

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

GTM Event Tracking

Setup

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

Events

Page View

{
  event: 'page_view',
  page_path: '/webinar',
  page_title: 'Webinar Landing Page'
}

Webinar Registration

{
  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

{
  event: 'webinar_recording_access',
  formData: {
    email: 'user@example.com',
    utm_source: 'email',
    utm_medium: 'newsletter',
    utm_campaign: 'webinar_followup'
  }
}

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

Scroll Handler Debouncing
- Scroll events debounced by 50ms
- Uses { passive: true } for better performance
- Reduces unnecessary re-renders
Image Optimization
- Logo images use optimized WebP format
- Explicit width/height to prevent layout shift
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:

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

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

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

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

URL parameters are captured on page load
Stored in form submission
Sent to admin panel
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

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

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

Maintenance

Regular Tasks

Monitor Form Submissions
- Check admin panel for new leads
- Verify UTM tracking is working
- Review error logs
Performance Monitoring
- Run monthly Lighthouse audits
- Monitor Core Web Vitals in Google Search Console
- Check GTM event firing in Preview mode
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.

6.5 KiB Raw Blame History