Mesma home para quem chegou do Google Ads, do e-mail de reativação e do orgânico? Veja como a Croct entrega conteúdo diferente por contexto, direto no seu front-end.
Índice do artigo
Para se aprofundar
Para se aprofundar, o time da Métricas Boss trata desse assunto em: Personalização na prática: como criar experiências relevantes de verdade.
- O que é a Croct?
- Os conceitos: slots, conteúdo e experiências
- Instalação: JavaScript e Next.js
- fetchContent: buscando conteúdo personalizado
- CQL: consultas sobre o contexto do usuário
- Usuários anônimos e identificados
- Privacidade e dados enviados
- Os erros que mais aparecem
- Perguntas frequentes sobre Croct
Personalização costuma morrer em dois lugares: no time de marketing, que depende de dev para trocar um banner, e no time de dev, que não quer um script de terceiro reescrevendo a página. A proposta da Croct é resolver os dois com um CMS headless que já nasce personalizável.
O que é a Croct?
A Croct é uma plataforma de personalização, CMS headless e experimentação, com SDKs, APIs e analytics. O conteúdo é modelado em slots, editado pelo time de negócio e consumido pelo front-end via SDK, com variações por público e testes.
Em uma frase: a Croct deixa o marketing trocar e personalizar conteúdo sem deploy, e o dev controlar onde e como esse conteúdo é renderizado.
Os conceitos: slots, conteúdo e experiências
Um slot é um espaço do site com uma estrutura de conteúdo definida, como o hero da home (título, subtítulo, CTA, imagem). O time de marketing cria versões desse conteúdo para públicos diferentes e experimentos; o front-end só pede “o conteúdo do slot home-hero” e recebe a versão certa para aquele usuário.
Slots têm versionamento, o que evita que uma mudança de estrutura quebre páginas já publicadas.
Instalação: JavaScript e Next.js
JavaScript (Plug JS). Instale @croct/plug via npm e inicialize com o App ID, ou carregue o script direto no head das páginas que vão personalizar ou rastrear eventos.
import croct from '@croct/plug';
croct.plug({ appId: 'SEU_APP_ID' });
Next.js (Plug Next). Instale @croct/plug-next, defina as variáveis de ambiente CROCT_API_KEY e NEXT_PUBLIC_CROCT_APP_ID e configure o middleware que popula o contexto da requisição. No front, o componente CroctProvider deve ficar no topo da árvore, acima de qualquer componente personalizado.
O CroctProvider aceita modo debug (útil para diagnosticar integração) e uma função para sanitizar URLs antes do envio, removendo tokens ou dados pessoais dos parâmetros.
fetchContent: buscando conteúdo personalizado
No Next.js, a busca de conteúdo acontece no servidor com fetchContent, passando o ID do slot:
import { fetchContent } from '@croct/plug-next/server';
export async function HomeHero() {
const { content } = await fetchContent('home-hero');
return <h1>{content.title}</h1>;
}
Buscar no servidor tem uma vantagem direta para SEO e performance: o conteúdo personalizado chega renderizado no HTML, sem flicker. Há ainda a opção de buscar o conteúdo estático padrão do slot, útil para páginas totalmente cacheadas.
Para multi-idioma, o SDK detecta o locale do Internationalized Routing do Next.js; sem conteúdo no idioma pedido, usa o padrão do workspace. Códigos como pt-br são aceitos.
A página de integração da Croct gera o código pronto para cada slot, o que acelera a implementação.
CQL: consultas sobre o contexto do usuário
A Croct tem uma linguagem de consulta, a CQL, para avaliar condições sobre o usuário em tempo real. Em Next.js, você usa a função evaluate ou o template literal cql:
import { cql } from '@croct/plug-next/server';
const cidades = ['São Paulo', 'Rio de Janeiro'];
const ehCidadeAlvo = await cql`location's city is in ${cidades}`;
A diferença: o cql faz a interpolação automaticamente, mas não aceita opções; o evaluate aceita opções, mas a interpolação é manual.
Usuários anônimos e identificados
Por padrão, todos os usuários são anônimos. Em áreas logadas, vale ligar o perfil da Croct ao ID do usuário na sua aplicação, para manter a personalização consistente entre dispositivos e sessões.
Um cuidado em chamadas server-side fora do SDK de Next.js: se o identificador do cliente não for enviado, o usuário é tratado como anônimo e sem contexto de sessão; sem user agent, os dados de dispositivo ficam limitados; sem IP, a localização fica limitada.
Privacidade e dados enviados
Personalização usa dado de contexto: localização aproximada, dispositivo, origem, comportamento. Use a sanitização de URL para retirar parâmetros sensíveis, não envie dado pessoal como atributo sem base legal e documente, junto do plano de mensuração, quais atributos alimentam cada público.
Os erros que mais aparecem
- CroctProvider abaixo de componentes personalizados, deixando parte da página sem contexto.
- Chamadas server-side sem ID do cliente, tratando todo mundo como anônimo.
- Mudança na estrutura do slot sem versionamento.
- URLs com tokens ou e-mail enviadas sem sanitização.
- Personalização sem grupo de controle, impossível de medir.
Perguntas frequentes sobre Croct
O que é a Croct?
Uma plataforma de personalização, CMS headless e experimentação, com SDKs e APIs para entregar conteúdo diferente por público.
A Croct funciona com Next.js?
Sim, com o SDK @croct/plug-next, que busca conteúdo no servidor com fetchContent.
O que é um slot na Croct?
Um espaço do site com estrutura de conteúdo definida, cujas versões são escolhidas por público ou experimento.
Personalização server-side ajuda o SEO?
Ajuda na performance e evita flicker, porque o conteúdo chega renderizado no HTML. A versão padrão do slot deve continuar relevante para o robô de busca.
O que é CQL?
A linguagem de consulta da Croct para avaliar condições sobre o contexto do usuário, como cidade ou comportamento.
Posso personalizar por idioma?
Sim. O SDK usa o locale do roteamento do Next.js e cai no idioma padrão quando não há conteúdo traduzido.