Saltar al contenido principal

Rastreo de e-commerce

Los SDK de Joryio incluyen rastreo de e-commerce integrado para la interacción con productos, la actividad de los carritos y las transacciones de compra. El rastreador funciona igual en todas las plataformas: los mismos métodos, los mismos nombres de evento estándar y la misma semántica de propiedades; solo cambia la sintaxis del lenguaje.

Elige tu plataforma en cualquiera de los ejemplos de código de abajo; la elección se sincroniza en toda la página. Para instalación y configuración, consulta las guías de plataforma: SDK web, SDK de iOS, SDK de Android, SDK de React Native. React Native no tiene un rastreador dedicado: su pestaña muestra las llamadas Joryio.track() equivalentes (consulta React Native más abajo).

Convención de nombres de ID​

Joryio usa una convención clara para los identificadores:

Tu IDDescripciónEjemplo
productIdTu identificador de producto (SKU o ID de producto de tu plataforma de e-commerce)."SKU-12345"
orderIdTu identificador de pedido (número de pedido de tu plataforma)."ORD-2024-001"
userIdTu identificador de usuario (enviado a identify())."user-123"

Usa tus propios identificadores con naturalidad: no necesitas prefijos especiales.

Inicializar el rastreador de e-commerce​

// Obtén el rastreador de e-commerce desde la instancia de tu SDK
// (joryio es la instancia creada con `new JoryioSDK({ sdkKey: ... })`)
const ecommerce = joryio.ecommerce({
  currency: 'USD' // Moneda predeterminada para todos los eventos
});

Rastrear vistas y búsquedas de producto​

// Cuando el usuario ve una página de producto
ecommerce.viewProduct({
  productId: 'SKU-12345',
  name: 'Classic Blue T-Shirt',
  price: 29.99,
  category: 'Clothing/T-Shirts',
  brand: 'Acme Apparel',
  imageUrl: 'https://example.com/images/blue-tshirt.jpg',
  url: 'https://example.com/products/blue-tshirt'
});

// Cuando el usuario ve una página de categoría
ecommerce.viewCategory('tshirts', 'T-Shirts');

// Cuando el usuario realiza una búsqueda
ecommerce.search('blue shirts', 42); // consulta, número de resultados

Rastrear actividad de carrito​

// Añade un artículo al carrito
ecommerce.addToCart({
  productId: 'SKU-12345',
  name: 'Classic Blue T-Shirt',
  price: 29.99,
  quantity: 1,
  variantId: 'var-medium',
  sku: 'BTS-001-M'
}, 59.98); // Opcional: valor actual del carrito

// Elimina un artículo del carrito
ecommerce.removeFromCart({
  productId: 'SKU-12345',
  name: 'Classic Blue T-Shirt',
  price: 29.99
}, 1); // cantidad que se eliminará

// Actualiza todo el carrito
ecommerce.updateCart([
  { productId: 'SKU-12345', name: 'Blue T-Shirt', price: 29.99, quantity: 2 },
  { productId: 'SKU-67890', name: 'Black Jeans', price: 49.99, quantity: 1 }
], 109.97); // matriz de artículos, valor total del carrito

Rastrear el flujo de checkout​

// Cuando el usuario inicia el checkout
ecommerce.startCheckout([
  { productId: 'SKU-12345', name: 'Blue T-Shirt', price: 29.99, quantity: 2 },
  { productId: 'SKU-67890', name: 'Black Jeans', price: 49.99, quantity: 1 }
], 109.97); // artículos, valor del carrito

// Cuando el usuario añade información de pago
ecommerce.addPaymentInfo('credit_card');

Rastrear compras​

// Cuando se completa el pedido
ecommerce.purchase({
  orderId: 'ORD-2024-001',
  items: [
    {
      productId: 'SKU-12345',
      name: 'Classic Blue T-Shirt',
      price: 29.99,
      quantity: 2,
      category: 'Clothing',
      brand: 'Acme'
    },
    {
      productId: 'SKU-67890',
      name: 'Black Jeans',
      price: 49.99,
      quantity: 1
    }
  ],
  value: 109.97,
  currency: 'USD',
  shipping: 5.99,
  tax: 8.80,
  discount: 10.00,
  coupon: 'SAVE10'
});
Debes proporcionar los artículos

El método purchase() exige que envíes los artículos del pedido explícitamente. El SDK no guarda el estado del carrito del lado cliente ni obtiene artículos automáticamente del carrito rastreado o del servidor. Así se garantiza la precisión, ya que la página o pantalla de confirmación conoce los artículos exactos que se compraron.

Rastrear cambios de estado de pedido​

// Pedido enviado
ecommerce.orderFulfilled('ORD-2024-001', '1Z999AA10123456784', 'UPS');

