Aplicações single-page trocam de “página” sem recarregar o HTML. Isso quebra scripts de tracking clássicos, que rodam apenas uma vez no primeiro load.
O script V2 (experimental.js) resolve isso interceptando duas APIs do navegador:
- Navigation API (
window.navigation.addEventListener('navigate', ...))
- History API (
pushState / replaceState / popstate)
Sempre que o URL muda, o script re-avalia:
- Precisa gerar novo
LeadId? (se veio um novo ttclid/fbclid/etc. na URL)
- Precisa disparar um novo step? (se
data-step-id mudou)
- Existe algum botão com
data-xtracky-checkout na nova página?
Nada a configurar
Se você usa React Router, Vue Router, SvelteKit, Next.js App Router, Nuxt ou qualquer outro roteador SPA, basta incluir o script V2 uma única vez no HTML raiz. Ele fica escutando o roteador do seu framework.
Trocando o step ID em runtime
Se você quer que cada rota tenha um step diferente sem recarregar, atualize o atributo do script (ou emita um evento custom):
Ou, mais idiomático em SPAs, dispare um evento custom pra a xTracky:
Suporte a Suspense / SSR
O script é carregado com async e não bloqueia hidratação. Em Next.js/Nuxt/SvelteKit com SSR, funciona sem tocar em nada — ele só ativa depois do primeiro DOMContentLoaded no cliente.
Não coloque o script dentro de um componente que pode ser desmontado. Coloque no HTML raiz (_app.tsx, app.html, layout.tsx, etc.). Se ele desmontar e remontar, você pode gerar LeadId duplicado.
