Integrando o tracking do TTrack no seu site

Duas chamadas HTTP e um ID no localStorage são suficientes para conectar toda a jornada de um visitante — do primeiro clique até o cadastro — sob um único identificador.

ℹ️ A única dependência externa é o script do TTrack — sem chave de API. Depois de carregado e inicializado, o resto é fetch puro para dois endpoints.

Como funciona, em 3 passos

No carregamento da página, você inclui o script do TTrack e chama window.ttracker.init(...) — ele gera o visitor_id e salva em localStorage.t.
A cada etapa relevante do funil, você envia um evento POST para /track/event com esse mesmo ID.
Quando o visitante preenche um formulário, você envia os dados para /ajax/addmore — ainda com o mesmo ID, enriquecendo o perfil sem perder o histórico de navegação.

Identificação do visitante

Todo evento enviado precisa estar associado a um id persistente. Em vez de gerar esse ID manualmente, inclua o script do TTrack e inicialize-o — ele cuida da geração e da persistência para você.

<script src="https://cdn.ttrack.cloud/js/ajax-trackingV2.js"></script>
<script>
  window.ttracker.init({
    id: 1089,
    seed: "123",
    extra: "abc"
  });
</script>

ℹ️ É esse window.ttracker.init(...) que gera o ID do visitante. Ele não expõe o ID de outra forma — pegue o valor direto de localStorage.getItem('t') depois que o script rodar. Coloque o script antes de qualquer chamada de tracking na página.

⚠️ Esse ID vive no navegador — ele é por dispositivo/navegador, não por pessoa. Se você precisa unificar identidade entre dispositivos, isso deve ser feito depois, no seu backend, cruzando pelo e-mail enviado no formulário.

Registrar um evento de funil

<script src="https://cdn.ttrack.cloud/js/ajax-trackingV2.js"></script>
<script>
  window.ttracker.init({
    id: 1089,
    seed: "123",
    extra: "abc"
  });
</script>

⚠️ Os dois scripts acima são obrigatórios para o tracking funcionar — sem eles, localStorage.t nunca é gerado e a chamada abaixo falha.

Chame esse endpoint sempre que o visitante avançar para uma nova etapa relevante (entrada no funil, resposta a uma pergunta, visualização de uma página-chave, etc).

POST https://listen.ttrack.cloud/webhook/track/event

Headers

Content-Type: application/json

Body

{
  "id": "4821936705",
  "type": "internal",
  "status": "step_1"
}

Exemplo de chamada

// localStorage.t já existe aqui, gerado pelo init() acima
function trackEvent(status) {
  return fetch('https://listen.ttrack.cloud/webhook/track/event', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      id: localStorage.getItem('t'),
      type: 'internal',
      status: status
    })
  });
}

// dispare no evento de interesse (clique, avanço de etapa, etc)
trackEvent('step_1');

ℹ️ Envie os status sempre em ordem crescente e sem repetir o mesmo status duas vezes para o mesmo id — isso é o que permite reconstruir a jornada linearmente no dashboard.

Pipeline de status sugerido

Você define os nomes de status que fizerem sentido para o seu funil. Uma convenção comum, usada nos funis de quiz/lead do TTrack:

startbot→ clicktochannel→ lead→ clicktocadastro→ cadastro→ ftd

blocked é tratado como um estado de saída separado, fora da sequência linear — use-o quando o visitante for barrado do funil (ex: bloqueio de bot, opt-out).

blocked

Enviar dados de um lead (formulário)

<script src="https://cdn.ttrack.cloud/js/ajax-trackingV2.js"></script>
<script>
  window.ttracker.init({
    id: 1089,
    seed: "123",
    extra: "abc"
  });
</script>

⚠️ Mesma regra: os dois scripts precisam estar carregados antes do envio do formulário, para que localStorage.t já esteja gerado.

Quando o visitante preenche um formulário, envie os dados coletados junto com o mesmo id usado nos eventos — é isso que conecta o cadastro ao restante da navegação já registrada.

