Integración del SDK web

El SDK web de Joryio te permite rastrear el comportamiento de los usuarios, enviar eventos y gestionar perfiles de usuario en tu sitio web.

Instalación

Mediante npm/yarn

npm install @joryio/web-sdk
# o
yarn add @joryio/web-sdk

Mediante CDN

Puedes cargar el SDK desde la CDN de Joryio con una versión fijada (recomendada para producción) o desde el canal latest (actualización automática, para desarrollo o uso interno).

<!-- Fijada: segura para producción y con caché inmutable. Actualiza cambiando la URL. -->
<script src="https://cdn.joryio.com/sdk/web/1.0.0/joryio.min.js"></script>

<!-- Latest: se actualiza automáticamente en unos 5 minutos tras cada lanzamiento del SDK. -->
<script src="https://cdn.joryio.com/sdk/web/latest/joryio.min.js"></script>

Cuándo usar cada opción

Fijada (/1.0.0/): sitios de producción en los que quieres controlar de forma determinista cuándo se actualiza el SDK. El paquete se sirve con una caché inmutable de un año, por lo que los visitantes recurrentes lo descargan una vez y no generan tráfico de red en cargas posteriores.
Latest: dashboards internos, staging y clientes pequeños que quieren recibir automáticamente las actualizaciones del SDK. Se almacena en caché 5 minutos con una ventana stale-while-revalidate de 1 hora, para que las versiones nuevas se propaguen a los pocos minutos del lanzamiento.

Actualizar una integración fijada. Cuando Joryio publique una versión nueva del SDK, aumenta el número en tu fragmento:

<!-- Antes -->
<script src="https://cdn.joryio.com/sdk/web/1.0.0/joryio.min.js"></script>
<!-- Después -->
<script src="https://cdn.joryio.com/sdk/web/1.1.0/joryio.min.js"></script>

El navegador trata la URL nueva como un archivo nuevo, lo almacena en caché de forma inmutable y ejecuta el SDK nuevo. Las entradas antiguas permanecen hasta que expire su TTL o el usuario borre la caché.

Verificar la versión en uso. Cada respuesta del SDK incluye dos encabezados de diagnóstico:

Encabezado	Ejemplo	Significado
`X-SDK-Version-Served`	`1.0.0`	Versión del SDK desplegada actualmente por Joryio.
`X-SDK-Version-Requested`	`1.0.0`	Versión solicitada por la URL del fragmento (solo se define en rutas fijadas).

Abre DevTools → Network → busca joryio.min.js → Response Headers. Si Requested es distinto de Served, tu fragmento HTML apunta a una URL de versión más antigua que la publicada: tus visitantes podrían recibir el paquete más nuevo guardado bajo la URL antigua.

Inicio rápido

1. Inicializar el SDK

Primero, inicializa el SDK con tu clave de SDK. Puedes encontrarla en el dashboard de Joryio, en Configuración → Apps.

import JoryioSDK from '@joryio/web-sdk';

// Inicializa el SDK
const joryio = new JoryioSDK({
  sdkKey: 'jry_sdk_web_your_sdk_key_here',
  enableDebug: false, // Activa el registro de depuración en desarrollo
});

Cuando cargas desde la CDN en vez de npm, la misma clase está disponible como window.Joryio:

const joryio = new Joryio({
  sdkKey: 'jry_sdk_web_your_sdk_key_here',
});

2. Identificar usuarios

Identifica a los usuarios cuando se registran o inician sesión:

// Identifica un usuario
joryio.identify('user_123');

// Establece los atributos de perfil por separado
joryio.setAttributes({
  email: 'user@example.com',
  firstName: 'John',
  lastName: 'Doe',
  plan: 'premium',
  signupDate: '2024-01-15',
});

3. Rastrear eventos

Rastrea las acciones y el comportamiento de los usuarios:

// Rastrea un evento personalizado
joryio.track('Product Viewed', {
  product_id: 'prod_123',
  product_name: 'Premium Plan',
  price: 99.99,
  currency: 'USD',
});

// Rastrea vistas de página
joryio.track('Page Viewed', {
  page: '/pricing',
  title: 'Pricing Page',
  category: 'Marketing',
});

