Purpose

This document serves as the single source of truth for shared concepts, data structures, and terminology used across all system layers:

  • Frontend: Webflow / 11ty static site
  • Middleware: Xano / n8n orchestration
  • Backend: Shopify commerce / Google AI analytics

1. Core Entity Definitions

1.1 User/Customer

Layer Term Identifier Format Storage
Frontend User user_{timestamp}_{random} localStorage
Middleware User usr_{alphanumeric} Xano Database
Shopify Customer gid://shopify/Customer/{id} Shopify Admin
Google AI User user_{id} Data Stream

Canonical User Object

TypeScript
interface User {
  // Frontend identifier (client-generated)
  clientUserId: string;          // Format: user_{timestamp}_{random}

  // Backend identifiers (system-generated)
  middlewareUserId: string;      // Format: usr_{alphanumeric}
  shopifyCustomerId: string;     // Format: gid://shopify/Customer/{id}
  googleAiUserId: string;        // Format: user_{id}

  // Core attributes
  email: string;
  firstName?: string;
  lastName?: string;
  displayName?: string;

  // Timestamps (ISO 8601)
  createdAt: string;
  updatedAt: string;
  lastSeenAt: string;
}

1.2 Session

Layer Term Identifier Format Lifetime
Frontend UCP Session session_{timestamp}_{random} Browser session
Middleware Session Record sess_{alphanumeric} 24 hours
Shopify Metafield ucp.session_id Persistent
Google AI Session session_{id} Analytics window

Canonical Session Object

TypeScript
interface Session {
  // Session identifier
  sessionId: string;             // Format: session_{timestamp}_{random}

  // User association
  userId?: string;               // Linked after identification
  email?: string;                // Linked after identification

  // Session metadata
  deviceInfo: {
    type: 'mobile' | 'desktop' | 'tablet';
    browser: string;
    os: string;
    screenResolution?: string;
  };

  // Traffic source
  referrer?: string;
  landingPage: string;
  utmParams?: {
    source?: string;
    medium?: string;
    campaign?: string;
  };

  // Timestamps (ISO 8601)
  createdAt: string;
  lastActiveAt: string;
  expiresAt?: string;
}

1.3 Consent

Layer Term Storage Key Format
Frontend Consent Status ucp_session.consentStatus JSON object
Middleware Consent Record consent_status JSON
Shopify Customer Metafield ucp.consent_status JSON metafield
Google AI Consent Signal consent_status Event property

Canonical Consent Object

TypeScript
interface ConsentStatus {
  [purpose: string]: ConsentRecord;
}

interface ConsentRecord {
  granted: boolean;              // true = opted in, false = opted out
  timestamp: string;             // ISO 8601 when consent was recorded
  version?: string;              // Consent policy version (e.g., "v2.1")
  method?: 'explicit' | 'implicit';
}

// Standard consent purposes
type ConsentPurpose =
  | 'functional'    // Essential (always true)
  | 'analytics'     // Performance tracking
  | 'marketing'     // Personalization
  | 'thirdParty';   // Third-party sharing

Consent Mapping Across Systems

Frontend Purpose Shopify Consent Google AI Signal
analytics emailMarketingConsent.marketingState analytics_consent
marketing smsMarketingConsent.marketingState ad_personalization
functional N/A (always enabled) N/A

1.4 Event

Layer Term Identifier Format Delivery
Frontend User Event evt_{timestamp}_{random} Real-time webhook
Middleware Event Record evt_{alphanumeric} Queue processed
Shopify Metafield Entry Array in ucp.user_history Batch update
Google AI Analytics Event event_id Stream ingestion

Canonical Event Object

TypeScript
interface UCPEvent {
  eventId?: string;              // Format: evt_{timestamp}_{random}
  type: EventType;
  category?: EventCategory;
  sessionId: string;
  userId?: string;
  page: string;                  // URL path
  referrer?: string;
  data?: Record<string, any>;
  timestamp: string;             // ISO 8601
}

type EventType =
  | 'page_view'
  | 'click'
  | 'form_submit'
  | 'add_to_cart'
  | 'remove_from_cart'
  | 'checkout_start'
  | 'purchase'
  | 'search'
  | 'consent_updated'
  | 'user_identified'
  | 'session_start'
  | 'session_end';

type EventCategory =
  | 'navigation'
  | 'engagement'
  | 'conversion'
  | 'system';

2. Product Data Definitions

Layer Term Identifier Format Source
Frontend Product handle (URL slug) Build-time data
Middleware Product Record prod_{alphanumeric} Cached from Shopify
Shopify Product gid://shopify/Product/{id} Source of truth

Canonical Product Object

TypeScript
interface Product {
  // Identifiers
  handle: string;                // URL-safe slug (frontend primary key)
  shopifyId: string;             // gid://shopify/Product/{id}
  middlewareId?: string;         // prod_{alphanumeric}

