The Data Layer Architecture That Makes Every Test Trustworthy

// The data layer: one object, one truth
window.dataLayer = {
  page: {
    type: "product",
    category: "shoes",
    name: "Air Max 90",
  },
  user: {
    id: "usr_abc123",
    type: "returning",
    segment: "high_value",
    isLoggedIn: true,
  },
  product: {
    id: "sku_789",
    name: "Air Max 90",
    price: 129.99,
    currency: "USD",
    category: "shoes/running",
    variant: "black/white",
    inStock: true,
  },
  cart: {
    items: 3,
    total: 287.97,
    currency: "USD",
  },
  experiment: {
    id: "checkout-redesign-q1",
    variant: "streamlined",
  },
};

// Event schema — the contract between your site and all tools
type TrackingEvents = {
  "page.viewed": {
    pageType: string;
    pageTitle: string;
    url: string;
  };
  "product.viewed": {
    productId: string;
    productName: string;
    price: number;
    currency: string;
    category: string;
  };
  "product.added_to_cart": {
    productId: string;
    productName: string;
    price: number;
    quantity: number;
    cartTotal: number;
  };
  "checkout.started": {
    cartTotal: number;
    itemCount: number;
    currency: string;
  };
  "order.completed": {
    orderId: string;
    revenue: number;
    tax: number;
    shipping: number;
    currency: string;
    items: OrderItem[];
    isFirstOrder: boolean;
    paymentMethod: string;
  };
};

// One function to emit events — all tools consume from here
function trackEvent<T extends keyof TrackingEvents>(
  eventName: T,
  properties: TrackingEvents[T]
) {
  const event = {
    name: eventName,
    properties,
    timestamp: Date.now(),
    sessionId: getSessionId(),
    userId: getUserId(),
    deviceId: getDeviceId(),
  };
 
  // Validate against schema
  if (!validateEvent(eventName, properties)) {
    console.error(`Invalid event: ${eventName}`, properties);
    reportToMonitoring("invalid_tracking_event", { eventName });
    return;
  }
 
  // Push to data layer
  window.dataLayer.push({ event: eventName, ...properties });
 
  // Send server-side (for platforms that support it)
  sendServerSide(event);
}

// GA4 adapter
function ga4Adapter(event: TrackingEvent) {
  const mapping: Record<string, string> = {
    "product.viewed": "view_item",
    "product.added_to_cart": "add_to_cart",
    "checkout.started": "begin_checkout",
    "order.completed": "purchase",
  };
 
  const ga4Event = mapping[event.name];
  if (!ga4Event) return;
 
  gtag("event", ga4Event, {
    currency: event.properties.currency,
    value: event.properties.revenue || event.properties.price,
    items: formatItemsForGA4(event.properties),
  });
}
 
// Facebook adapter
function facebookAdapter(event: TrackingEvent) {
  const mapping: Record<string, string> = {
    "product.viewed": "ViewContent",
    "product.added_to_cart": "AddToCart",
    "checkout.started": "InitiateCheckout",
    "order.completed": "Purchase",
  };
 
  const fbEvent = mapping[event.name];
  if (!fbEvent) return;
 
  // Server-side via CAPI (not client-side pixel)
  sendToFacebookCAPI(fbEvent, event.properties);
}

// Real-time event validation
function validateEvent(
  eventName: string,
  properties: Record<string, unknown>
): ValidationResult {
  const checks: ValidationCheck[] = [
    // Required fields present
    checkRequiredFields(eventName, properties),
 
    // Types are correct
    checkFieldTypes(eventName, properties),
 
    // Values are reasonable
    checkValueRanges(eventName, properties),
 
    // No duplicate events (within 1 second)
    checkDuplication(eventName, properties),
  ];
 
  return {
    valid: checks.every(c => c.passed),
    errors: checks.filter(c => !c.passed).map(c => c.error),
  };
}
 
// Example: catch common tracking bugs
function checkValueRanges(
  eventName: string,
  properties: Record<string, unknown>
): ValidationCheck {
  if (eventName === "order.completed") {
    const revenue = properties.revenue as number;
 
    // Revenue should be positive
    if (revenue <= 0) {
      return { passed: false, error: "Revenue is zero or negative" };
    }
 
    // Revenue shouldn't be absurdly high (likely a bug)
    if (revenue > 50000) {
      return { passed: false, error: `Revenue suspiciously high: ${revenue}` };
    }
 
    // Order should have items
    const items = properties.items as unknown[];
    if (!items || items.length === 0) {
      return { passed: false, error: "Order has no items" };
    }
  }
 
  return { passed: true };
}