Integrações e Migrações da Plataforma Croct

O que Integrações e Migrações da Plataforma Croct faz?

Cada integração aqui se baseia em um SDK da Croct em funcionamento. Elas ou alimentam dados (eventos, atributos de perfil), enviam dados da Croct para fora (Clarity) ou renderizam conteúdo de slot dentro do conteúdo de uma plataforma (CMS, ID de formulário do HubSpot). As migrações substituem flags ou experiências de outra ferramenta por slots.

Escolha a integração

Plataforma / objetivo	O que a integração faz	Método de instalação	Referência
Storyblok	Aplicativo Optimize vincula blocos a slots; o SDK troca blocos vinculados durante a busca de histórias (JS, PHP)	Aplicativo Storyblok + croct init ou @croct/plug-storyblok / croct/plug-storyblok	storyblok.md
Sanity	Busca de slot com conteúdo do Sanity como fallback; nenhum pacote Croct	croct init + fetchContent	headless-cms.md
Strapi	Mapeia componentes de zona dinâmica para slots através de um slot de mapeamento	croct init + fetchContent	headless-cms.md
Shopify Hydrogen	Eventos automáticos de vitrine, identificação de cliente; o uso do SDK reside no skill croct-integrate-sdk	croct init (SDK Hydrogen)	ecommerce.md
Shopify checkout / pedidos (Liquid ou Hydrogen)	Pixel personalizado rastreia checkoutStarted, orderPlaced, além de eventos personalizados	Plug-in de vitrine + pixel personalizado do Shopify	ecommerce.md
Tema Shopify Liquid	SDK JavaScript para conteúdo; integração GTM para eventos; pixel para checkout	Tags de script	ecommerce.md
VTEX Store Framework (VTEX IO)	Encaminha eventos de loja como metas e eventos de e-commerce; enriquece perfis	Script vtex.js ou GTM	ecommerce.md
Google Tag Manager / camada de dados GA4	Encaminha eventos da camada de dados recomendados como metas e eventos de e-commerce	Script google-tag-manager.js ou GTM	analytics-and-crm.md
Microsoft Clarity	Marca sessões do Clarity com experiências, públicos e variantes de experimento da Croct	Script clarity.js ou GTM	analytics-and-crm.md
Formulários HubSpot	Metas de submissão, enriquecimento de perfil, ID do formulário servido a partir de um slot para testes	Código ao redor do embed do HubSpot	analytics-and-crm.md
6sense, Demandbase	Escreve atributos ricos de firmographics no perfil	Script Croct ou GTM	firmographics.md
Clearbit Reveal, ZoomInfo WebSights	Escreve atributos da empresa no perfil via código que você adiciona	HTML Personalizado do GTM	firmographics.md
Migrando de Mutiny, Ninetailed	Mapeamento de conceitos e substituição passo a passo por slots, públicos, experimentos	croct init + slots por área	migrations.md

Leia apenas a referência para a plataforma em questão. Se a plataforma não estiver listada, a documentação não possui integração dedicada: diga isso e verifique https://docs.croct.com/llms.txt antes de improvisar.

Regras transversais

1. SDK primeiro. Toda integração requer o SDK da Croct na página ou servidor. Scripts de integração não fazem nada sem ele. Configure-o com croct init ou veja o skill croct-integrate-sdk.
2. Prefira croct init para Storyblok, Sanity, Strapi, Hydrogen e migrações. Ele detecta a stack e conecta o SDK (e para Storyblok JS, envolve storyblokInit com withCroct). Use os passos manuais apenas quando o usuário solicitar ou o CLI não puder conectar (por exemplo, PHP Storyblok sem um framework suportado).
3. O conteúdo do CMS é sempre o fallback. Passe o CMS existente ou conteúdo codificado como fallback para que requisições falhas ou lentas renderizem a página de hoje. Para Sanity, Strapi e Ninetailed, pergunte ao usuário onde o conteúdo padrão deve residir (Croct, recomendado, ou no CMS via metadata.contentSource === 'slot'). Veja headless-cms.md.
4. Componentes Croct espelham o schema do CMS com os mesmos nomes de atributos, para que o conteúdo do slot e o conteúdo do CMS sejam intercambiáveis no mesmo componente de renderização.
5. Rastreie metas antes de publicar qualquer experiência ou experimento, ou dados iniciais mostram exposições sem conversões.
6. Dados firmográficos não estão disponíveis na primeira visualização de página. Projete experiências baseadas em conta para ativar em visualizações de página posteriores; use campanha, referenciador ou localização para a primeira impressão.
7. Atributos personalizados no CQL eliminam o prefixo custom.: custom.firmographics.profile.industry é user's firmographics's profile's industry. Perfis permitem no máximo 10 atributos personalizados. Para qualquer coisa além desses exemplos, veja o skill croct-cql.
8. Especificidades do Storyblok: Optimize requer o plano Scale e aprovação do fornecedor Storyblok (via suporte Croct). Campos de tabela e referência não podem ser personalizados.

