# Instalação por plataforma

Guias manuais para inserir o script da Pulsant em aplicações e construtores de sites.

## Antes de escolher o guia

Estas instruções são integrações manuais do script da Pulsant; não são plugins, apps publicados ou integrações nativas dessas plataformas. Configure os endereços públicos do script e da coleta para seu ambiente, substitua SEU_SITE_ID pelo ID público do site e autorize analytics pela sua CMP. O snippet respeita o consentimento pendente. Para persistência ou gravação de comportamento, integre cada finalidade separadamente. Se o ambiente usa Content Security Policy, permita as origens configuradas do script e da coleta.

```
<script async src="https://api.pulsant.app/tracker.js" data-collect-url="https://api.pulsant.app" data-site-id="SEU_SITE_ID"></script>
```

## Next.js App Router

Crie um componente de instalação no layout do site ou no layout do grupo de rotas que deve receber analytics. O exemplo carrega o script depois que a página fica interativa; os atributos do site são encaminhados ao elemento script. Se a aplicação usa um CMP, envie consentimento depois da escolha da pessoa. A Pulsant acompanha mudanças de rota da SPA, então não injete o script em cada página.

```
import Script from "next/script";

export function PulsantTracker() {
  return (
    <Script
      src="URL_DO_SCRIPT"
      strategy="afterInteractive"
      data-collect-url="URL_DA_COLETA"
      data-site-id="SEU_SITE_ID"
    />
  );
}
```
- [Next.js — carregar scripts no App Router](https://nextjs.org/docs/app/guides/scripts)


## React com Vite ou outro cliente SPA

Para um app com HTML de entrada, adicione a tag uma vez ao documento raiz. Se preferir renderizar o script pelo React, mantenha o mesmo src e async em um componente raiz estável; não monte uma nova cópia por rota. O tracker observa pushState, replaceState e popstate por conta própria.

```
<script async src="https://api.pulsant.app/tracker.js" data-collect-url="https://api.pulsant.app" data-site-id="SEU_SITE_ID"></script>
```
- [React — componente script](https://react.dev/reference/react-dom/components/script)


## Vue e Nuxt

Em Vue sem SSR, use o documento HTML de entrada do app. No Nuxt, declare o script uma vez no app.vue ou em um layout compartilhado com useHead. Configure script e ID como valores públicos de ambiente e não duplique o carregamento em páginas filhas.

```
useHead({
  script: [{
    src: "URL_DO_SCRIPT",
    async: true,
    "data-collect-url": "URL_DA_COLETA",
    "data-site-id": "SEU_SITE_ID"
  }]
});
```
- [Nuxt Scripts — inclusão de scripts via useHead](https://scripts.nuxt.com/docs/getting-started)
- [Nuxt — useHead](https://nuxt.com/docs/api/composables/use-head)


## Svelte e SvelteKit

Em uma aplicação Svelte, coloque o script no documento de entrada ou no componente de layout compartilhado. O elemento svelte:head insere a tag no head do documento também durante SSR. Mantenha-o no layout raiz para não criar uma tag por rota.

```
<svelte:head>
  <script
    async
    src="URL_DO_SCRIPT"
    data-collect-url="URL_DA_COLETA"
    data-site-id="SEU_SITE_ID"
  ></script>
</svelte:head>
```
- [Svelte — svelte:head](https://svelte.dev/docs/svelte/svelte-head)


## Astro

Adicione o script ao layout compartilhado. Como o script remoto recebe atributos além de src, use is:inline para o Astro emitir o elemento sem tentar empacotá-lo. O tracker observa chamadas às APIs padrão de histórico; se seu projeto usa view transitions, confira as rotas publicadas para confirmar um pageview por navegação antes de adicionar eventos manuais.

```
<script is:inline async src="URL_DO_SCRIPT" data-collect-url="URL_DA_COLETA" data-site-id="SEU_SITE_ID"></script>
```
- [Astro — scripts do cliente e carregamento externo](https://docs.astro.build/en/guides/client-side-scripts/)


## HTML estático

Cole o snippet no head compartilhado do documento, uma vez por página. Mantenha async e confira se o hostname enviado pertence à lista autorizada do site. Para páginas independentes sem navegação SPA, o script registra o pageview inicial automaticamente.

```
<script async src="https://api.pulsant.app/tracker.js" data-collect-url="https://api.pulsant.app" data-site-id="SEU_SITE_ID"></script>
```

## WordPress — código manual no tema

Não existe plugin Pulsant publicado. Para uma instalação mantida no tema, use um tema filho e enfileire o script no frontend. O filtro abaixo inclui os atributos públicos necessários; adapte os dois endereços e o ID. wp_enqueue_script aceita a estratégia async nas versões atuais documentadas pelo WordPress. Uma atualização ou troca de tema pode exigir reaplicar a alteração.

```
add_action('wp_enqueue_scripts', function () {
  wp_enqueue_script('pulsant-tracker', 'URL_DO_SCRIPT', [], null, [
    'strategy' => 'async',
    'in_footer' => false,
  ]);
});

add_filter('script_loader_tag', function ($tag, $handle, $src) {
  if ($handle !== 'pulsant-tracker') return $tag;
  return str_replace(
    '<script ',
    '<script data-collect-url="' . esc_attr('URL_DA_COLETA') . '" data-site-id="' . esc_attr('SEU_SITE_ID') . '" ',
    $tag
  );
}, 10, 3);
```
- [WordPress — wp_enqueue_script](https://developer.wordpress.org/reference/functions/wp_enqueue_script/)


## Framer

Use Project Settings → Custom Code para adicionar uma única instalação ao site inteiro. Escolha a posição permitida pelo projeto, salve e publique; alterações de custom code não aparecem apenas por editar um preview. Não cole outra cópia em cada página se o código já estiver configurado globalmente.

```
<script async src="https://api.pulsant.app/tracker.js" data-collect-url="https://api.pulsant.app" data-site-id="SEU_SITE_ID"></script>
```
- [Framer — adicionar custom code](https://www.framer.com/help/articles/how-to-add-custom-code/)


## Webflow

No painel do site, abra Site settings → Custom code e insira o snippet em Head code. Salve e publique o site: a alteração pode não aparecer no preview do Designer. Se usar código por página, aplique-o somente nas páginas públicas que pertencem ao mesmo site Pulsant.

```
<script async src="https://api.pulsant.app/tracker.js" data-collect-url="https://api.pulsant.app" data-site-id="SEU_SITE_ID"></script>
```
- [Webflow — custom code em head e body](https://help.webflow.com/hc/en-us/articles/33961357265299-Custom-code-in-head-and-body-tags)


## Shopify — storefront do tema

Não existe app Pulsant publicado nesta versão. Duplique o tema como cópia de segurança e, no editor de código, adicione o snippet em layout/theme.liquid antes de fechar head. A edição é manual, pode ser sobrescrita por uma atualização ou troca de tema e cobre o storefront; não presume acesso ao checkout hospedado da Shopify.

```
<script async src="https://api.pulsant.app/tracker.js" data-collect-url="https://api.pulsant.app" data-site-id="SEU_SITE_ID"></script>
```
- [Shopify — editar código do tema](https://help.shopify.com/en/manual/online-store/themes/theme-code)


## Google Tag Manager — instalação após consentimento

Crie uma tag Custom HTML e use um evento do seu CMP que só ocorra depois da concessão de analytics. O trecho prepara a fila, registra o consentimento concedido antes do carregamento e insere o script uma única vez. Configure a revogação no CMP para chamar revoke. Não use um gatilho anterior ao consentimento para esta tag; se sua política exigir que o script nem carregue antes da autorização, esse gatilho é essencial.

```
<script>
window.pulsant = window.pulsant || Object.assign(function (...args) { window.pulsant.q.push(args); }, { q: [] });
window.pulsant("consent", { analytics: true, persistent: false, behavior: false });
if (!document.getElementById("pulsant-tracker")) {
  var script = document.createElement("script");
  script.id = "pulsant-tracker";
  script.async = true;
  script.src = "URL_DO_SCRIPT";
  script.dataset.collectUrl = "URL_DA_COLETA";
  script.dataset.siteId = "SEU_SITE_ID";
  document.head.appendChild(script);
}
</script>
```
- [Google Tag Manager — Custom HTML tags](https://support.google.com/tagmanager/answer/6107167?hl=en)
- [Google Tag Manager — consent initialization](https://support.google.com/tagmanager/answer/10718549?hl=en)


## Confirme a origem e a finalidade

As origens de coleta e script são configuradas pelo ambiente; o fallback localhost serve somente ao desenvolvimento. Não copie localhost para produção. Após publicar, confirme o primeiro evento no onboarding, confira o hostname recebido e valide rotas SPA sem instalar o script novamente. O guia não cria integração com checkout nem substitui a configuração de consentimento do seu site.