Campaign & Site Wizard
Relevant source files
The following files were used as context for generating this wiki page:
The Campaign & Site Wizard is a multi-step interactive interface designed to streamline the creation, configuration, and deployment of landing pages (LPs) within the FusionOps ecosystem. It serves as the primary control plane for defining brand identity, product parameters, design aesthetics, and tracking integrations for PPC-optimized campaigns.
The system utilizes a modular architecture where each step is encapsulated in a specific component, coordinated by a central state machine. It manages complex logic including real-time DNS synchronization with Cloudflare, AI-powered copy generation, and deterministic asset generation based on selected templates.
Sources: src/components/Wizard.jsx:87-106, tests/e2e/E2E_TEST_REPORT.md:126-160
Wizard Architecture & State Management
The Wizard is implemented as a React functional component that maintains a comprehensive config state object. This object accumulates data from every step of the process, ensuring that final build operations have access to the complete site specification.
Core Workflow Logic
The wizard operates through a sequential progression of steps, typically numbering 6 or 7 depending on the specific implementation version. Each transition triggers validation logic to ensure data integrity before proceeding.
The diagram above illustrates the standard progression from initial brand entry to final deployment.
Sources: src/components/Wizard.jsx:108-115, tests/e2e/pages/WizardPage.ts:13-22
Configuration Data Structure
The config object follows a strict schema to maintain compatibility with the template-router.
| Field Category | Key Fields | Purpose |
|---|---|---|
| Brand | brand, domain, tagline, email | Identifies the site and provides contact info. |
| Product | loanType, amountMin, amountMax, aprMin | Defines the financial offerings shown on the LP. |
| Design | templateId, colorId, fontId, radius | Controls the visual framework and styling. |
| Copy | h1, title2, cta, sub | The marketing messaging and headlines. |
| Tracking | conversionId, aid, trackingMode | Configures Google Ads and Voluum integration. |
| System | deployOnBuild, cfProfileId | Controls infrastructure and automation. |
Sources: src/components/Wizard.jsx:32-68, gen-lp.md:30-58
Detailed Functional Steps
Step 1: Brand Information
This step handles the foundational identity of the site. It includes a critical DNS synchronization feature that interacts with the Cloudflare API via the getOrCreateZone service. If a domain provider is specified, the system attempts to sync nameservers automatically.
Sources: src/components/Wizard.jsx:174-210, tests/e2e/pages/WizardPage.ts:187-205
Step 2: Product Configuration
Users define the specific financial products (e.g., Personal Loans, Installment, PDL). The wizard provides amount presets (e.g., "$100 – $5,000") to simplify input for common PPC niches.
Sources: src/components/Wizard.jsx:55-57, tests/e2e/wizard/wizard-complete.spec.ts:153-165
Step 3: Template & Design
In this phase, the template-router is utilized to provide a live mobile preview. The system detects "capabilities" of the selected template (such as whether it supports a loan calculator or section reordering) and adjusts the UI accordingly.
Sources: src/components/Wizard.jsx:122-132, src/utils/template-router.js:460-500
Step 4: Copy & Content (AI Integration)
The wizard integrates with Gemini or Anthropic APIs to generate marketing copy based on the brand and product data entered in earlier steps.
- Halbert × Schwartz Framework: Uses specific AI prompts to generate high-converting headlines and CTAs.
- Meta Generation: Automatically creates SEO titles and descriptions.
Sources: src/components/Wizard.jsx:247-280, tests/e2e/E2E_TEST_REPORT.md:150-155
Step 5: Tracking & Conversion
Supports two primary modes:
- Minimal Stack: Standard first-party pixel tracking and Google Ads conversion events.
- Voluum Stack: Full integration with Voluum campaign management, including CNAME provisioning for tracking domains (e.g.,
trk.domain.com).
Sources: src/components/Wizard.jsx:400-435, tests/e2e/wizard/wizard-complete.spec.ts:241-270
Step 6: Review & Build
The final step presents a configuration summary and an interactive file tree showing the generated Astro project structure. Users can opt for "One-flow" mode, which executes saving, DNS provisioning, and deployment in a single transaction.
Sources: src/components/Wizard.jsx:352-390, tests/e2e/pages/WizardPage.ts:285-288
Technical Implementation Details
Validation Engine
Each step is gated by a validateStep function that enforces business rules and formatting (e.g., DOMAIN_REGEX).
function validateStep(stepNum, config, wizardCaps = null) {
const errors = [];
if (stepNum === 1) {
if (!config.brand?.trim()) errors.push("Brand Name is required");
if (!config.domain?.trim()) errors.push("Domain is required");
if (config.domain?.trim() && !DOMAIN_REGEX.test(config.domain.trim())) {
errors.push("Invalid domain format (e.g., example.com)");
}
}
// Additional steps...
return { valid: errors.length === 0, errors };
}
Sources: src/components/Wizard.jsx:32-53
Automation & Deployment
When the "Build & Save" button is triggered, the handleBuild function orchestrates several backend operations.
The sequence above details the multi-service handshake required to bring a landing page online.
Sources: src/components/Wizard.jsx:335-365, src/utils/template-router.js:585-610
Summary
The Campaign & Site Wizard is a high-level abstraction over complex affiliate marketing infrastructure. By combining AI copy generation, dynamic template routing, and automated Cloudflare management, it enables rapid deployment of PPC-optimized assets while maintaining strict data and tracking standards.
Sources: src/components/Wizard.jsx:460-480, CLAUDE.md:12-35