Opciones de configuración

Opción	Tipo	Predeterminado	Descripción
`sdkKey`	cadena	Obligatorio	Tu clave de SDK del dashboard de Joryio
`apiEndpoint`	cadena	`https://api-eu1.joryio.com`	Sustituye la URL base de la API (predeterminada: `https://api-eu1.joryio.com`); solo es necesario para pruebas o despliegues dedicados.
`enableDebug`	booleano	`false`	Activa el registro de depuración en la consola
`batchFlushInterval`	número	`5000`	Frecuencia de envío al servidor de eventos por lotes (milisegundos). Se encolan localmente y se envían cada 5 segundos para reducir solicitudes de red.
`batchSize`	número	`50`	Máximo de eventos en cola antes del envío automático. Si se acumulan 50 antes del temporizador, se envían de inmediato para evitar pérdida de datos.
`sendImmediately`	booleano	`false`	Envía cada evento de inmediato, sin lotes (no recomendado para producción)
`sessionTimeout`	número	`1800000`	Tiempo de espera de sesión en milisegundos (predeterminado: 30 minutos). Tras este período sin actividad comienza una sesión nueva.
`trackSessionStart`	booleano	`true`	Rastrea automáticamente el evento «Session Start» al comenzar una sesión nueva.
`trackPageViews`	booleano	`false`	Rastrea automáticamente «Page Viewed» al cargar la página
`captureUTM`	booleano	`true`	Captura automáticamente parámetros UTM de la URL para atribución de campañas
`resetSessionOnNewCampaign`	booleano	`false`	Inicia una sesión nueva al cambiar los parámetros UTM (útil para analítica de sesiones por campaña)
`trackDeviceProperties`	booleano	`true`	Incluye información de dispositivo en Session Start
`persistQueue`	booleano	`true`	Conserva en localStorage los eventos en cola para que sobrevivan a recargas de página
`inApp.allowHtmlJsInAppMessages`	booleano	`false`	Permite mensajes in-app HTML, que ejecutan JavaScript escrito por el autor en un iframe aislado de tu página. Los mensajes nativos se muestran igualmente. Consulta Mensajería in-app.

Procesamiento por lotes y vaciado de eventos

Los eventos se agrupan localmente y se envían al servidor por lotes para optimizar el uso de red:

Vaciado automático: los eventos se envían cada batchFlushInterval milisegundos (5 s de forma predeterminada).
Vaciado por tamaño: se envían de inmediato al acumularse batchSize eventos (50 de forma predeterminada).
Vaciado manual: llama a joryio.flush() para enviar de inmediato los eventos en cola.
Al salir de la página: los eventos se vacían automáticamente mediante sendBeacon cuando el usuario abandona la página.
Límite de cola: la cola local guarda como máximo 1000 eventos. Si se supera el límite, por ejemplo tras mucho tiempo sin conexión, se descartan los más antiguos con una advertencia en consola.

// Envía eventos de inmediato en vez de agruparlos
const joryio = new JoryioSDK({
  sdkKey: 'jry_sdk_web_...',
  sendImmediately: true  // Envía cada evento de inmediato
});

// O configura el comportamiento de los lotes
const joryio = new JoryioSDK({
  sdkKey: 'jry_sdk_web_...',
  batchFlushInterval: 10000,  // Vacía cada 10 segundos
  batchSize: 20  // O al acumularse 20 eventos
});

// O vacía manualmente en cualquier momento
joryio.track('Important Event', {...});
joryio.flush(); // Envía ahora

Gestión de sesión

Las sesiones rastrean la actividad continua del usuario y se gestionan automáticamente:

Tiempo de espera de sesión: 30 minutos de inactividad de forma predeterminada (configurable mediante sessionTimeout).
Comienza una sesión nueva cuando:
1. El usuario carga la página por primera vez.
2. Transcurre el período de espera sin eventos.
3. El usuario llama a joryio.reset() (por ejemplo, al cerrar sesión).
4. Se detecta una campaña nueva, si resetSessionOnNewCampaign está activado.

Configurar el tiempo de espera de sesión:

