Script do site: page views e cliques ligados ao contato

EsforçoAPIPlanoGrátis

Saiba quais páginas seus contatos visitam e em quais links eles clicam. Com o script da BIP no site, cada contato ganha um histórico de visitas no próprio perfil: você sabe se a pessoa viu a página de preços ou clicou no link da loja parceira antes de falar com ela.

#O que você vai conseguir

• As páginas que cada contato visita no Feed do perfil, inclusive em sites de página única (SPA).
• Cliques em links que levam para fora do seu site, registrados sem nenhuma configuração extra.
• A Última Localização (cidade) do contato atualizada a cada página visitada, pronta para o critério Primeira / Última Localização em Segmentos.
• Os parâmetros da URL, como utm_source e utm_campaign, guardados junto com a visita.

#Como funciona

1. 1Cole o script com o namespace da sua conta
2. 2Ligue o visitante ao contato no cadastro
3. 3Acompanhe as visitas no Feed do contato

O script dá a cada navegador um identificador de visitante anônimo, guardado por 10 anos. Ele fica disponível na página em window.BIP_VISITOR_ID.

Enquanto o visitante é anônimo, nada é guardado. Quando esse identificador é ligado a um contato, por um formulário ou por POST /api/leads com o campo tracker, cada visita e cada clique seguintes entram no perfil dessa pessoa.

O que o script registra sozinho:

• Visualização: ao carregar a página e a cada mudança de caminho em sites de página única (navegação por pushState, replaceState e os botões voltar e avançar).
• Clique: em links <a> que levam para outro endereço, como um link de lojahorizonte.com.br para parceiro.com.br. Um subdomínio diferente também conta. Links dentro do mesmo site e links que começam com # ou javascript: ficam de fora.

O envio usa sendBeacon, que não segura a página, e qualquer falha é silenciosa: o rastreamento nunca interrompe o seu site.

#Passo a passo

#1. Copie o namespace da conta

1. Em Configurações, abra a aba Geral.
2. Em Informações da Conta, clique no botão de copiar ao lado de Namespace.

dash.bip.marketing/…/settings

Captura de tela em breve

#2. Cole o script no site

Cole a tag abaixo em todas as páginas, antes de </head>, trocando SEU_NAMESPACE pelo namespace copiado:

<script bip-namespace="SEU_NAMESPACE" src="https://js.bip.marketing/v1.0.0.js"></script>

Se a sua plataforma não aceita atributos na tag script, defina o namespace antes:

<script>
  window.BIP_ACCOUNT_NAMESPACE = 'SEU_NAMESPACE';
</script>
<script src="https://js.bip.marketing/v1.0.0.js"></script>

Para conferir, abra o site publicado, abra o console do navegador e digite window.BIP_VISITOR_ID. Aparece o identificador do visitante.

#3. Ligue o visitante ao contato

No formulário de cadastro, newsletter ou login do seu site, leia window.BIP_VISITOR_ID e envie junto com os dados para o seu servidor. O servidor chama POST /api/leads com o campo tracker. A partir daí, as visitas desse navegador entram no perfil do contato.

• A chave de API fica só no servidor. O navegador nunca fala direto com a API.
• Se o script ainda não carregou, o tracker vai vazio e a BIP ignora o campo. O contato é criado ou atualizado normalmente.
• Cada navegador e aparelho tem seu identificador. Envie o tracker de novo a cada login: a BIP soma o novo identificador ao mesmo contato.
• O tracker também vale no lead como objeto em /api/campaigns/trigger: cria o contato, liga o visitante e dispara as boas-vindas na mesma chamada. Veja a API.

O código pronto está em Pronto para copiar.

#4. Confira as visitas no contato

1. Em Contatos, abra um contato que se cadastrou pelo site.
2. No Feed, veja as linhas Visualizado via Web e Clicado via Web, com o endereço da página. Cada linha mostra também a cidade e o navegador.
3. Passe o mouse em Parâmetros de Busca para ver os parâmetros da URL daquela visita, como utm_source.

dash.bip.marketing/…/leads

Captura de tela em breve

#5. Segmente pela cidade da última visita

Cada página visitada atualiza a Última Localização do contato com a cidade de onde ele acessou. Use isso em Segmentos:

1. Em Segmentos, clique em Novo Segmento.
2. Em Adicionar Critérios, escolha Primeira / Última Localização.
3. Em Tipo, escolha Última Localização (Cidade), (Região) ou (País), ou Última Localização (Geo) para um raio no mapa.
4. Escolha o Operador e preencha o Valor (no tipo Geo, Dentro do raio e o círculo no mapa).
5. Confira a contagem ao vivo e salve.

