Landing Page Build Injection
Relevant source files
The following files were used as context for generating this wiki page:
Landing Page Build Injection is a core architectural process in FusionOps that automatically augments static templates with dynamic tracking, branding, and styling logic during the build or preview phase. This system allows template creators to focus on design while the build pipeline ensures that every deployed landing page is equipped with standardized tracking scripts, affiliate network integrations, and custom color schemes.
The injection system operates by identifying specific insertion points within a template's HTML (typically the <head> and <body> tags) and programmatically inserting script blocks, CSS variable overrides, and environment-specific configurations. This decoupling ensures that landing pages remain functional across different tracking modes (Minimal vs. Voluum Stack) without requiring manual code changes to the base templates.
Injection Architecture and Logic
The injection logic is primarily handled by utility scripts that process template files before they are rendered in a preview or deployed to Cloudflare Pages. The system distinguishes between "stubs" used for local previews and "production" scripts used for live campaigns.
Key Components of Injection
| Component | Responsibility | Derived From |
|---|---|---|
| Tracking Stubs | Prevents ReferenceError in preview environments by defining global variables. | utils/template-preview-runtime.js |
| Unified Tracking | Injects Layer 1 (DataLayer), Layer 2 (First-party pixel), and Layer 3 (Voluum/GAds). | packages/lp-template-generator/src/shared/unified-tracking.js |
| CSS Variable Overrides | Dynamically applies branding colors via the CSS cascade instead of string replacement. | utils/template-preview-runtime.js |
| Astro Syntax Cleanup | Strips Astro-specific directives and frontmatter for standard HTML rendering. | utils/template-preview-runtime.js |
Sources: utils/template-preview-runtime.js:14-25, packages/lp-template-generator/src/shared/unified-tracking.js:1-10
Build Process Flow
The following diagram illustrates how the build system processes a raw template and injects the necessary components.
The process ensures that metadata, tracking identifiers, and styling are consistently applied regardless of the source framework (HTML or Astro).
Sources: utils/template-preview-runtime.js:37-75, CLAUDE.md:145-155
Tracking System Injection
FusionOps utilizes a layered tracking architecture. The injection system programmatically inserts these layers into the <head> of the landing page based on the site configuration object.
Layered Tracking Implementation
- Layer 1 (DataLayer): Global variables for affiliate IDs, network names, and conversion labels.
- Layer 2 (First-Party Pixel): Custom pixel implementation using
sendBeacontohttps://t.{domain}/e. - Layer 3 (External): Voluum tracking scripts and Google Ads
gtag.jsintegrations.
// Example of injected tracking block derived from the generator logic
function buildTrackingStubs(site) {
const conversionId = site.conversionId || '';
const aid = site.aid || site.leadsGateFormId || '';
return `<script>
/* Preview tracking stubs */
var conversionId='${conversionId}';
var formStartLabel='${site.formStartLabel || ''}';
var formSubmitLabel='${site.formSubmitLabel || ''}';
var voluumDomain='${site.voluumDomain || ''}';
window.dataLayer=window.dataLayer||[];
</script>`;
}
Sources: utils/template-preview-runtime.js:168-183, packages/lp-template-generator/src/shared/tracking.js:1-15
Unified Tracking Logic
The unified-tracking.js module provides a comprehensive block that captures click IDs (gclid, vlcid, etc.) and initializes the first-party pixel handler. This is injected as an is:inline script to ensure it executes immediately upon page load.
Sources: packages/lp-template-generator/src/shared/unified-tracking.js:5-25
Design and Color Injection
Instead of using brittle string replacement for branding (like replacing ${site.brand} everywhere), FusionOps uses a cascading CSS variable injection strategy. This allows the system to override template themes at runtime.
CSS Variable Mapping
The system maps site configuration values to standardized CSS variables used by templates (especially those built with shadcn/ui).
| Variable Name | HSL Mapping | Purpose |
|---|---|---|
--primary | site.colorId.p | Main brand color |
--accent | site.colorId.a | CTA and highlight color |
--secondary | site.colorId.s | Secondary UI elements |
--radius | site.radius | Component border radius |
Sources: utils/template-preview-runtime.js:231-255, src/utils/lp-generator.js:45-60
The injection happens via a <style id="lp-theme-override"> block that is placed after the template's original styles to ensure higher specificity.
Sources: utils/template-preview-runtime.js:260-275
Framework-Specific Processing
The injection system includes specialized logic for handling different template frameworks, primarily focusing on Astro and Static HTML.
Astro Template Transformation
For templates containing .astro files, the runtime performs the following injections and cleanups:
- Frontmatter Stripping: Removes the
---block containing server-side logic. - Component Inlining: Recursively resolves
<Component />tags by replacing them with their raw content (up to 5 levels of nesting). - Directive Removal: Strips
is:inline,is:global, anddefine:varswhich are not supported in standard browser rendering. - Variable Interpolation: Replaces simple expressions like
{year}or{site.brand}with actual values.
Sources: utils/template-preview-runtime.js:105-145
Conclusion
Landing Page Build Injection is the "glue" of the FusionOps platform. By programmatically inserting tracking stubs, unified analytics, and CSS theme overrides, the system ensures that every landing page—whether generated by AI or hand-coded—is fully integrated into the marketing operations pipeline. This automated injection reduces deployment errors and maintains a strict separation of concerns between design, business logic, and tracking infrastructure.