Script t.js de rastreamento

O t.js é um script pequeno, de cerca de 2,4 KB, para a sua página de vendas. Ele guarda a origem da visita (UTMs, IDs de clique e código de vendedor) e acrescenta esses dados aos links que levam ao checkout do Vipter, no momento do clique. Sem ele, os parâmetros ficam no endereço da página de vendas e se perdem quando o visitante clica em comprar.

A versão para o lojista, com o passo a passo no painel e o relatório de origem das vendas, está em Script de UTM e origem das vendas.

O códigoCopiar link da seção

Copie o código em Geral›Conversões›Ajustes, no card Script de UTMs para a sua página de vendas. Sem domínio próprio, ele é:

<script src="https://pay.vipter.com/t.js" async></script>

Com um domínio próprio ativo, o código copiado já vem com data-hosts="<seu domínio>".

O arquivo é servido com Content-Type: application/javascript, Cache-Control: public, max-age=3600 e Access-Control-Allow-Origin: *. Uma versão nova chega aos visitantes em até uma hora.

O que o script fazCopiar link da seção

1. Ao carregarCopiar link da seção

1. Descobre a própria tag <script>: document.currentScript ou, se não houver, o primeiro <script> cujo src contém /t.js.
2. Monta a lista de hosts do checkout: pay.vipter.com mais os valores de data-hosts, separados por vírgula, sem espaços nas pontas e em minúsculas.
3. Lê o endereço da página atual e procura estes parâmetros:

4. Se encontrou algum, grava no localStorage do seu domínio, na chave vpt_attr, no formato {"at": <milissegundos>, "v": {<parâmetro>: <valor>}}. Cada valor é cortado em 500 caracteres.

As regras de gravação:

• Campanha, primeiro toque em bloco. Se o que está guardado já tem qualquer parâmetro de campanha, os parâmetros de campanha da visita nova são ignorados, todos juntos. Se não tem, os da visita nova entram.
• IDs de clique e vendedor, último valor. Cada um que vem na visita nova substitui o guardado.
• Validade de 30 dias a partir da primeira gravação. O at é o momento da primeira gravação e não muda nas visitas seguintes. Depois de 30 dias, o que está guardado é descartado e a próxima visita com parâmetros começa do zero.
• Uma visita sem nenhum desses parâmetros não grava nada.

2. No clique num linkCopiar link da seção

O script escuta mousedown, touchstart e a tecla Enter em toda a página, na fase de captura. Quando o alvo é um <a href>, ou está dentro de um, e o host do link está na lista, ele reescreve o href antes da navegação:

1. Acrescenta cada parâmetro guardado em vpt_attr que o link ainda não tem.
2. Lê os cookies da sua página e acrescenta, se o link ainda não tem:

Um parâmetro que o link já tem nunca é trocado. O checkout lê esses parâmetros como descrito em Parâmetros de URL do checkout.

Como a troca acontece no clique, funciona também para links criados depois do carregamento, em páginas montadas por JavaScript, e para "abrir em nova aba". Cookies HttpOnly não são visíveis para o script.

3. A função window.vipterDecorateCopiar link da seção

Para navegações que não passam por um <a>, como window.location ou o roteador de um framework, o script expõe:

const url = window.vipterDecorate('https://pay.vipter.com/curso-fotografia?pack=3');
window.location.href = url;

Ela aplica as mesmas regras do clique e devolve o endereço completo, como texto. Um endereço cujo host não está na lista volta sem parâmetros acrescentados. A função só existe depois que o script carregou: com async, confira typeof window.vipterDecorate === 'function' antes de chamar.

Formulários (<form action>) não são alterados. Se o botão de compra é um formulário, troque por um link ou use vipterDecorate.

O que o script não fazCopiar link da seção

• Não faz nenhuma requisição de rede, não cria cookies e não mexe no layout da página. Só lê o endereço e os cookies, grava em vpt_attr e altera o href dos links do checkout.
• Não leva e-mail, nome nem outros dados do visitante.
• Não mostra erros: qualquer falha, como localStorage bloqueado, é engolida. Sem localStorage, os links ainda recebem os valores dos cookies.

O atributo data-hostsCopiar link da seção

data-hosts acrescenta hosts à lista. O pay.vipter.com está sempre nela.

<script src="https://pay.vipter.com/t.js" data-hosts="checkout.sualoja.com.br,pagamento.sualoja.com.br" async></script>

• A comparação é pelo host exato, sem porta. Não há curinga nem subdomínio automático: sualoja.com.br não cobre checkout.sualoja.com.br.
• Liste só os hosts do checkout. Um host a mais faz o script acrescentar parâmetros a links que não são do Vipter.
• Se você ativar um domínio próprio depois de instalar o script, copie o código de novo ou acrescente o domínio em data-hosts.

InstalarCopiar link da seção

Direto no HTMLCopiar link da seção

Cole a tag em todas as páginas de onde o visitante pode ir para o checkout, antes de </body>. Mantenha async: o script não bloqueia a renderização. Em construtores de página, use o campo de scripts do rodapé.

Com um gerenciador de tagsCopiar link da seção

No Google Tag Manager, crie uma tag do tipo HTML personalizado com o mesmo código, inclusive o data-hosts, e acione em todas as páginas de venda. O script lê a configuração da própria tag <script>. Depois de publicar, confira pelo teste abaixo que os links para o seu domínio próprio recebem os parâmetros: se não receberem, o gerenciador não manteve o atributo data-hosts.

Com um gerenciador de tags, o script só roda depois que o contêiner carrega. Um clique antes disso vai para o checkout sem os parâmetros guardados. Se o contêiner espera o consentimento de cookies do visitante, o script também espera.

Colocar o seu contêiner do GTM dentro do checkout é outra configuração, sem relação com o t.js: veja Conectar o Google Tag Manager.

ConferirCopiar link da seção

1. Abra a página de vendas com ?utm_source=teste&utm_campaign=script&v=ana.
2. No console do navegador, rode localStorage.getItem('vpt_attr'). Aparece um JSON com os três valores.
3. Rode vipterDecorate('https://pay.vipter.com/x'). O resultado tem os três parâmetros, mais fbp, fbc, ttp ou ga_client_id se a página tiver esses cookies.
4. Clique no botão de compra. O endereço do checkout abre com os parâmetros.

Para repetir o teste do zero, apague a chave: localStorage.removeItem('vpt_attr'). Sem isso, a campanha do primeiro teste continua valendo por 30 dias.

CSPCopiar link da seção

O script só precisa ser carregado. Com uma Content Security Policy na página de vendas:

• Libere o host em script-src: script-src 'self' https://pay.vipter.com.
• Não é preciso liberar nada em connect-src, img-src ou frame-src: o script não faz requisições.
• Se a sua CSP usa nonce com 'strict-dynamic', coloque o nonce na tag do t.js, como nos seus outros scripts.
• O script não usa eval nem estilos inline.

PrivacidadeCopiar link da seção

O script guarda os dados de campanha no localStorage do seu domínio e lê cookies de anúncio que já existem na página. Se a sua política exige consentimento para esse tipo de armazenamento, carregue o t.js só depois do consentimento, pelo seu gerenciador de tags ou pela sua ferramenta de consentimento. O consentimento dentro do checkout é configurado à parte, em consentimento de cookies.

O que fazer a seguirCopiar link da seção

• Veja o que cada parâmetro faz no checkout em Parâmetros de URL do checkout.
• Acompanhe o resultado em origem das vendas.