A localização é sempre a da cidade: um raio seleciona as cidades cujo centro fica dentro do círculo.

dash.bip.marketing/…/segments/…

Captura de tela em breve

#Referência

#O que o script registra

#Funções manuais

Disponíveis em window depois que o script carrega.

#Variáveis de leitura

#O que muda no contato

#Instalação

#Pronto para copiar

#Script para todas as páginas

<script bip-namespace="SEU_NAMESPACE" src="https://js.bip.marketing/v1.0.0.js"></script>

#Formulário que liga o visitante ao contato

No navegador, a Loja Horizonte envia o identificador junto com o cadastro da newsletter para o próprio servidor:

// Formulário de newsletter da Loja Horizonte
const form = document.querySelector<HTMLFormElement>('#newsletter');
form?.addEventListener('submit', async event => {
  event.preventDefault();
  const dados = new FormData(event.currentTarget as HTMLFormElement);
  await fetch('/api/newsletter', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      nome: dados.get('nome'),
      email: dados.get('email'),
      tracker: (window as any).BIP_VISITOR_ID ?? ''
    })
  });
});

No servidor, a rota /api/newsletter cria ou atualiza o contato na BIP com o tracker:

// Rota /api/newsletter no servidor da Loja Horizonte
const API_KEY = process.env.BIP_API_KEY ?? 'SUA_CHAVE_DE_API';
export async function cadastrarNewsletter(body: { nome: string; email: string; tracker: string }) {
  const res = await fetch('https://api.bip.marketing/api/leads', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'x-bip-api-key': API_KEY },
    body: JSON.stringify({
      name: body.nome,
      email: body.email,
      tracker: body.tracker,
      tags: ['newsletter']
    })
  });
  if (!res.ok) throw new Error(`BIP ${res.status}: ${await res.text()}`);
  return res.json(); // { id, ... }
}

A mesma chamada em curl, para testar:

curl -X POST https://api.bip.marketing/api/leads \
  -H "Content-Type: application/json" \
  -H "x-bip-api-key: SUA_CHAVE_DE_API" \
  -d '{"name": "Sofia Costa", "email": "sofia.costa@exemplo.com", "tracker": "ID_DO_VISITANTE", "tags": ["newsletter"]}'

#Clique em botão que não é link

// Botão "Falar com a loja" que abre o chat
document.querySelector('#falar-com-a-loja')?.addEventListener('click', () => {
  (window as any).BIP_SEND_CLICK_EVENT?.('https://lojahorizonte.com.br/atendimento');
});

#Segmento pela cidade da última visita

#Como medir

• No navegador: no console do site publicado, window.BIP_VISITOR_ID mostra o identificador e window.BIP_LAST_EVENT_SENT mostra o último evento enviado.
• No contato: em Contatos, abra quem se cadastrou pelo site. O Feed mostra cada Visualizado via Web e Clicado via Web, e a Localização da Última Atividade acompanha a cidade da última visita.
• No segmento: com o critério Primeira / Última Localização → Última Localização (Cidade), a contagem ao vivo mostra quantos contatos tiveram a última atividade em cada cidade.

#Perguntas frequentes

#As visitas de antes do cadastro aparecem?

Não. O histórico começa no momento em que o identificador do visitante é ligado ao contato. Por isso, envie o tracker já no primeiro formulário que a pessoa preenche.

#Funciona em site de página única (React, Vue, Angular)?

Sim. O script percebe cada mudança de caminho na URL e registra uma nova visualização. Para telas que mudam sem trocar o caminho, como abas ou etapas no mesmo endereço, chame BIP_SEND_VIEW_EVENT().

#Por que não vejo eventos quando testo no meu computador?

Em endereços com localhost, as visualizações automáticas não são enviadas. E o visitante precisa estar ligado a um contato. Teste no site publicado, faça um cadastro pelo formulário e navegue: as visitas aparecem no Feed do contato.

#O script pode quebrar o meu site?

Não. Qualquer falha de rastreamento é ignorada sem afetar a página, e os eventos saem com sendBeacon, que não espera resposta.

#Veja também

• API da BIP: chaves, contatos, eventos e disparos
• Segmentos: os 10 critérios para filtrar contatos
• Webhooks: leve cada envio para o seu sistema
• Conformidade: portal do contato, opt-out e tópicos
• Referência completa da API