Conexión del rastreador a un sitio sin un módulo CMS listo para usar: procedimiento y depuración

Copiar enlace al artículo

Copiado

Contenido

1. Para quién es este artículo y qué se necesita
   • Qué se necesita en Simla
   • Qué se necesita en el sitio
2. Paso 1. Configurar el rastreador en Simla e insertar el código en el sitio
3. Paso 2. Configurar el seguimiento de eventos en Simla
4. Paso 3. Configurar eventos mediante la API de JavaScript
5. Comprobación y depuración del envío de eventos
   • Comprobación mediante DevTools
   • Depuración con un script de usuario en producción
   • Instalación del script
   • Interpretación de los mensajes
6. Qué preparar antes de contactar con soporte

Para quién es este artículo y qué se necesita

Estas instrucciones son adecuadas cuando es necesario conectar el rastreador a un sitio:

• basado en un sistema de gestión de contenidos (CMS) de terceros, sin utilizar un módulo de intercambio listo para usar;
• con una integración personalizada;
• con una arquitectura de frontend compleja, por ejemplo, una aplicación de página única (SPA).

Qué se necesita en Simla

Es necesario disponer de acceso a la configuración de la tienda asociada al sitio y poder obtener en Simla el código JavaScript (JS) del rastreador.

Qué se necesita en el sitio

Para conectar el rastreador se requiere la participación de un desarrollador del sitio. En el sitio es necesario:

• insertar el código JS del rastreador en sus páginas;
• configurar el envío de los identificadores de cliente al rastreador. Sin estos identificadores, los eventos no se vincularán con las fichas de cliente de Simla.

Se recomienda comenzar con una configuración mínima, sin condiciones adicionales como las relacionadas con el formulario de consentimiento. Primero se debe comprobar que los eventos se transmiten correctamente y solo después ampliar la lógica.

Paso 1. Configurar el rastreador en Simla e insertar el código en el sitio

Primero se debe configurar el rastreador en Simla para la tienda asociada al sitio.

Consulte las instrucciones para configurar el rastreador e insertar su código.

En este paso es importante garantizar que los identificadores de cliente se envíen desde el sitio al rastreador. Si no se transmiten, el rastreador no podrá determinar con qué ficha de cliente de Simla debe vincular el evento.

Paso 2. Configurar el seguimiento de eventos en Simla

A continuación, se debe indicar mediante la configuración de Simla qué eventos debe seguir el rastreador en el sitio.

Consulte las instrucciones para configurar la lista de eventos.

Nota

Este método es adecuado para sitios con una estructura estática en lenguaje de marcado de hipertexto (HTML). Si el sitio funciona como una SPA, por ejemplo, con React, o los eventos estándar no son suficientes, utilice la interfaz de programación de aplicaciones de JavaScript (JS API).

Paso 3. Configurar eventos mediante la API de JavaScript

Si la configuración de los pasos anteriores no es suficiente, utilice los eventos y métodos del rastreador disponibles mediante la API de JavaScript.

La guía práctica de la JS API contiene ejemplos de uso.

La configuración del envío de eventos desde el sitio al rastreador se describe en las instrucciones sobre eventos.

Esta opción requiere la participación de un desarrollador y trabajar con código JavaScript en el sitio.

Comprobación y depuración del envío de eventos

Comprobación mediante DevTools

Para comprobar que el sitio realmente envía eventos al rastreador y consultar los parámetros transmitidos, utilice las herramientas para desarrolladores del navegador.

1. Abra DevTools y acceda a la pestaña Network.
2. Introduzca c.retailcrm.tech en el campo de filtro para mostrar únicamente las solicitudes del rastreador.
3. Busque solicitudes del tipo event?user=user_id. Su presencia indica que el sitio ha enviado datos al rastreador.
4. Abra una de estas solicitudes y acceda a la pestaña Payload. El bloque Request Payload muestra los datos enviados realmente, como el tipo de evento, los identificadores y otros parámetros.

