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

> Pega el script (js.bip.marketing/v1.0.0.js, con el atributo bip-namespace) en tu sitio. Registra páginas vistas, también en SPA, y clics en enlaces externos. Cuando el visitante pasa a ser contacto, por formulario o por POST /api/leads con tracker, sus próximas visitas van a su Feed y actualizan la Última ubicación.

Fonte: https://wiki.bip.marketing/es-es/script-del-sitio · Atualizado: 2026-10-08

<UseCaseMeta effort="api" plan="free" />

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.

<Checklist items="Acceso al código del sitio, para pegar una etiqueta script en todas las páginas|El namespace de tu cuenta (Espacio de nombres), en Ajustes → General|Un formulario de registro en el sitio, conectado a la BIP a través de tu servidor|Una clave de API con Escritura de leads, guardada en el servidor" />

## 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

<Steps items="Pega el script con el namespace de tu cuenta|Vincula al visitante con el contacto en el registro|Sigue 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.

<Callout type="warning">
El historial empieza cuando el visitante se convierte en contacto. Las visitas hechas antes del vínculo no se guardan. Por eso, vincula el identificador desde el primer registro.
</Callout>

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**.

<Shot src="/img/script-do-site/1-es-es.png" alt="Espacio de nombres de la cuenta en Ajustes, pestaña General, sección Información de la cuenta" url="dash.bip.marketing/…/settings" />

### 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:

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

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

<Copy label="HTML (alternativa)" code>
<script>
  window.BIP_ACCOUNT_NAMESPACE = 'TU_NAMESPACE';
</script>
<script src="https://js.bip.marketing/v1.0.0.js"></script>
</Copy>

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

<Callout type="tip">
En direcciones con `localhost`, el script no envía las visualizaciones automáticas. Prueba en el sitio publicado o en un entorno de pruebas (staging) con dominio propio.
</Callout>

### 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](/es-es/api).

El código listo está en [Listo para copiar](#listo-para-copiar).

<PlanOnly plan="full">
Los **Formularios** de la BIP envían el identificador del visitante junto con el registro, sin código extra.
</PlanOnly>

### 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`.

<Shot src="/img/script-do-site/4-es-es.png" alt="Feed del contacto con páginas visualizadas y clics vía web" url="dash.bip.marketing/…/leads" />

### 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.

<Shot src="/img/script-do-site/5-es-es.png" alt="Criterio Primera / Última ubicación con el tipo Última ubicación (Ciudad)" url="dash.bip.marketing/…/segments/…" />

<PlanOnly plan="full">
En **Flujos**, el paso **Filtro** acepta el criterio **Evento** con **Tipo de entidad** URL: separa a quienes visitaron una página o hicieron clic en un enlace externo desde ella.
</PlanOnly>

## Referencia

### Lo que registra el script

| Evento        | Cuándo                                                        | Qué se guarda                                                                                                       |
| ------------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
| Visualización | Al cargar la página y en cada cambio de ruta en SPA           | Página (sin `https://` y sin lo que va después de `?`), parámetros de la URL, página de origen, navegador y ciudad   |
| Clic          | Clic en un enlace `<a>` que lleva a otra dirección (host)     | Página donde ocurrió el clic, enlace clicado, navegador y ciudad                                                    |

### Funciones manuales

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

| Función                     | Qué hace                                                 | Cuándo usarla                                                                                                          |
| --------------------------- | -------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| `BIP_SEND_VIEW_EVENT()`     | Envía una visualización de la página actual              | Pantallas que cambian sin cambiar la ruta de la URL: pestañas, pasos con `?paso=`, contenido cargado en la misma página |
| `BIP_SEND_CLICK_EVENT(url)` | Envía un clic con la URL indicada                        | Botones que no son enlaces `<a>`, o enlaces internos que quieres contar                                                |
| `BIP_SET(token)`            | Cambia el identificador del visitante en este navegador  | Usar un identificador que ya vinculaste al contacto, por ejemplo después de iniciar sesión                             |
| `BIP_RESET()`               | Borra el identificador de este navegador                 | Cierre de sesión en una computadora compartida: el siguiente acceso empieza anónimo                                    |

### Variables de lectura

| Variable                     | Qué trae                                        |
| ---------------------------- | ----------------------------------------------- |
| `window.BIP_VISITOR_ID`      | Identificador del visitante en este navegador   |
| `window.BIP_LAST_EVENT_SENT` | El último evento enviado, para comprobación     |

### Lo que cambia en el contacto

| Dónde                      | Qué hace la visita                                                                                  |
| -------------------------- | --------------------------------------------------------------------------------------------------- |
| **Feed**                   | Una línea **Visualizado vía Web** o **Clicado vía Web**, con la página, la ciudad y el navegador    |
| **Última ubicación**       | Pasa a ser la ciudad de la página visitada (visualizaciones)                                        |
| **Parámetros de búsqueda** | Los parámetros de la URL de la visita, como `utm_source`, se guardan con la visualización           |

### Instalación

| Elemento    | Valor                                                          |
| ----------- | -------------------------------------------------------------- |
| Script      | `https://js.bip.marketing/v1.0.0.js`                           |
| Namespace   | Atributo `bip-namespace` o `window.BIP_ACCOUNT_NAMESPACE`      |
| Dónde pegar | Todas las páginas, antes de `</head>`                          |
| localhost   | Sin visualizaciones automáticas                                |

## Listo para copiar

### Script para todas las páginas

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

### 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:

<Copy label="TypeScript (navegador)" code>
// 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 ?? ''
    })
  });
});
</Copy>

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

<Copy label="TypeScript (servidor)" code>
// 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, ... }
}
</Copy>

La misma llamada en curl, para probar:

<Copy label="curl" code>
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"]}'
</Copy>

### Clic en un botón que no es enlace

<Copy label="TypeScript (navegador)" code>
// 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');
});
</Copy>

### Segmento por la ciudad de la última visita

| Criterio                   | Tipo                      | Operador | Valor    |
| -------------------------- | ------------------------- | -------- | -------- |
| Primera / Última ubicación | Última ubicación (Ciudad) | Contiene | Curitiba |

## 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](/es-es/api)
- [Segmentos: los 10 criterios para filtrar contactos](/es-es/segmentos)
- [Webhooks: lleva cada envío a tu sistema](/es-es/webhooks)
- [Cumplimiento: portal de preferencias, bajas y temas](/es-es/cumplimiento)
- [Referencia completa de la API](https://bipmarketing.readme.io)