Conexión del sitio web

El rastreador es un pequeño script que se coloca en las páginas de su sitio web. Cuenta las vistas de página, envía las acciones de los clientes (vista de producto, carrito, pedido, inicio de sesión), muestra los widgets de recomendaciones y suscribe a los visitantes a Web Push. Todo lo necesario para la conexión está en Comunicaciones → Sitio web.

La sección está abierta a todos los miembros del proyecto. Pueden cambiar los dominios del sitio web y los widgets «Propietario», «Administrador» y «Gestor». Pueden crear una clave para el sitio web «Propietario» y «Administrador».

Instalación del rastreador

La pestaña Instalación tiene tres pasos.

1. Código para cada página

1. En el campo Clave de escritura, elija una clave. Si no hay claves, pulse Crear una clave para el sitio web.
2. Copie el código con el botón de copiar.
3. Péguelo en el <head> de todas las páginas del sitio web, normalmente en la plantilla común de la cabecera.

El código tiene este aspecto (en la sección, la dirección y la clave ya están insertadas):

<script>
!function(w,d,u){var c=w.cdp=w.cdp||[];if(c.version)return;['init','page','track','identify','alias','reset','setLanguage','widgets','renderRecommendations'].forEach(function(m){c[m]=c[m]||function(){c.push([m].concat([].slice.call(arguments)))}});var s=d.createElement('script');s.async=1;s.src=u;d.head.appendChild(s)}(window,document,'https://cdp.onetrace.ru/tracker/cdp.js');
cdp.init('cdp_wk_…', { host: 'https://cdp.onetrace.ru' });
cdp.page();
</script>

El script se carga de forma asíncrona y no ralentiza el sitio web. Las llamadas a cdp.track() se pueden hacer justo después del código: esperarán a que se cargue el rastreador. El rastreador asigna a cada navegador un identificador de visitante permanente (cookie cdp_aid durante un año) y guarda los parámetros UTM de la visita.

Es normal que la clave de escritura sea visible en el código de las páginas: solo sirve para enviar eventos. Si en la lista no hay claves disponibles, es que se crearon antes de que existiera esta sección y no se pueden mostrar completas. Cree una clave nueva para el sitio web o tome la clave del código que ya está instalado en el sitio.

2. Comprobación

Después de la instalación, abra cualquier página del sitio web. Al cabo de unos segundos aparecerá en el bloque Comprobación una tabla con Dominio, Eventos en 7 días y la hora del último evento. Mientras no haya eventos, la sección muestra «Esperando los primeros eventos». La comprobación se actualiza sola cada 10 segundos mientras la sección está abierta.

3. Dominios del sitio web

Para que un sitio ajeno no pueda enviar eventos en nombre de su proyecto ni obtener recomendaciones, indique los dominios de su sitio web:

1. Introduzca el dominio, por ejemplo shop.example.com, y pulse +. Un dominio de la tabla de comprobación se añade con el botón Añadir a los dominios.
2. Pulse Guardar.

Un dominio autoriza también sus subdominios: shop.ru admite www.shop.ru. Mientras la lista esté vacía, la clave funciona en cualquier sitio web («Sin restricción»). La restricción no afecta a las solicitudes desde su servidor. Puede indicar hasta 20 dominios.

Aplicaciones de una sola página (SPA y PWA)

En aplicaciones con React, Vue, Angular y similares la página no se recarga, así que la aplicación debe enviar las vistas: llame a cdp.page() después de cada cambio de pantalla, pero no dos veces en la primera carga, porque el código de instalación ya la envió. Si el hook del enrutador también se ejecuta en la primera carga (afterEach en Vue Router, useEffect en React), quite cdp.page() del código de instalación; hay un ejemplo en la pestaña Instalación.

// después de cada cambio de pantalla, cuando el enrutador ya cambió la dirección
cdp.page();

// una pantalla sin dirección propia, o la dirección aún no ha cambiado
cdp.page('Carrito', { path: '/cart', title: 'Carrito' });

