croct-tech/agent-skills

Integraciones y migraciones de la plataforma Croct

Cada integración aquí se basa en un SDK de Croct en funcionamiento. O bien alimentan datos (eventos, atributos de perfil), envían datos de Croct (Clarity), o renderizan contenido de slot dentro del contenido de una plataforma (CMS, ID de formulario de HubSpot). Las migraciones reemplazan flags o experiencias de otra herramienta con slots.

Elige la integración

Plataforma / objetivo	Qué hace la integración	Método de instalación	Referencia
Storyblok	La app de Optimize vincula bloques a slots; el SDK intercambia bloques vinculados durante las solicitudes de historia (JS, PHP)	App de Storyblok + croct init o @croct/plug-storyblok / croct/plug-storyblok	storyblok.md
Sanity	Fetch de slot con contenido de Sanity como fallback; sin paquete de Croct	croct init + fetchContent	headless-cms.md
Strapi	Mapea componentes de zona dinámica a slots a través de un slot de mapeo	croct init + fetchContent	headless-cms.md
Shopify Hydrogen	Eventos automáticos de tienda, identificación de clientes; el uso del SDK vive en el skill croct-integrate-sdk	croct init (SDK de Hydrogen)	ecommerce.md
Shopify checkout / pedidos (Liquid o Hydrogen)	El píxel personalizado rastrea checkoutStarted, orderPlaced y eventos personalizados	Plugin de tienda + píxel personalizado de Shopify	ecommerce.md
Tema Liquid de Shopify	SDK de JavaScript para contenido; integración GTM para eventos; píxel para checkout	Etiquetas de script	ecommerce.md
VTEX Store Framework (VTEX IO)	Reenvía eventos de tienda como objetivos y eventos de e-commerce; enriquece perfiles	Script vtex.js o GTM	ecommerce.md
Google Tag Manager / capa de datos GA4	Reenvía eventos recomendados de la capa de datos como objetivos y eventos de e-commerce	Script google-tag-manager.js o GTM	analytics-and-crm.md
Microsoft Clarity	Etiqueta sesiones de Clarity con experiencias, audiencias y variantes de experimentos de Croct	Script clarity.js o GTM	analytics-and-crm.md
Formularios de HubSpot	Objetivos de envío, enriquecimiento de perfil, ID de formulario servido desde un slot para pruebas	Código alrededor del embed de HubSpot	analytics-and-crm.md
6sense, Demandbase	Escribe atributos firmographics enriquecidos en el perfil	Script de Croct o GTM	firmographics.md
Clearbit Reveal, ZoomInfo WebSights	Escribe atributos de empresa en el perfil mediante código que agregas	GTM Custom HTML	firmographics.md
Migración desde Mutiny, Ninetailed	Mapeo conceptual y reemplazo paso a paso con slots, audiencias, experimentos	croct init + slots por área	migrations.md

Lee solo la referencia de la plataforma en cuestión. Si la plataforma no aparece en la lista, la documentación no tiene una integración dedicada: dilo y revisa https://docs.croct.com/llms.txt antes de improvisar.

Reglas transversales

1. SDK primero. Toda integración requiere el SDK de Croct en la página o servidor. Los scripts de integración no hacen nada sin él. Configúralo con croct init o consulta el skill croct-integrate-sdk.
2. Prefiere croct init para Storyblok, Sanity, Strapi, Hydrogen y migraciones. Detecta el stack y configura el SDK (y para Storyblok JS, envuelve storyblokInit con withCroct). Usa los pasos manuales solo cuando el usuario lo solicite o la CLI no pueda configurarlo (por ejemplo, Storyblok PHP sin un framework soportado).
3. El contenido del CMS es siempre el fallback. Pasa el contenido existente del CMS o hardcodeado como fallback para que las solicitudes fallidas o lentas rendericen la página actual. Para Sanity, Strapi y Ninetailed, pregunta al usuario dónde debería vivir el contenido por defecto (Croct, recomendado, o el CMS mediante metadata.contentSource === 'slot'). Consulta headless-cms.md.
4. Los componentes de Croct reflejan el esquema del CMS con los mismos nombres de atributos, por lo que el contenido del slot y el del CMS son intercambiables en el mismo componente de renderizado.
5. Rastrea objetivos antes de publicar cualquier experiencia o experimento, o los datos tempranos mostrarán exposiciones sin conversiones.
6. Los datos firmográficos no están disponibles en la primera vista de página. Diseña experiencias basadas en cuentas para activarse en vistas de página posteriores; usa campaña, referente o ubicación para la primera impresión.
7. Los atributos personalizados en CQL omiten el prefijo custom.: custom.firmographics.profile.industry es industry del profile de firmographics del user. Los perfiles permiten como máximo 10 atributos personalizados. Para cualquier caso más allá de estos ejemplos, consulta el skill croct-cql.
8. Específicos de Storyblok: Optimize requiere el plan Scale y la aprobación del proveedor de Storyblok (a través del soporte de Croct). Los campos de tabla y referencia no se pueden personalizar.