  // Core attributes
  title: string;
  description: string;
  descriptionHtml?: string;

  // Pricing
  priceRange: {
    min: Money;
    max: Money;
  };

  // Media
  images: ProductImage[];
  featuredImage?: ProductImage;

  // Variants & Options
  variants: ProductVariant[];
  options: ProductOption[];

  // Classification
  productType?: string;
  vendor?: string;
  tags: string[];
  collections: string[];

  // Availability
  available: boolean;
  totalInventory?: number;

  // Timestamps (ISO 8601)
  createdAt: string;
  updatedAt: string;
}

interface Money {
  amount: string;                // Decimal string (e.g., "99.99")
  currencyCode: string;          // ISO 4217 (e.g., "USD")
}

3. API Communication Definitions

3.1 Webhook Payload Structure

TypeScript
interface WebhookPayload {
  // Event metadata
  eventType: string;
  timestamp: string;             // ISO 8601

  // Idempotency
  idempotencyKey?: string;       // Format: {sessionId}_{eventType}_{timestamp}

  // Event data
  eventData: Record<string, any>;

  // Session context
  session: {
    sessionId: string;
    userId?: string;
    email?: string;
    consentStatus: ConsentStatus;
    userHistory: UCPEvent[];
  };

  // Security
  signature?: string;            // HMAC-SHA256 of payload
}

3.2 Standard API Response

TypeScript
interface APIResponse<T> {
  success: boolean;
  data?: T;
  error?: {
    code: string;
    message: string;
    details?: Record<string, any>;
  };
  meta?: {
    timestamp: string;
    requestId?: string;
    idempotencyKey?: string;
  };
}

interface PaginatedResponse<T> extends APIResponse<T[]> {
  pagination: {
    page: number;
    limit: number;
    total: number;
    totalPages: number;
    hasNextPage: boolean;
    cursor?: string;
  };
}

3.3 Error Codes

Code Layer Description
AUTH_001AllAuthentication required
AUTH_002AllInvalid credentials
AUTH_003AllToken expired
VALID_001AllMissing required field
VALID_002AllInvalid field format
RATE_001MiddlewareRate limit exceeded
IDEM_001MiddlewareDuplicate request (idempotent)
SHOP_001ShopifyCustomer not found
SHOP_002ShopifyProduct not found
GOOG_001Google AIStream write failed

4. Tag/Label Definitions

Tag Format: {category}-{value} (lowercase, hyphenated)

Category Tag Examples Applied By Used By
Source organic-traffic, paid-traffic Middleware Google AI
Device mobile-user, desktop-user Frontend All
Engagement high-engagement, cart-active Middleware Shopify, Google AI
Consent analytics-consent, marketing-consent Middleware All
Lifecycle first-time-visitor, returning-customer Middleware Shopify

Tag Sync Mapping

UCP Tag Shopify Customer Tag Google AI User Property
analytics-consent ucp-analytics consent_analytics: true
marketing-consent ucp-marketing consent_marketing: true
mobile-user device-mobile device_category: mobile
high-engagement engagement-high engagement_level: high

5. Cross-Reference Quick Lookup

Frontend Field to Backend Field

Frontend (JS) Middleware (Xano) Shopify (GraphQL) Google AI
sessionId session_id metafields.ucp.session_id session_id
userId user_id customer.id user_id
email email customer.email user_email
consentStatus.analytics consent_analytics emailMarketingConsent analytics_consent
userHistory event_log metafields.ucp.user_history events
product.handle product_handle product.handle item_id
product.title product_title product.title item_name

6. Security & Authentication

Layer Method Header/Field
Shopify Storefront Access Token X-Shopify-Storefront-Access-Token
Shopify Admin Bearer Token Authorization: Bearer {token}
Middleware Webhook HMAC Signature X-Webhook-Signature
Google AI OAuth 2.0 Authorization: Bearer {oauth_token}

Signature Generation

JavaScript
// HMAC-SHA256 Webhook Signature
const signature = crypto
  .createHmac('sha256', WEBHOOK_SECRET)
  .update(JSON.stringify(payload))
  .digest('hex');

// Idempotency Key Format
const idempotencyKey = `${sessionId}_${eventType}_${Date.now()}`;

7. Glossary

Term Definition Layer(s)
11tyEleventy static site generatorBuild
BEMBlock Element Modifier CSS methodologyFrontend
GraphQLQuery language for APIsAll
IdempotencyEnsuring duplicate requests produce same resultMiddleware
MetafieldCustom data storage in ShopifyShopify
MetaobjectStructured custom data type in ShopifyShopify
UCPUniversal Commerce ProtocolAll
WebhookHTTP callback for event notificationMiddleware
WebSocketBidirectional real-time communicationFrontend/Middleware