POST https://listen.ttrack.cloud/webhook-test/ajax/addmore

Body

{
  "id": "4821936705",
  "status": "form",
  "data": {
    "email": "visitante@exemplo.com",
    "phone": "11999998888",
    "nascimento": "1994-03-12",
    "first_name": "Ana",
    "last_name": "Souza",
    "genero": "f"
  }
}

ℹ️ genero aceita apenas "f" (mulher) ou "m" (homem). Envie exatamente esses dois valores — o campo é opcional, mas se existir no formulário do seu site, inclua-o aqui.

Exemplo de chamada

function sendLead(formData) {
  return fetch('https://listen.ttrack.cloud/webhook-test/ajax/addmore', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      id: localStorage.getItem('t'),
      status: 'form',
      data: {
        email: formData.email,
        phone: formData.phone,
        nascimento: formData.nascimento,
        first_name: formData.first_name,
        last_name: formData.last_name,
        genero: formData.genero // 'f' ou 'm'
      }
    })
  });
}

Referência de campos — `data`

Campo	Tipo	Descrição
email	string obrigatório	E-mail informado pelo visitante.
phone	string obrigatório	Telefone, com ou sem formatação — recomenda-se salvar apenas dígitos.
nascimento	string obrigatório	Data de nascimento no formato `YYYY-MM-DD`.
first_name	string obrigatório	Primeiro nome.
last_name	string obrigatório	Sobrenome.
genero	string opcional	Gênero do visitante: `"f"` para mulher ou `"m"` para homem.

Exemplo completo

Junta os três pedaços acima: os scripts do TTrack no <head>, tracking de um evento de entrada e envio de um formulário com gênero.

<!-- 1. No <head>, antes de qualquer chamada de tracking -->
<script src="https://cdn.ttrack.cloud/js/ajax-trackingV2.js"></script>
<script>
  window.ttracker.init({
    id: 1089,
    seed: "123",
    extra: "abc"
  });
</script>

// 2. Depois que o ttracker já inicializou, localStorage.t existe
const visitorId = localStorage.getItem('t');
const EVENT_URL = 'https://listen.ttrack.cloud/webhook/track/event';
const LEAD_URL = 'https://listen.ttrack.cloud/webhook-test/ajax/addmore';

// 3. Evento de entrada no funil
fetch(EVENT_URL, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ id: visitorId, type: 'internal', status: 'step_1' })
});

// 4. Envio do formulário com gênero
function onFormSubmit(formData) {
  return fetch(LEAD_URL, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      id: visitorId,
      status: 'form',
      data: {
        email: formData.email,
        phone: formData.phone,
        nascimento: formData.nascimento,
        first_name: formData.first_name,
        last_name: formData.last_name,
        genero: formData.genero // 'f' ou 'm'
      }
    })
  }).then(() =>
    fetch(EVENT_URL, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ id: visitorId, type: 'internal', status: 'step_7' })
    })
  );
}

Erros e reenvio

Os endpoints não retornam um contrato de erro documentado nesta versão. Trate falhas de rede no cliente para não travar a navegação do visitante:

fetch(EVENT_URL, { /* ... */ })
  .catch(function (err) {
    // não bloqueie o avanço do usuário por causa de uma falha de tracking
    console.warn('Falha ao registrar evento:', err);
  });

⚠️ Nunca faça o avanço de etapa do usuário depender do sucesso da chamada de tracking. O tracking deve ser "fire and forget" — a experiência do visitante vem primeiro.

Integrando o tracking do TTrack no seu site

Como funciona, em 3 passos

Identificação do visitante

Registrar um evento de funil

Headers

Body

Exemplo de chamada

Pipeline de status sugerido

Enviar dados de um lead (formulário)

Body

Exemplo de chamada

Referência de campos — data

Exemplo completo

Erros e reenvio

Referência de campos — `data`