Polyguard
Security and compliance platform built with Nuxt/Vue and Craft CMS, featuring a headless GraphQL architecture.
Polyguard
Polyguard is a security and compliance tool built for a client needing a performant, content-managed web presence with e-commerce capabilities. The frontend is built with Nuxt 4 and Vue, consuming content from a headless Craft CMS instance via GraphQL. Features include Meta Shop checkout URL handling for Facebook ad campaigns, with cart management, customer pre-fill, and GA4 attribution tracking.
PROJECT OVERVIEW
A comprehensive look at the challenges, solutions, and results of the Polyguard project.
THE CHALLENGE
- Complex Meta Shop checkout URL handling for Facebook ad campaigns
- Headless CMS architecture with content preview capabilities
- Cart management with customer pre-fill from ad attribution
- GA4 integration for campaign tracking across the funnel
OUR SOLUTION
- Custom checkout URL handler parsing Meta campaign parameters
- Craft CMS headless mode with GraphQL API and live preview
- Modular cart system with attribution tracking throughout
- Server-side GA4 event tracking for accurate conversion data
THE RESULTS
- Meta Shop checkout flow handling ad campaign traffic
- Headless CMS giving marketing team full content control
- GA4 attribution tracking from ad click to purchase
- Modular architecture enabling rapid feature additions
DETAILED CASE STUDY
PROJECT BACKGROUND
Polyguard is a security and compliance tool built for a client needing a performant, content-managed web presence with e-commerce capabilities. The frontend is built with Nuxt 4 and Vue, consuming content from a headless Craft CMS instance via GraphQL. Features include Meta Shop checkout URL handling for Facebook ad campaigns, with cart management, customer pre-fill, and GA4 attribution tracking.
TECHNICAL IMPLEMENTATION
A deep dive into the architecture, technologies, and development approach used to build the Polyguard.
SYSTEM ARCHITECTURE
The system was built using modern architecture patterns ensuring scalability, reliability, and maintainability. Each component handles specific business functions and communicates through well-defined APIs.
FRONTEND LAYER
Nuxt 3 SSR with Craft CMS GraphQL API for dynamic product catalog and content
API GATEWAY
GraphQL gateway with Craft CMS headless backend and custom product filtering
BUSINESS LOGIC
E-commerce product catalog with division-based navigation and specification documents
DATA LAYER
Craft CMS content management with structured product entries and asset management
KEY FEATURES DELIVERED
Headless CMS Architecture
Craft CMS running headless with GraphQL API, giving the marketing team full content control without touching code.
Meta Shop Integration
Custom checkout URL handler for Facebook/Meta ad campaigns with cart pre-population and customer data.
Campaign Analytics
End-to-end GA4 tracking from ad click through purchase, with server-side event forwarding.
DEVELOPMENT TIMELINE
CMS Setup
Craft CMS configuration, content modeling, GraphQL schema
Week 1-3Frontend Build
Nuxt 4 frontend with Vue components and GraphQL queries
Week 4-10E-commerce Integration
Meta Shop checkout handler, cart system, payment flow
Week 11-14Analytics & Launch
GA4 integration, campaign tracking, production deployment
Week 15-16PROJECT METRICS
Key outcomes and technical achievements.
RELATED PROJECTS
Explore other successful projects that showcase our expertise in building custom software solutions.
CanvasPress
Full e-commerce platform with custom interactive design tool, server-side image rendering, order management system, and headless CMS.
SignPress
Branding and signage company website with portfolio showcase, service catalog, and client testimonials.
PlateUp
AI-powered meal planning app that generates personalized meal plans, recipes, and grocery lists using Claude AI.