const joryio = new JoryioSDK({
  sdkKey: 'jry_sdk_web_...',
  sessionTimeout: 3600000  // 1 hora en milisegundos
});

// O un tiempo de espera de sesión más corto
const joryio = new JoryioSDK({
  sdkKey: 'jry_sdk_web_...',
  sessionTimeout: 600000  // 10 minutos
});

tip

Las sesiones se gestionan automáticamente según la actividad del usuario. Cada evento rastreado reinicia el temporizador de inactividad.

Rastreo de Session Start

De forma predeterminada, el SDK rastrea automáticamente un evento «Session Start» al comenzar cada sesión nueva. Este evento:

Puede usarse como disparador en campañas y flujos de journey.
Incluye todo el contexto de sesión (parámetros UTM, referente, página de destino y, si trackDeviceProperties está activado, datos del dispositivo).
Se guarda en el perfil del usuario como cualquier otro evento, de modo que los segmentos y la analítica pueden contar sesiones por usuario.

Ejemplo de evento Session Start:

// Se rastrea automáticamente cuando el usuario visita tu sitio
{
  event: "Session Start",
  properties: {
    utm_source: "google",       // Si hay parámetros UTM
    utm_medium: "cpc",
    utm_campaign: "spring_sale",
    referrer: "https://google.com",
    landing_page: "https://example.com/..."
  },
  userId: "user_123",           // Si está identificado
  anonymousId: "anon_456",
  sessionId: "sess_789"
}

Datos automáticos de sesión

El SDK web enriquece los eventos Session Start con datos de dispositivo y entorno:

$user_agent
$timezone
$screen_width / $screen_height
$viewport_width / $viewport_height
$language / $languages
$platform
$browser
$device_id
country (ISO-3166-1 alfa-2, derivado de la IP al iniciar la sesión)

Casos de uso:

Journeys de bienvenida: usa Session Start como disparador para llegar a los usuarios cuando llegan a tu sitio.
Segmentos basados en sesiones: los eventos Session Start se guardan por usuario, por lo que las condiciones de segmento basadas en eventos pueden contarlos; por ejemplo, «realizó Session Start al menos 10 veces» (usuarios avanzados) o «no realizó Session Start en los últimos 7 días» (reinteracción).
Atribución de campañas: filtra la analítica por Session Start y agrupa por utm_campaign para ver qué campañas generan más sesiones.

Desactivar el rastreo de Session Start:

const joryio = new JoryioSDK({
  sdkKey: 'jry_sdk_web_...',
  trackSessionStart: false  // Desactiva los eventos automáticos de inicio de sesión
});

Mensajería in-app

El SDK muestra los mensajes in-app por ti. Las campañas elegibles aparecen solas y las impresiones, los clics y los descartes se registran automáticamente.

Tokens de entrega (delivery tokens)

Cuando el backend sirve una campaña elegible, emite también un token de entrega firmado y de corta duración. El SDK lo devuelve al informar una impresión, un clic o un cierre, y el servidor verifica la firma antes de registrar nada.

No tienes que hacer nada: el SDK se encarga por ti. Se documenta porque cambia lo que ocurre con un cliente que no envía token:

POST /v1/in-app/track   (no deliveryToken)
{ "success": false, "error": "A delivery token is required" }

El token es lo que hace que una impresión sea fiable: sin él, cualquiera que tenga la SDK key - que viaja dentro de cada app y cada página - podría informar impresiones y clics de una campaña que nunca se mostró, y tus informes los contarían.

Los sitios que cargan el paquete alojado desde /sdk/web/latest/joryio.min.js lo reciben automáticamente.

Dos tipos de contenido

Contenido	Qué es	Cómo se renderiza
Nativo	Datos estructurados: titular, texto, imagen, botones	Elementos DOM normales, insertados como nodos de texto. Sin iframe y sin ejecución de scripts.
HTML	Marcado, CSS y JavaScript escritos por el autor	Un iframe aislado en tu página.

Permitir mensajes HTML

Los mensajes HTML están desactivados por defecto. Un mensaje HTML ejecuta JavaScript escrito por el autor en tu sitio, así que activarlo es una decisión de tu propio equipo:

joryio.init({
  sdkKey: 'jry_sdk_web_YOUR_KEY',
  inApp: {
    allowHtmlJsInAppMessages: true,   // por defecto: false
  },
});

Dejarlo desactivado no desactiva la mensajería in-app. Los mensajes nativos siguen mostrándose, porque son datos escritos en nodos de texto del DOM, sin ningún intérprete. Las campañas HTML se omiten y se registran en la consola.

Si tu Content Security Policy prohíbe scripts en línea o contenido en iframes, déjalo desactivado y crea tus campañas como mensajes nativos.

Aplicar estilos a mensajes nativos desde tu propio CSS

Un mensaje nativo es DOM real en tu página, no un iframe, así que puedes darle estilo como a cualquier cosa tuya. El renderizador expone anclajes estables:

.joryio-inapp-native                     /* la tarjeta */
.joryio-inapp-native h2                  /* titular */
.joryio-inapp-native p                   /* cuerpo */
.joryio-inapp-native img                 /* imagen */
.joryio-inapp-native button.primary      /* primer botón */
.joryio-inapp-native button.secondary    /* el resto */
.joryio-inapp-close                      /* cerrar */
.joryio-inapp-backdrop                   /* capa de atenuación */
.joryio-inapp-modal / -banner / -slideup / -fullscreen   /* por tipo */

Prefiere las variables a los selectores. Todo lo que una campaña puede fijar se lee de una custom property, así que definirlas en :root te da un estilo de casa que una campaña todavía puede anular para un mensaje concreto:

:root {
  --joryio-inapp-bg: #0A1240;
  --joryio-inapp-fg: #FFFFFF;
  --joryio-inapp-primary: #00C8B7;
  --joryio-inapp-primary-fg: #041028;
  --joryio-inapp-radius: 18px;
  --joryio-inapp-font: 'Inter', system-ui, sans-serif;
  --joryio-inapp-size: 15px;
  --joryio-inapp-align: start;      /* start | center | end */
  --joryio-inapp-title-weight: 700;
}

La precedencia, de mayor a menor:

lo que la campaña fija en Style (optional) - escrito inline en la tarjeta
tus valores --joryio-inapp-*
los valores por defecto del SDK, que son colores del sistema

Así, una campaña que no fija nada hereda tu estilo de casa, y una que fija un fondo gana solo para ese mensaje. Sin !important en ningún sitio.

Si aun así usas los selectores, ten en cuenta que la hoja de estilos del SDK se inyecta en el momento de mostrar el mensaje y por tanto queda después de la tuya, así que gana los empates. Añade especificidad - .joryio-inapp .joryio-inapp-native {…} - en vez de una regla de una sola clase.

La dirección se resuelve sola: la tarjeta lleva dir="auto", así que un mensaje en hebreo o árabe se alinea a la derecha dentro de una página de izquierda a derecha.

Tipos de mensaje

Modal - Centro de la pantalla con fondo atenuado
Banner - Parte superior de la página
Slide-Up - Notificación pequeña desde abajo
Full-Screen - Mensaje a pantalla completa
Custom - Tu página decide la ubicación

Callbacks

joryio.init({
  sdkKey: 'jry_sdk_web_YOUR_KEY',
  inApp: {
    onMessageDisplay: (message) => console.log('shown', message.id),
    onMessageClick: (message, action) => console.log('clicked', action),
    onMessageDismiss: (message) => console.log('dismissed', message.id),
  },
});

Referencia de API

Inicializar

const joryio = new JoryioSDK(config)

Inicializa el SDK con tu configuración. El constructor devuelve un singleton: al construirlo una segunda vez devuelve la instancia existente.

Identificar

joryio.identify(userId)

Asocia un ID de usuario con la sesión actual.

Parámetros:

userId (cadena): identificador único del usuario.

Ejemplo:

joryio.identify('user_123');
joryio.setAttributes({
  email: 'user@example.com',
  name: 'John Doe',
  plan: 'premium',
});

Rastrear

joryio.track(eventName, properties?)

Rastrea un evento personalizado con propiedades opcionales.

Parámetros:

eventName (cadena): nombre del evento.
properties (objeto, opcional): propiedades del evento.

