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.

Siguientes pasos​