> ## Documentation Index
> Fetch the complete documentation index at: https://docs.chargefy.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Preservar atribuição em landing pages

> Use Chargefy.js para levar UTMs e identificadores de clique da sua landing page até o Checkout hospedado.

Quando o anúncio leva primeiro para o seu site, a campanha chega na URL da
landing page — não na URL do checkout. Use `Chargefy.Checkout.trackLinks()` para
transportar esse primeiro contexto até os botões da Chargefy.

## Instalar na página da campanha

Carregue Chargefy.js e ative o rastreamento na página que recebe o tráfego:

```html theme={"theme":"css-variables"}
<script src="https://api.chargefy.io/v1/chargefy.js"></script>
<script>
  Chargefy.Checkout.trackLinks();
</script>
```

O SDK encontra links reconhecidos de Payment Link e Checkout Session, guarda o
primeiro conjunto de campanha no `localStorage` daquela origem e acrescenta os
parâmetros quando o comprador segue para o checkout.

```html theme={"theme":"css-variables"}
<a href="https://pay.chargefy.io/link/seu_link">Comprar agora</a>
```

Você pode manter o `href` limpo no HTML. A URL rastreada é composta no navegador
a partir da campanha que trouxe aquela pessoa.

## O que o SDK acompanha

* links já presentes quando a página carrega;
* links inseridos depois por JavaScript;
* mudanças no atributo `href`;
* navegação por `pushState`, `replaceState` e `popstate` em aplicações SPA;
* UTMs e identificadores de clique suportados pela Chargefy.

Ele não copia a query string inteira. Parâmetros desconhecidos, dados pessoais
e segredos não são transportados.

## Redirecionamentos criados por JavaScript

Quando o botão chama `window.location` em vez de usar uma tag `<a>`, componha a
URL explicitamente:

```js theme={"theme":"css-variables"}
const checkoutUrl = Chargefy.Checkout.createTrackedUrl(originalCheckoutUrl);

window.location.assign(checkoutUrl);
```

URLs que não apontam para `https://pay.chargefy.io/link/...` ou
`https://pay.chargefy.io/session/...` são devolvidas sem alteração.

## Como funciona o first-touch no seu site

O primeiro conjunto válido fica salvo enquanto o `localStorage` existir. Não há
um prazo automático dentro do SDK; o registro desaparece quando o navegador ou
o próprio usuário limpa esse armazenamento.

As regras de precedência são:

1. um parâmetro escrito diretamente no link de destino vence para aquela chave;
2. as demais chaves vêm do primeiro contexto salvo;
3. chamadas repetidas de `trackLinks()` não duplicam parâmetros nem
   observadores.

Exemplo: se o SDK guardou `utm_source=meta`, mas o botão já possui
`utm_source=affiliate`, o destino mantém `affiliate`. Os outros parâmetros
ausentes ainda podem ser completados pelo snapshot salvo.

<Info>
  O armazenamento é isolado por origem. `www.meusite.com` e `oferta.meusite.com`
  não compartilham o mesmo `localStorage`. Instale o SDK em cada origem que
  recebe a campanha e contém o caminho até o checkout.
</Info>

## Landing page e referrer

Além das UTMs, o SDK pode preservar a landing page e o referrer. Antes de
armazenar, a Chargefy reduz essas URLs a **origem + path**:

```text theme={"theme":"css-variables"}
https://meusite.com/oferta
```

Query string e fragmento são removidos. Caminhos de checkout que contenham
segredos também são ocultados antes de qualquer registro.

## O que o SDK não faz

* não envia uma request de atribuição enquanto a pessoa navega no seu site;
* não lê cookies de plataformas de mídia;
* não captura e-mail, telefone ou CPF;
* não cria uma nova campanha quando já existe um first-touch salvo;
* não substitui o Pixel instalado no seu próprio site;
* não cria a Checkout Session — apenas prepara a URL que leva até ela.

## Como testar

<Steps>
  <Step title="Abra a landing page com UTMs">
    Use uma janela anônima para evitar um first-touch salvo em teste anterior.
  </Step>

  <Step title="Inspecione o botão de checkout">
    Confirme que o clique navega para uma URL da Chargefy com os parâmetros
    esperados.
  </Step>

  <Step title="Conclua ou abandone o checkout">
    A sessão deve aparecer no relatório de aquisição com a origem, mídia e
    campanha recebidas.
  </Step>
</Steps>

Para a referência completa do SDK, veja [Chargefy.js para
browser](/api/chargefy-js).