Ejemplo:

joryio.track('Order Completed', {
  order_id: 'order_789',
  total: 149.99,
  items: 3,
});

Rastrear vistas de página

Activa el rastreo automático de vistas de página:

const joryio = new JoryioSDK({
  sdkKey: 'jry_sdk_web_...',
  trackPageViews: true
});

Alias

joryio.alias(newUserId)

Asigna un usuario anónimo a un ID de usuario conocido; resulta útil tras el registro.

Parámetros:

newUserId (cadena): nuevo ID de usuario que se asociará.

Ejemplo:

// Antes de registrarse (rastreo anónimo)
joryio.track('Viewed Landing Page');

// Después de registrarse
joryio.alias('user_123');
joryio.identify('user_123');
joryio.setAttributes({ email: 'user@example.com' });

Añadir un alias

joryio.addAlias(aliasLabel, aliasName)

Añade un alias etiquetado al usuario identificado actual.

Ejemplo:

joryio.addAlias('crm', 'crm_98765');

Restablecer

joryio.reset()

Borra la sesión de usuario actual; resulta útil al cerrar sesión. También borra todos los datos UTM, incluida la atribución de primer y último contacto.

Ejemplo:

// Al cerrar sesión el usuario
function handleLogout() {
  joryio.reset();
  // ... otra lógica de cierre de sesión
}

Obtener el ID anónimo

joryio.getAnonymousId()

Devuelve el ID anónimo actual: el ID que Joryio asigna a cada visitante antes de identificarlo. Se genera en la primera inicialización, se conserva en localStorage y permanece estable durante la vida del visitante anónimo entre cargas de página (reset() lo genera de nuevo al cerrar sesión). Es el anonymousId exacto que se adjunta a cada evento que envía track(), por lo que puedes usarlo para vincular un evento del lado del servidor o una entrada de registro de consentimiento con el mismo perfil.

Devuelve:

string: el ID anónimo (siempre presente).

Léelo después de cargar el SDK

Con el fragmento asíncrono, window.joryio es una cola de comandos hasta que termine de cargar el SDK, y una llamada en cola no puede devolver un valor. Lee el ID en la instancia resuelta tras la carga o desde ready() (más abajo).

Ejemplo:

joryio.ready(function (sdk) {
  const anonId = sdk.getAnonymousId();
  // adjúntalo a tu propio registro de consentimiento o evento de servidor
  fetch('/consent', { method: 'POST', body: JSON.stringify({ anonymousId: anonId }) });
});

Obtener el ID de usuario

joryio.getUserId()

Devuelve el ID de usuario identificado actual, o null si el visitante sigue siendo anónimo; es decir, si no se ha llamado a identify().

Devuelve:

string | null

Ejemplo:

joryio.ready(function (sdk) {
  const userId = sdk.getUserId(); // null hasta llamar a joryio.identify(...)
});

Ready

joryio.ready(callback)

Ejecuta callback(sdk) cuando el SDK esté cargado e inicializado. Es la forma segura de leer un valor, como getAnonymousId() / getUserId(), que un stub de fragmento en cola no puede devolver antes de cargarse. callback recibe la instancia del SDK; si ya está cargado, se ejecuta de inmediato.

Ejemplo:

joryio.ready(function (sdk) {
  console.log('anon:', sdk.getAnonymousId(), 'user:', sdk.getUserId());
});

Obtener datos UTM

joryio.getUTMData()

Obtiene los parámetros UTM actuales, de primer contacto y de último contacto.

Devuelve:

Objeto con datos UTM current, firstTouch y lastTouch.

Ejemplo:

const utmData = joryio.getUTMData();
console.log(utmData.current?.utm_source); // "google"
console.log(utmData.firstTouch?.utm_campaign); // "awareness_campaign"
console.log(utmData.lastTouch?.utm_campaign); // "conversion_campaign"

Actualizar UTM

joryio.updateUTM()

Actualiza manualmente los parámetros UTM desde la URL actual. Es útil para aplicaciones de una sola página que cambian URL sin recargar la página.

Ejemplo:

// React Router
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function App() {
  const location = useLocation();

  useEffect(() => {
    joryio.updateUTM();
  }, [location]);
}