Scripts de integración CDN

Todos se cargan desde https://cdn.croct.io/plug-integration/:

Script	Dónde	Momento de carga
google-tag-manager.js	<head> o <body>, o GTM	Cualquiera; reproduce la capa de datos
clarity.js	<head> o <body>, o GTM	Cualquiera; espera a Clarity
vtex.js	<head> o <body>, o GTM	Tan pronto como sea posible; los eventos anteriores se pierden
6sense.js, demandbase.js	<head> o <body>, o GTM	Espera a que el proveedor identifique al visitante
shopify-pixel.js	Liquid layout/theme.liquid antes de </head>, con defer	Cualquiera; se registra con el SDK cuando carga
shopify-pixel-tracker.js	Importado dentro del píxel personalizado de Shopify	n/a

Receta para etiqueta GTM (transmítela al usuario)

Para cualquier script ofrecido "a través de GTM": Etiquetas > Nueva; asígnale un nombre (por ejemplo, Enviar eventos de la capa de datos a Croct); tipo de etiqueta HTML personalizado; pega la etiqueta <script src="...">; activador Inicialización - Todas las páginas; Guarda, luego Enviar para publicar el contenedor.

Flujo de trabajo

1. Identifica la plataforma y el objetivo de la tabla; abre su referencia.
2. Confirma los requisitos previos que se indican allí (cuenta, SDK, etiqueta del proveedor, plan).
3. Realiza los cambios de código. Deja los pasos del panel de control (app de Storyblok, administrador de Shopify, GTM, app de administración de Croct) al usuario como una lista de verificación concisa; el agente no puede realizarlos.
4. Proporciona al usuario los pasos de verificación de la referencia.

Detente y pregunta

• Qué SDK o framework utiliza el sitio, si el repositorio no lo deja claro.
• Para integraciones CMS y Ninetailed: si el contenido por defecto debe vivir en Croct o en el CMS.
• Para el píxel de Shopify: si debe ejecutarse para todos los visitantes o solo con consentimiento de analytics. Esta es una decisión legal para el usuario.
• Para firmografía: qué proveedor tienen licencia. No agregues etiquetas de proveedores que no tengan.

No hagas

• No inventes nombres de atributos para 6sense o Demandbase; usa las tablas de la referencia.
• No intentes rastrear el checkout de Shopify con el SDK; el checkout no ejecuta scripts de tienda. Usa el píxel.
• En Hydrogen, no esperes que el píxel de Shopify funcione en localhost, vistas previas de Oxygen o un dominio de checkout que no sea un subdominio de la tienda (la documentación indica esta advertencia para Hydrogen).
• No uses el script de VTEX para FastStore; usa la integración GTM.
• No importes audiencias de Mutiny o Ninetailed; la documentación indica que se reescriben en CQL.
• No migres una herramienta para la que la documentación no tenga una guía de migración (solo existen Mutiny y Ninetailed); dilo y revisa https://docs.croct.com/llms.txt primero.

Documentos en vivo

• Índice: https://docs.croct.com/llms.txt
• Cualquier página como markdown: añade .md, por ejemplo https://docs.croct.com/immersion/integrations/ecommerce/vtex.md
• Búsqueda: https://docs.croct.com/api/search.md?term=<términos>