Scripts de integração CDN

Todos carregam de https://cdn.croct.io/plug-integration/:

Script	Onde	Momento do carregamento
google-tag-manager.js	<head> ou <body>, ou GTM	Qualquer; reproduz a camada de dados
clarity.js	<head> ou <body>, ou GTM	Qualquer; aguarda o Clarity
vtex.js	<head> ou <body>, ou GTM	O mais cedo possível; eventos anteriores são perdidos
6sense.js, demandbase.js	<head> ou <body>, ou GTM	Aguarda o provedor identificar o visitante
shopify-pixel.js	Liquid layout/theme.liquid antes de </head>, com defer	Qualquer; registra-se no SDK quando carrega
shopify-pixel-tracker.js	Importado dentro do pixel personalizado do Shopify	n/a

Receita de tag GTM (repasse ao usuário)

Para qualquer script acima oferecido "via GTM": Tags > Nova; nomeie (por exemplo, Enviar eventos da camada de dados para a Croct); tipo de tag HTML Personalizado; cole a tag <script src="...">; gatilho Inicialização - Todas as Páginas; Salvar, depois Enviar para publicar o contêiner.

Fluxo de trabalho

1. Identifique a plataforma e o objetivo da tabela; abra sua referência.
2. Confirme os pré-requisitos listados ali (conta, SDK, tag do provedor, plano).
3. Faça as alterações de código. Deixe as etapas do painel (aplicativo Storyblok, admin Shopify, GTM, aplicativo admin Croct) para o usuário como uma lista de verificação concisa; o agente não pode realizá-las.
4. Forneça ao usuário as etapas de verificação da referência.

Pare e pergunte

• Qual SDK ou framework o site usa, se o repositório não tornar isso óbvio.
• Para integrações CMS e Ninetailed: se o conteúdo padrão deve residir na Croct ou no CMS.
• Para o pixel do Shopify: se ele deve ser executado para todos os visitantes ou apenas com consentimento de análise. Esta é uma decisão legal para o usuário.
• Para firmografia: qual provedor eles licenciam. Não adicione tags de provedor que eles não possuem.

Não faça

• Não invente nomes de atributos para 6sense ou Demandbase; use as tabelas na referência.
• Não tente rastrear o checkout do Shopify com o SDK; o checkout não executa scripts de vitrine. Use o pixel.
• No Hydrogen, não espere que o pixel do Shopify funcione em localhost, previews do Oxygen ou um domínio de checkout que não seja um subdomínio da vitrine (a documentação declara essa ressalva para o Hydrogen).
• Não use o script VTEX para FastStore; use a integração GTM.
• Não importe públicos do Mutiny ou Ninetailed; a documentação diz que eles são reescritos em CQL.
• Não migre uma ferramenta para a qual a documentação não tenha guia de migração (apenas Mutiny e Ninetailed existem); diga isso e verifique https://docs.croct.com/llms.txt primeiro.

Documentação ao vivo

• Índice: https://docs.croct.com/llms.txt
• Qualquer página como markdown: acrescente .md, por exemplo, https://docs.croct.com/immersion/integrations/ecommerce/vtex.md
• Pesquisa: https://docs.croct.com/api/search.md?term=<termos>