// Vue Router
router.afterEach(() => {
  joryio.updateUTM();
});

Atributos de matriz

joryio.addToArray(key, value)
joryio.removeFromArray(key, value)

Manipula atributos de matriz de forma eficiente.

Parámetros:

key (cadena): nombre del atributo.
value (cualquiera): valor que se añadirá o eliminará.

Ejemplo:

// Añade etiquetas al usuario
joryio.addToArray('tags', 'vip');
joryio.addToArray('tags', 'premium');
// Resultado: tags = ['vip', 'premium']

// Añade un duplicado (no hace nada; evita duplicados)
joryio.addToArray('tags', 'vip');
// Resultado: tags = ['vip', 'premium'] (sin cambios)

// Elimina una etiqueta
joryio.removeFromArray('tags', 'vip');
// Resultado: tags = ['premium']

// Casos de uso frecuentes
joryio.addToArray('interests', 'technology');
joryio.addToArray('purchasedProducts', 'prod_123');
joryio.addToArray('featureFlags', 'beta-access');

Comportamiento:

addToArray() solo añade el valor si aún no existe, para evitar duplicados.
addToArray() crea una matriz nueva si el atributo no existe.
removeFromArray() elimina todas las instancias del valor.
Los cambios se sincronizan automáticamente con el backend, tanto para usuarios identificados como anónimos.

Datos automáticos de sesión

El SDK web enriquece automáticamente los eventos Session Start con datos de dispositivo y entorno. Estos valores se guardan en el perfil de usuario y los registros de dispositivo:

$user_agent
$timezone
$screen_width / $screen_height
$viewport_width / $viewport_height
$language / $languages
$platform
$browser
$device_id
country (ISO-3166-1 alfa-2, derivado de la IP al iniciar la sesión)

Propiedades de evento

Propiedades estándar

Todos los eventos almacenados incluyen estas propiedades. El SDK adjunta $device_id y la canalización de ingesta de Joryio añade las demás al recibir el evento:

$device_id: ID de dispositivo estable por navegador (adjuntado por el SDK).
$session_id: ID de sesión actual.
$anonymous_id: ID de usuario anónimo (antes de identificarlo).
$app_id: ID de tu app.
$app_name: nombre de tu app.
$platform: siempre «web» en el SDK web.
$is_identified: indica si el usuario está identificado.

El prefijo $ está reservado: no lo uses para tus propias propiedades.

Propiedades personalizadas

Puedes añadir cualquier propiedad personalizada a tus eventos:

joryio.track('Video Played', {
  video_id: 'vid_123',
  video_title: 'Product Demo',
  duration: 120,
  autoplay: false,
  // Cualquier otro dato personalizado
});

Prácticas recomendadas

1. Inicializar pronto

Inicializa el SDK lo antes posible en tu aplicación:

// En el archivo principal de tu app
import JoryioSDK from '@joryio/web-sdk';

const joryio = new JoryioSDK({
  sdkKey: process.env.JORYIO_SDK_KEY,
  enableDebug: process.env.NODE_ENV === 'development',
});

2. Rastrear eventos significativos

Céntrate en rastrear los eventos que importan para tu negocio:

// Bien: eventos específicos y accionables
joryio.track('Trial Started', { plan: 'premium' });
joryio.track('Feature Used', { feature: 'export', format: 'csv' });

// Evita: eventos demasiado genéricos
joryio.track('Button Clicked'); // Demasiado genérico

3. Usar nombres coherentes

Usa una convención de nombres coherente para eventos y propiedades:

// Bien: nombres claros y coherentes
joryio.track('Subscription Upgraded', {
  from_plan: 'basic',
  to_plan: 'premium',
  billing_cycle: 'monthly',
});

// Evita: nombres incoherentes
joryio.track('upgraded_subscription', {
  FromPlan: 'basic',
  'to-plan': 'premium',
});

4. Gestionar el ciclo de vida del usuario

Gestiona correctamente la identificación de usuarios y las sesiones:

// Al iniciar sesión
function handleLogin(userId, userInfo) {
  joryio.identify(userId);
  joryio.setAttributes({
    email: userInfo.email,
    name: userInfo.name,
  });
}