// Pedido entregado
ecommerce.orderDelivered('ORD-2024-001');

// Pedido cancelado
ecommerce.orderCancelled('ORD-2024-001', 'Customer requested');

// Pedido reembolsado
ecommerce.orderRefunded('ORD-2024-001', 29.99, 'Product defective');

Rastrear lista de deseos y compartidos​

// Añade a la lista de deseos
ecommerce.addToWishlist({
  productId: 'SKU-12345',
  name: 'Classic Blue T-Shirt',
  price: 29.99
});

// Comparte el producto
ecommerce.shareProduct({
  productId: 'SKU-12345',
  name: 'Classic Blue T-Shirt'
}, 'facebook'); // método para compartir

Rastrear cupones​

// Cupón aplicado
ecommerce.applyCoupon('SAVE10', 10.00, 'percentage');

// Cupón eliminado
ecommerce.removeCoupon('SAVE10');

Rastrear reseñas​

// Reseña de producto enviada
ecommerce.submitReview('SKU-12345', 5, 'Great quality shirt!');

Eventos estándar de e-commerce​

El rastreador de e-commerce envía los mismos eventos estándar en todas las plataformas:

Nombre de eventoDescripción
Product ViewedEl usuario ve una página de producto.
Product List ViewedEl usuario ve una página de categoría.
Products SearchedEl usuario busca productos.
Product AddedSe añadió un artículo al carrito.
Product RemovedSe eliminó un artículo del carrito.
Cart UpdatedCambió el contenido del carrito.
Checkout StartedEl usuario inicia checkout.
Payment Info EnteredEl usuario añade un método de pago.
Order CompletedPedido completado.
Order FulfilledPedido enviado.
Order DeliveredPedido entregado.
Order CancelledPedido cancelado.
Order RefundedPedido reembolsado.
Product Added to WishlistProducto añadido a la lista de deseos.
Product Removed from WishlistProducto eliminado de la lista de deseos.
Product SharedProducto compartido.
Coupon AppliedCupón aplicado.
Coupon RemovedCupón eliminado.
Product ReviewedReseña de producto enviada.

React Native​

El SDK de React Native no incluye un rastreador de e-commerce dedicado. Las apps de React Native envían los mismos eventos estándar mediante Joryio.track(), usando los mismos nombres de evento y nombres de propiedad en tránsito que emiten los rastreadores de los otros SDK (los rastreadores convierten sus entradas camelCase en propiedades de evento snake_case en tránsito). La pestaña React Native de cada sección anterior muestra la llamada Joryio.track() equivalente para cada método del rastreador.

Cuando una tienda (Shopify, WooCommerce, Magento) o la API de pedidos envía tus pedidos, Joryio emite por sí mismo Order Refunded y Order Cancelled: no llames también a orderRefunded / orderCancelled para esos pedidos, o cada reembolso se registrará dos veces. Los eventos del servidor usan las mismas claves order_id, refund_amount y reason que los trackers, así que una sola condición de journey coincide con ambos. Consulta Eventos de reembolso y cancelación.

Argumentos obligatorios​

Todos los trackers rechazan una llamada incompleta de la misma forma, en todos los SDK: registran una advertencia y no envían nada - nunca un evento con un ID vacío o un importe cero, que un informe de ingresos contaría como real. Ninguna llamada lanza una excepción.

LlamadaObligatorio
viewProduct, removeFromCart, addToWishlist, removeFromWishlistUn producto con productId y un price finito
addToCartUn artículo con productId y un price finito
shareProductUn producto como el anterior, y un shareMethod
viewCategorycategoryId y categoryName
searchquery
cartViewed, updateCart, startCheckoutUn array items, cada artículo con productId y un price finito, y un cartValue finito
addPaymentInfopaymentMethod
purchaseUn orderId, un array items (puede estar vacío; cada artículo como el anterior) y un value finito
orderFulfilled, orderDelivered, orderCancelled, orderRefundedorderId
applyCoupon, removeCouponcouponCode
submitReviewproductId

Un ID o una etiqueta vacíos, o que solo contienen espacios, cuentan como ausentes. Un importe opcional - cartValue en addToCart, shipping, tax y discount en un pedido, refundAmount, discountAmount - se puede omitir, pero el que pase debe ser un número finito: NaN o infinito rechaza toda la llamada en lugar de enviarla sin ese importe.

Las propiedades personalizadas que pases junto a la llamada siguen la regla general: un valor NaN o infinito ahí se descarta con un aviso y la llamada se envía sin esa clave - consulta Propiedades y tipos de datos.

En Unity los nombres van en PascalCase (ViewProduct, ProductId); las reglas son las mismas.

Siguientes pasos​