Si una pantalla no tiene dirección propia (un modal, un paso del pago, una PWA sin direcciones) o el enrutador cambia la dirección más tarde, pase la página explícitamente: path o url (puede ser relativa) y el título. Esa página se registra en la vista y en el contexto de los eventos siguientes —por ejemplo, un añadido al carrito queda vinculado a la pantalla del carrito— hasta la siguiente llamada a cdp.page(). El rastreador toma la pantalla anterior como origen de la segunda y siguientes, y guarda las etiquetas UTM de la visita hasta que se cierre la pestaña.

Inicio y cierre de sesión del cliente

Después del inicio de sesión o del registro, llame a cdp.identify() con el id del usuario en su sistema: el historial de visitas se vinculará con el perfil del cliente.

cdp.identify('user-42', { email: 'anna@example.com' });

Envíe el ID de usuario solo para usuarios que hayan iniciado sesión y no use valores genéricos como 0 o guest: los perfiles con el mismo ID de usuario se fusionarán. Al cerrar la sesión, llame a cdp.reset() para que la siguiente persona que use ese equipo reciba un identificador nuevo.

La tabla Identificación del cliente de la pestaña Eventos de productos muestra qué identificadores necesita cada canal y cómo llegan al perfil: email para las campañas por email, phone en formato internacional para SMS, WhatsApp y Viber por número, y para los bots de Telegram y Viber, la vinculación del chat mediante un enlace que crea su servidor. Envíe todo lo que sepa del cliente: cuantos más identificadores, más canales disponibles.

Idioma del cliente

El rastreador envía el idioma del navegador, que se guarda en el perfil del cliente (el atributo language) hasta que el idioma se indique explícitamente. Con ese idioma, los recorridos y las campañas eligen la versión de idioma de la plantilla. Los idiomas del proyecto aparecen en el bloque Idioma del cliente de la pestaña Instalación.

Si el sitio tiene un selector de idioma, comunique la elección del visitante: se recuerda y se guarda en el perfil:

cdp.setLanguage('de');

Otra fuente de idioma se indica al inicializar: language: 'page' — el atributo lang de <html>, un código de idioma — un idioma para todo el sitio, false — no enviar el idioma. Un idioma conocido en su sistema se puede pasar como atributo: cdp.identify('user-42', { language: 'de' }).

Eventos de productos

La pestaña Eventos de productos muestra llamadas listas para cinco acciones: Vista de producto, Añadir al carrito, Pedido, Favoritos e Inicio de sesión y registro. Los nombres de los eventos y la propiedad con el id del producto (por defecto, product_id) se toman de la configuración de la sección Recomendaciones. Si allí no se han elegido eventos, verá un aviso, y los ejemplos usarán los nombres por defecto: product_viewed, add_to_cart, order_completed.

Ejemplo de pedido; todos los productos se envían en el array products:

cdp.track('order_completed', {
  order_id: 'A-1001',
  amount: 9980,
  products: [{ product_id: 'SKU-1', quantity: 2, price: 4990 }],
});

Favoritos es opcional: los eventos add_to_wishlist y remove_from_wishlist los usan los recorridos que avisan de bajadas de precio y de la reposición de productos favoritos. Llame a cdp.addToWishlist('SKU-1') y cdp.removeFromWishlist('SKU-1') o prescinda del código: añada al botón el atributo data-cdp-wishlist="SKU-1" (añadir) o data-cdp-wishlist-remove="SKU-1" (quitar) y el rastreador enviará el evento al hacer clic.

Cada paso tiene una marca: cuántos eventos llegaron en 7 días y cuándo llegó el último, o «No hay eventos en 7 días». Así se ve qué llamadas aún no funcionan. El id del producto debe coincidir con el id del catálogo de productos.

Es más fiable enviar los pedidos y los registros desde su servidor; consulte Integración desde el servidor.

Enlaces de invitación