// Al cerrar sesión
function handleLogout() {
  joryio.reset();
}

// Al registrarse
function handleSignup(userId, userInfo) {
  joryio.alias(userId);
  joryio.identify(userId);
  joryio.setAttributes(userInfo);
}

Solución de problemas

Los eventos no aparecen

Comprueba tu clave de SDK: asegúrate de que comienza por jry_sdk_web_.
Comprueba la consola: activa el modo de depuración para ver registros detallados.
Verifica la inicialización: asegúrate de que new JoryioSDK(config) se ejecuta antes de llamar a otros métodos.

Errores de CORS

Los endpoints de rastreo del SDK responden con Access-Control-Allow-Origin: *, por lo que no hace falta incluir dominios en una lista de permitidos. Si sigues viendo errores de CORS, comprueba que apiEndpoint apunte a la URL base correcta (https://api-eu1.joryio.com) y que una extensión del navegador o un proxy que elimina encabezados CORS no esté bloqueando la solicitud.

Problemas de rastreo de sesión

El SDK usa localStorage para conservar las sesiones. Asegúrate de que:

Tu sitio se sirva por HTTPS (obligatorio para contextos seguros).
Los usuarios no hayan desactivado localStorage.
No estés llamando a reset() sin querer.

Siguientes pasos

SDK web: UTM y atribución: atribución de campañas, primer/último contacto y captura de UTM.
Rastreo de e-commerce: eventos de producto, carrito, checkout y pedido.
Rastrear eventos personalizados
Definir atributos de usuario
Crear segmentos
Crear campañas

Instalación​

Mediante npm/yarn​

Mediante CDN​

Inicio rápido​

1. Inicializar el SDK​

2. Identificar usuarios​

3. Rastrear eventos​

Opciones de configuración​

Procesamiento por lotes y vaciado de eventos​

Gestión de sesión​

Rastreo de Session Start​

Datos automáticos de sesión​

Mensajería in-app​

Tokens de entrega (delivery tokens)​

Dos tipos de contenido​

Permitir mensajes HTML​

Aplicar estilos a mensajes nativos desde tu propio CSS​

Tipos de mensaje​

Callbacks​

Referencia de API​

Inicializar​

Identificar​

Rastrear​

Alias​

Añadir un alias​

Restablecer​

Obtener el ID anónimo​

Obtener el ID de usuario​

Ready​

Obtener datos UTM​

Actualizar UTM​

Atributos de matriz​

Datos automáticos de sesión​

Propiedades de evento​

Propiedades estándar​

Propiedades personalizadas​

Prácticas recomendadas​

1. Inicializar pronto​

2. Rastrear eventos significativos​

3. Usar nombres coherentes​

4. Gestionar el ciclo de vida del usuario​

Solución de problemas​

Los eventos no aparecen​

Errores de CORS​

Problemas de rastreo de sesión​

Siguientes pasos​

Instalación

Mediante npm/yarn

Mediante CDN

Inicio rápido

1. Inicializar el SDK

2. Identificar usuarios

3. Rastrear eventos

Opciones de configuración

Procesamiento por lotes y vaciado de eventos

Gestión de sesión

Rastreo de Session Start

Datos automáticos de sesión

Mensajería in-app

Tokens de entrega (delivery tokens)

Dos tipos de contenido

Permitir mensajes HTML

Aplicar estilos a mensajes nativos desde tu propio CSS

Tipos de mensaje

Callbacks

Referencia de API

Inicializar

Identificar

Rastrear

Alias

Añadir un alias

Restablecer

Obtener el ID anónimo

Obtener el ID de usuario

Ready

Obtener datos UTM

Actualizar UTM

Atributos de matriz

Datos automáticos de sesión

Propiedades de evento

Propiedades estándar

Propiedades personalizadas

Prácticas recomendadas

1. Inicializar pronto

2. Rastrear eventos significativos

3. Usar nombres coherentes

4. Gestionar el ciclo de vida del usuario

Solución de problemas

Los eventos no aparecen

Errores de CORS

Problemas de rastreo de sesión

Siguientes pasos