CRM Inspector (crimoo-inspector)

Overview

Herramienta de diagnóstico y configuración inyectada en sitios de clientes durante sesiones de debug. Permite verificar la captura de datos, explorar eventos del dataLayer, escanear formularios, y crear reglas de captura sin salir del sitio.

Stack

• Framework: Preact 10 (~3KB)
• Build: Vite → IIFE bundle único (~15KB gzip)
• Aislamiento: Shadow DOM (CSS isolation completa)
• Repo: https://github.com/crimoo-latest/crimoo-inspector

Arquitectura

El Inspector se compila a un solo archivo JS que se sirve desde gtm-fabric como static resource (/api/debug-panel.js). El script de identidad (generado por CustomLoaderService en gtm-proxy) lo carga dinámicamente cuando detecta un token de debug en la URL.

crimoo-inspector/
├── src/
│   ├── index.tsx          # Entry: mount en Shadow DOM
│   ├── App.tsx            # Shell: Panel + Tabs + Context
│   ├── components/
│   │   ├── Panel.tsx      # Ventana flotante (drag, resize)
│   │   ├── TitleBar.tsx   # Barra de título con logo
│   │   ├── Tabs.tsx       # Navegación entre tabs
│   │   ├── IdentityTab.tsx
│   │   ├── EventsTab.tsx  # Eventos agrupados + filtro + crear regla
│   │   ├── RulesTab.tsx
│   │   ├── FormsTab.tsx   # Scan de formularios + crear regla
│   │   ├── NetworkTab.tsx
│   │   └── CreateRuleForm.tsx  # Formulario inline de crear regla
│   ├── hooks/
│   │   ├── useDrag.ts
│   │   ├── useResize.ts
│   │   ├── useEvents.ts       # Polling de __events y __netlog
│   │   └── useRuleCreator.ts  # postMessage al admin
│   ├── utils/
│   │   └── flatten.ts         # Flatten de payloads anidados
│   └── styles/
│       └── panel.css          # CSS inyectado en Shadow DOM
└── dist/
    └── crimoo-debug-panel.js  # Bundle IIFE → gtm-fabric static

Tabs

Tab	Función
Identity	Device ID, Session ID, cookies, atribución UTM
Events	Todos los eventos del dataLayer agrupados por tipo, con filtro y botón "+ rule"
Rules	Reglas de captura configuradas con mappings
Forms	Scan de formularios de la página, muestra qué inputs tienen regla
Network	Log de requests interceptados con IDs inyectados

Creación de reglas inline

El Inspector permite crear reglas sin salir del sitio del cliente via postMessage:

1. Usuario clickea "+ rule" en un evento o formulario
2. Se abre formulario inline con campos detectados y dropdowns de campos CRM
3. Al confirmar: window.opener.postMessage({ type: 'crimoo:create-rule', rule, containerId })
4. El admin Angular (crm-inspector.ts) escucha el mensaje y llama crmConfigService.createRule()
5. Responde con { type: 'crimoo:rule-created', success: true }

Flatten de payloads

Los eventos del dataLayer pueden tener objetos anidados (ej: ecommerce). El Inspector los aplana con dot notation:

• Primitivos: ecommerce.item_list_name → seleccionable como campo
• Arrays: ecommerce.items → mostrado como array[N] no mapeable
• Profundidad máxima: 3 niveles

Build y deploy

cd crimoo-inspector
npm run build          # → dist/crimoo-debug-panel.iife.js
# Copiar a gtm-fabric:
cp dist/crimoo-debug-panel.iife.js ../gtm-fabric/src/main/resources/static/crimoo-debug-panel.js
# Redesplegar gtm-fabric

Dependencia con otros servicios

• gtm-fabric: sirve el bundle como /api/debug-panel.js, maneja sesiones de debug y SSE
• gtm-proxy: genera el script de identidad que carga el panel, forwarded /api/* a fabric
• node-api: proxy de sesiones de debug desde Angular UI
• ui-angular: crm-inspector.ts escucha postMessage para crear reglas