Flujo de Captura CRM e Identity Resolution

Visión general

Crimoo captura la identidad del visitante en el momento en que ocurre un evento (form submit, compra, etc.) y la asocia a un Contact en el CRM.

Tipos de triggers (capture rules)

FORM_SUBMIT

Detecta cuando se envía un formulario HTML:

{
  "trigger": { "type": "FORM_SUBMIT", "selector": "#checkout-form" },
  "mappings": [
    { "field": "email",     "sourceType": "CSS", "source": "input[name=email]" },
    { "field": "full_name", "sourceType": "CSS", "source": "input[name=name]" },
    { "field": "phone",     "sourceType": "CSS", "source": "input[type=tel]" }
  ]
}

DATALAYER_EVENT

Detecta eventos en window.dataLayer:

{
  "trigger": { "type": "DATALAYER_EVENT", "eventName": "purchase" },
  "mappings": [
    { "field": "email",          "sourceType": "DATALAYER",  "source": "ecommerce.user.email" },
    { "field": "purchase_value", "sourceType": "DATALAYER",  "source": "ecommerce.purchase.total" },
    { "field": "utm_source",     "sourceType": "URL_PARAM",  "source": "utm_source" },
    { "field": "ga_session",     "sourceType": "COOKIE",     "source": "_ga_XXXXXXXXXX" }
  ]
}

Source types disponibles

SourceType	Descripción	Ejemplo source
CSS	Valor de un elemento DOM	#form input[type=email]
DATALAYER	Path en window.dataLayer	ecommerce.user.email
URL_PARAM	Query parameter de la URL	utm_source
COOKIE	Valor de una cookie del browser	_ga_XXXXXXXXXX

Identity merge logic

Cookies first-party generadas

Cookie	Duración	Propósito
cid	400 días	Contact ID (vincula device a contacto del CRM)
_crimoo_uid	400 días	Device ID persistente (cross-session)
_crimoo_sid	1 día	Session ID (se renueva cada sesión)

Todas: HttpOnly, Secure, SameSite=None (para funcionar cross-domain en iframes).

Batch flush de contactos a node-api

gtm-fabric acumula contactos capturados y los envía a node-api cada 5 segundos:

Ver Outbound Webhooks para el detalle completo del flujo de entrega.

CRM Inspector

Qué es

Herramienta de diagnóstico y configuración que permite verificar la captura de datos en tiempo real desde el sitio del cliente. El admin puede abrir una sesión de debug, inspeccionar los eventos que se disparan, validar las reglas de captura y crear reglas nuevas sin salir del flujo.

Flujo

1. El admin abre Inspector desde Crimoo UI, lo que dispara POST /api/debug/sessions para crear una sesión de debug.
2. Se abre una nueva ventana del navegador con la URL del sitio del cliente y un token de debug como query parameter.
3. El script de identidad (crimoo.js) detecta el token en la URL y lo valida con GET /api/debug/validate/{token}.
4. Si el token es válido, se carga crimoo-debug-panel.js (app Preact compilada como IIFE) y se monta dentro de un Shadow DOM para evitar conflictos de estilos con el sitio.
5. El panel muestra 5 tabs: Identity, Events, Rules, Forms, Network.
6. Los eventos capturados se envían al admin UI en tiempo real via SSE (GET /api/debug/sessions/{id}/stream).
7. El admin puede crear reglas de captura inline desde el panel; la comunicación con el admin Angular se realiza via window.postMessage.

Inspector v2 (Preact)

• Proyecto separado: crimoo-inspector (Preact + Vite).
• Se compila a un IIFE bundle que se sirve como archivo estático desde gtm-fabric (/api/debug-panel.js).
• Panel flotante movible y redimensionable, montado en Shadow DOM para aislamiento total de estilos.
• Captura todos los eventos del dataLayer mediante polling cada 500ms.
• Eventos agrupados por tipo con filtros interactivos.
• Formulario inline para crear reglas de captura, comunicación con el admin Angular via postMessage.

Endpoints involucrados

Método	Endpoint	Descripción
POST	/api/debug/sessions	Crear sesión de debug
GET	/api/debug/validate/{token}	Validar token de debug
GET	/api/debug/sessions/{id}/stream	SSE stream de eventos hacia el admin
POST	/api/debug/sessions/{id}/events	Enviar eventos capturados (credentials: 'omit')
DELETE	/api/debug/sessions/{id}	Cerrar sesión de debug
GET	/api/debug-panel.js	Servir el bundle del panel Preact