Si las invitaciones están activadas en el programa de fidelización, cada miembro tiene un enlace a su sitio web con el parámetro ?ref=CÓDIGO. El rastreador detecta este parámetro por sí mismo: guarda el código durante 30 días en la cookie cdp_ref y envía una vez el evento referral_visited. El amigo se contabiliza cuando se registra o inicia sesión en el sitio. Los plugins de tienda envían el código de la cookie al registrarse; en un sitio propio, mediante la API.

Web Push

La pestaña Web Push muestra si el canal está conectado y cuántas suscripciones hay. Si no hay canal, créelo con el enlace Abrir integraciones; las claves se generarán automáticamente (consulte Integraciones y canales). Después:

1. Archivo del service worker. Cree en la raíz del sitio web el archivo cdp-sw.js con una sola línea:

   importScripts('https://cdp.onetrace.ru/tracker/cdp-sw.js');
   

2. Botón de suscripción. Añada al sitio web un botón que, al hacer clic, llame a cdp.push.subscribe(). El navegador solo pide permiso para mostrar notificaciones tras una acción del visitante.

Las notificaciones solo funcionan en sitios web con HTTPS. La suscripción se vincula al perfil del visitante.

CMS y Google Tag Manager

La pestaña CMS y GTM contiene instrucciones paso a paso para un sitio web propio, Google Tag Manager, 1C-Bitrix, Tilda, WordPress y WooCommerce, e InSales: dónde insertar el código de instalación, los eventos y los widgets.

Por ejemplo, en Google Tag Manager, cree una etiqueta «HTML personalizado» con el código de instalación y el activador «Todas las páginas». Para los eventos de productos se necesitan etiquetas aparte con la llamada a cdp.track y activadores basados en los eventos de dataLayer (view_item, add_to_cart, purchase). Después de publicar el contenedor, compruebe en la pestaña Instalación que los eventos llegan.

Conexión con un agente de IA

Si un desarrollador crea su sitio con un agente de IA (Claude Code, Codex, Cursor y otros), entréguele al agente un skill listo. En la pestaña Agente de IA, haga clic en Descargar SKILL.md. El archivo contiene instrucciones para el agente en inglés con los datos de su proyecto: la dirección de OneTrace.ru, la clave de escritura seleccionada, los nombres de los eventos de productos, los widgets y el estado de Web Push. Con ellas, el agente añade por sí mismo el código de instalación, los eventos de productos, el inicio y cierre de sesión, los widgets y la suscripción a notificaciones.

1. Si hay varias claves de escritura, seleccione la que necesita.
2. Descargue el archivo y colóquelo en el proyecto del sitio: para Claude Code, en .claude/skills/<nombre del skill>/SKILL.md; para otros agentes compatibles con Agent Skills, en su carpeta de skills, por ejemplo .agents/skills/<nombre del skill>/SKILL.md. La ruta exacta se muestra en la pestaña. También puede simplemente adjuntar el archivo a su mensaje para el agente.
3. Escríbale la tarea al agente: en la pestaña hay un texto de ejemplo.

Las claves secretas nunca se incluyen en el skill. Si cambia los eventos en la configuración de recomendaciones o añade widgets, vuelva a descargar el skill.

Qué debe saber

• Los robots de los buscadores, las vistas previas de enlaces en mensajería, los servicios de comprobación de sitios y los navegadores automatizados no se cuentan: el rastreador no envía sus eventos ni les pone cookies, pero sí muestra los widgets de recomendaciones. Para contar a todos los visitantes, añada la opción al código de instalación: cdp.init('…', { host: '…', ignoreBots: false }).
• El rastreador acumula los eventos y los envía en lotes. Si se pierde la conexión, los eventos se guardan en el navegador y se envían más tarde.
• Todos los eventos del sitio web se ven en tiempo real en la sección Eventos.
• Los widgets de recomendaciones se configuran en la pestaña Widgets; consulte Widgets de recomendaciones en el sitio web.