Script del sitio: páginas vistas y clics vinculados al contacto

EsfuerzoAPIPlanGratis

Descubre qué páginas visitan tus contactos y en qué enlaces hacen clic. Con el script de la BIP en el sitio, cada contacto gana un historial de visitas en su propio perfil: sabes si la persona vio la página de precios o hizo clic en el enlace de la tienda asociada antes de hablar con ella.

#Lo que vas a lograr

• Las páginas que visita cada contacto, en el Feed de su perfil, incluso en sitios de una sola página (SPA).
• Los clics en enlaces que llevan fuera de tu sitio, registrados sin ninguna configuración extra.
• La Última ubicación (ciudad) del contacto actualizada con cada página visitada, lista para el criterio Primera / Última ubicación en Segmentos.
• Los parámetros de la URL, como utm_source y utm_campaign, guardados junto con la visita.

#Cómo funciona

1. 1Pega el script con el namespace de tu cuenta
2. 2Vincula al visitante con el contacto en el registro
3. 3Sigue las visitas en el Feed del contacto

El script le da a cada navegador un identificador de visitante anónimo, que se guarda por 10 años. Queda disponible en la página en window.BIP_VISITOR_ID.

Mientras el visitante es anónimo, no se guarda nada. Cuando ese identificador se vincula a un contacto, por un formulario o por POST /api/leads con el campo tracker, cada visita y cada clic siguientes entran en el perfil de esa persona.

Lo que el script registra por sí solo:

• Visualización: al cargar la página y en cada cambio de ruta en sitios de una sola página (navegación por pushState, replaceState y los botones atrás y adelante).
• Clic: en enlaces <a> que llevan a otra dirección, como un enlace de lojahorizonte.com.br a parceiro.com.br. Un subdominio distinto también cuenta. Los enlaces dentro del mismo sitio y los que empiezan con # o javascript: quedan fuera.

El envío usa sendBeacon, que no retiene la página, y cualquier falla es silenciosa: el rastreo nunca interrumpe tu sitio.

#Paso a paso

#1. Copia el namespace de la cuenta

1. En Ajustes, abre la pestaña General.
2. En Información de la cuenta, haz clic en el botón de copiar junto a Espacio de nombres.

dash.bip.marketing/…/settings

Captura de pantalla próximamente

#2. Pega el script en el sitio

Pega la etiqueta de abajo en todas las páginas, antes de </head>, cambiando TU_NAMESPACE por el namespace que copiaste:

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

Si tu plataforma no acepta atributos en la etiqueta script, define el namespace antes:

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

Para comprobarlo, abre el sitio publicado, abre la consola del navegador y escribe window.BIP_VISITOR_ID. Aparece el identificador del visitante.

#3. Vincula al visitante con el contacto

En el formulario de registro, newsletter o inicio de sesión de tu sitio, lee window.BIP_VISITOR_ID y envíalo junto con los datos a tu servidor. El servidor llama a POST /api/leads con el campo tracker. A partir de ahí, las visitas de ese navegador entran en el perfil del contacto.

• La clave de API queda solo en el servidor. El navegador nunca habla directamente con la API.
• Si el script todavía no cargó, el tracker va vacío y la BIP ignora el campo. El contacto se crea o se actualiza normalmente.
• Cada navegador y dispositivo tiene su propio identificador. Envía el tracker de nuevo en cada inicio de sesión: la BIP suma el nuevo identificador al mismo contacto.
• El tracker también sirve en el lead como objeto en /api/campaigns/trigger: crea el contacto, vincula al visitante y dispara la bienvenida en la misma llamada. Consulta la API.

El código listo está en Listo para copiar.

#4. Revisa las visitas en el contacto

1. En Leads, abre un contacto que se registró por el sitio.
2. En el Feed, mira las líneas Visualizado vía Web y Clicado vía Web, con la dirección de la página. Cada línea muestra también la ciudad y el navegador.
3. Pasa el mouse por Parámetros de búsqueda para ver los parámetros de la URL de esa visita, como utm_source.

dash.bip.marketing/…/leads

Captura de pantalla próximamente

#5. Segmenta por la ciudad de la última visita

Cada página visitada actualiza la Última ubicación del contacto con la ciudad desde la que accedió. Úsala en Segmentos:

1. En Segmentos, haz clic en Nuevo segmento.
2. En Añadir criterios, elige Primera / Última ubicación.
3. En Tipo, elige Última ubicación (Ciudad), (Región) o (País), o Última ubicación (Geo) para un radio en el mapa.
4. Elige el Operador y completa el Valor (en el tipo Geo, En radio y el círculo en el mapa).
5. Revisa el conteo en vivo y guarda.

La ubicación siempre es la de la ciudad: un radio selecciona las ciudades cuyo centro queda dentro del círculo.

dash.bip.marketing/…/segments/…

Captura de pantalla próximamente

#Referencia

#Lo que registra el script

#Funciones manuales

Disponibles en window después de que carga el script.

#Variables de lectura

#Lo que cambia en el contacto

#Instalación

#Listo para copiar

#Script para todas las páginas

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

#Formulario que vincula al visitante con el contacto

En el navegador, Loja Horizonte envía el identificador junto con el registro de la newsletter a su propio servidor:

// Formulario de newsletter de 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 ?? ''
    })
  });
});

En el servidor, la ruta /api/newsletter crea o actualiza el contacto en la BIP con el tracker:

// Ruta /api/newsletter en el servidor de Loja Horizonte
const API_KEY = process.env.BIP_API_KEY ?? 'TU_CLAVE_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, ... }
}

La misma llamada en curl, para probar:

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

#Clic en un botón que no es enlace

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

#Segmento por la ciudad de la última visita

#Cómo medir

• En el navegador: en la consola del sitio publicado, window.BIP_VISITOR_ID muestra el identificador y window.BIP_LAST_EVENT_SENT muestra el último evento enviado.
• En el contacto: en Leads, abre a alguien que se registró por el sitio. El Feed muestra cada Visualizado vía Web y Clicado vía Web, y la Ubicación de última actividad sigue la ciudad de la última visita.
• En el segmento: con el criterio Primera / Última ubicación → Última ubicación (Ciudad), el conteo en vivo muestra cuántos contactos tuvieron su última actividad en cada ciudad.

#Preguntas frecuentes

#¿Aparecen las visitas de antes del registro?

No. El historial empieza en el momento en que el identificador del visitante se vincula al contacto. Por eso, envía el tracker desde el primer formulario que completa la persona.

#¿Funciona en sitios de una sola página (React, Vue, Angular)?

Sí. El script detecta cada cambio de ruta en la URL y registra una nueva visualización. Para pantallas que cambian sin cambiar la ruta, como pestañas o pasos en la misma dirección, llama a BIP_SEND_VIEW_EVENT().

#¿Por qué no veo eventos cuando pruebo en mi computadora?

En direcciones con localhost, las visualizaciones automáticas no se envían. Además, el visitante tiene que estar vinculado a un contacto. Prueba en el sitio publicado, regístrate por el formulario y navega: las visitas aparecen en el Feed del contacto.

#¿El script puede romper mi sitio?

No. Cualquier falla de rastreo se ignora sin afectar la página, y los eventos salen con sendBeacon, que no espera respuesta.

#Ver también

• API de la BIP: claves, contactos, eventos y disparos
• Segmentos: los 10 criterios para filtrar contactos
• Webhooks: lleva cada envío a tu sistema
• Cumplimiento: portal de preferencias, bajas y temas
• Referencia completa de la API