Depuración con un script de usuario en producción

Para depurar los eventos del rastreador y seguir las llamadas a los métodos de la API, se puede utilizar un script de usuario de depuración. El script registra las llamadas a la API en la consola del navegador, de forma similar al depurador de Google Tag Manager (GTM).

Importante

El script de usuario debe desactivarse después de utilizarlo para evitar que se ejecute en todos los sitios visitados.

Instalación del script

1. Instale un gestor de scripts de usuario compatible con el navegador:

   • Chrome: Tampermonkey
   • Firefox: Violentmonkey o Greasemonkey
   • Microsoft Edge: Tampermonkey
   • Opera: Tampermonkey
   • Safari: Userscripts

2. Instale el script de usuario de depuración o copie su contenido e instálelo manualmente.

3. Si es necesario, siga las instrucciones del gestor. Por ejemplo, Tampermonkey puede solicitar que se active el modo de desarrollador.

En navegadores basados en Chromium, como Chrome, Microsoft Edge o Brave, puede ser necesario conceder a Tampermonkey un permiso adicional para ejecutar scripts de usuario:

1. Abra la lista de extensiones instaladas, normalmente en Configuración → Extensiones.
2. Active «Modo de desarrollador».
3. Abra la ficha Información de la extensión Tampermonkey.
4. Active «Permitir scripts personalizados».
5. Reinicie el navegador.

Después de instalarlo, el script registrará la actividad en la consola de todos los sitios que utilicen la JS API.

Interpretación de los mensajes

Todos los mensajes del depurador tienen el prefijo [OCAPI], que permite filtrarlos en la pestaña Console.

Ejemplos de mensajes:

• window.ocapi detected, verbose logging has been enabled. — se ha detectado la API y se ha activado el script.
• window.ocapi not found after 30000ms — no se ha detectado la API en el sitio.
• _rcct was not defined as window property but rather as a global scope variable... — la variable _rcct o _rcco no se declaró en window, sino en el ámbito global, por ejemplo, mediante const o let. Esto puede afectar al funcionamiento; se recomienda cambiar la declaración a var.
• Found site token in window._rcct: 0 — muestra el valor del token del sitio utilizado por el widget o el rastreador.
• Found widget settings in window._rcco: {} — muestra el contenido de window._rcco.
• _rcco has non-falsy customer.customer_id but it was NOT set in the tracker. — se ha indicado customer_id en window._rcco, pero el valor no se ha establecido en el rastreador. En este caso, los eventos no se vincularán con los clientes.
• Incorrect onOcapiReady definition, should be available on window: — la función onOcapiReady se ha definido incorrectamente y debe estar disponible en window.
• tracker event 'page_view' — se ha enviado un evento del rastreador. El mensaje se puede desplegar para consultar los datos del evento.
• flushing tracker events — se están enviando los eventos acumulados. El mensaje se puede desplegar para consultar los datos enviados.

Entre los registros de llamadas a los métodos de ocapi, los más útiles son:

• on() — suscripción a un evento;
• event() — envío programático de un evento del rastreador.

Qué preparar antes de contactar con soporte

Si los eventos se envían y las solicitudes aparecen en DevTools o en los registros, pero el resultado en Simla no es el esperado, prepare la siguiente información antes de contactar con soporte:

1. El registro de la solicitud que envió el evento desde el sitio al rastreador:

   • los datos de Payload (Request Payload) de una solicitud concreta event?user=user_id;
   • la URL de la página desde la que se envió el evento;
   • la hora de envío del evento.

2. Una descripción de lo que no ocurrió como se esperaba:

   • la ficha de cliente en la que deberían haberse guardado los datos;
   • el evento enviado;
   • los parámetros que deberían haberse transmitido y los que se transmitieron realmente según Payload o los registros.

Estos datos permiten relacionar más rápidamente el envío del evento desde el sitio con su procesamiento en Simla.