Seguimiento del comercio electrónico

Esta guía describe cómo integrar manualmente Trackboxx seguimiento de comercio electrónico en una tienda - independientemente de si está utilizando un sistema personalizado, Shopify, Shopware, Magento u otra tienda. Un plugin oficial está disponible para WooCommerce que activa automáticamente todos los eventos descritos aquí.

Lógica básica: ¿Qué trackboxx('Compra', [...])?

Antes de pasar a los acontecimientos individuales, es importante comprender un punto importante: la experiencia ha demostrado que este punto es el que con más frecuencia se malinterpreta:

Importante: trackboxx('Compra', [...]) es ningún acontecimiento, sino la llamada genérica para todas las interacciones de comercio electrónico. El evento que realmente se rastrea viene determinado por el parámetro primer objeto de la matriz sobre su type:

• { tipo: 'VerProducto' } - Página de detalles del producto
• { tipo: 'AddToCart' } - Producto añadido a la cesta de la compra
• { tipo: 'ViewCart' } - Ver la página de la cesta de la compra
• { type: 'order' } - Pedido realizado

El Compra en la llamada a la función simplemente se refiere a la categoría de acción „comercio electrónico“ y siempre es la misma, independientemente de si está realizando el seguimiento de una vista de producto, un añadir al carrito o una compra real.

Los cuatro acontecimientos del comercio electrónico

1. viewProduct - página de detalles del producto

Disparador: Al abrir la página de detalles de un producto.
Datos mínimos: Nombre del producto y precio unitario.

<script>
trackboxx(Compra, [
  { tipo: VerProducto },
  { tipo: productonombre: '%%PRODUCT_NAME%%'precio: 99.90 }
]);
</script>Lenguaje del código: HTML, XML (xml)

Notas:

• precio = Precio unitario del producto (numérico, punto como separador decimal).
• Campos adicionales opcionales: sku, categoría.
• Para variantes o paquetes: transfiera el nombre completo de la variante, incluidos los atributos (por ejemplo, „Camiseta - roja, L“) para que los informes se agreguen de forma coherente.

2º AddToCart - Producto añadido a la cesta de la compra

Disparador: Después de „Proceso “Añadir a la cesta" - no ciego al hacer clic.
Datos mínimos: Nombre del producto y precio unitario.

<script>
trackboxx(Compra, [
  { tipo: Añadir al carro },
  { tipo: productonombre: '%%PRODUCT_NAME%%'precio: 19.99 }
]);
</script>Lenguaje del código: HTML, XML (xml)

Notas sobre los plazos: según el tipo de tienda:

• Tiendas personalizadas y cestas de la compra AJAX: Activar evento en la llamada de retorno de la acción de añadir a la cesta, no en el controlador de clic. Esto significa que no se genera ningún evento de seguimiento si el artículo no termina en la cesta de la compra debido a comprobaciones de existencias, validación o errores de red.
• Tiendas del lado del servidor con redirección: Activar evento una vez en la siguiente página después de una adición exitosa.
• Integraciones sencillas con sólo pulsar un botón: permitido, pero sólo si se garantiza que el clic conduce realmente a una adición con éxito (por ejemplo, comprobación con botón desactivado para productos agotados).
• Deduplicación: Enviar AddToCart sólo una vez por acción - sin duplicación para recargar o volver a navegar.

3. viewCart - página de la cesta de la compra

Disparador: Al abrir la página de la cesta de la compra.
Datos mínimos: Total del carro (importe). Opcional: todos los productos incluidos como objetos separados.

<script>
trackboxx(Compra, [
  { tipo: VerCarro' },
  { tipo: carro, cantidad: 149.70 },
  { tipo: productonombre: Producto Aprecio: 99.90 },
  { tipo: productonombre: Producto Bprecio: 49.80 }
]);
</script>Lenguaje del código: HTML, XML (xml)

Notas:

• importe = importe total de la cesta de la compra. Estándar: Neto (corresponde al comportamiento del plugin oficial de WooCommerce).
• Si su tienda trabaja con precios brutos, los valores brutos también están permitidos - el factor decisivo es Coherencia dentro de un acontecimiento: importe.carrito y todos precio.producto-los valores deben calcularse sobre la misma base (todo neto o todo bruto).
• Una cesta de la compra separada para cada producto-objeto.
• En precio por producto corresponde al Total del artículo (precio unitario × cantidad) - véase el apartado „Lógica de precios y cantidad“.

4. compra - finalización del pedido (página de agradecimiento)

Disparador: En la página de confirmación del pedido tras el pago - exactamente una vez por pedido.
Datos mínimos: ID del pedido, importe total, todos los productos comprados.

<script>
trackboxx(Compra, [
  { tipo: 'orden', id: 'ORDER_ID', total: 149.70 },
  { tipo: productonombre: Producto Aprecio: 99.90 },
  { tipo: productonombre: Producto Bprecio: 49.80 }
]);
</script>Lenguaje del código: HTML, XML (xml)

Opcional - con vale: Un vale adicional por vale utilizado cupón-objeto.

<script>
trackboxx(Compra, [
  { tipo: 'orden', id: '12345', total: 149.70 },
  { tipo: 'cupón'nombre: 'VERANO10', descuento: 10.00 },
  { tipo: productonombre: Producto Aprecio: 99.90 },
  { tipo: productonombre: Producto Bprecio: 49.80 }
]);
</script>Lenguaje del código: HTML, XML (xml)

Notas:

• En el acto de compra hay ninguno marcador de evento precedente como con ViewProduct o AddToCart - el pedir-objeto identifica el evento en sí.
• id.pedido = ID de pedido único del sistema de la tienda.
• total.pedido = valor total del pedido (se recomienda el importe final bruto incluyendo gastos de envío e impuestos, pero debe ser coherente con los valores de product.price).
• precio.producto = Total del artículo (precio unitario × cantidad), no precio unitario.
• Protección contra disparos múltiples (protección contra recarga), por ejemplo, mediante un indicador del lado del servidor o un marcador de sesión.

Lógica de precios y cantidad

Trackboxx utilizado sin separar cantidad-campo. Las cantidades se asignan implícitamente a través del precio. Esta norma es vinculante y debe aplicarse del mismo modo en todas las integraciones:

Ejemplo: Tres artículos idénticos de 19,99 euros cada uno en la cesta de la compra se venden a ViewCart y Comprar como a producto-objeto con precio: 59,97 enviados - no como tres objetos separados y sin cantidad-campo.

Secuencia de objetos en la matriz

Para una integración limpia y coherente, recomendamos la siguiente secuencia de objetos:

1. Marcador de eventos o. pedir-objeto (VerProducto / Añadir al carrito / ViewCart / pedir)
2. carro-object (sólo para ViewCart)
3. cupón-Objetos (sólo para Compra, si están disponibles)
4. producto-objetos

Mejores prácticas

• Deduplicación: Envíe cada evento sólo una vez por acción real - sin doble seguimiento para recarga, navegación hacia atrás o devoluciones AJAX.
• Horario: VerProducto y ViewCart al cargar la página. Añadir al carrito después de la adición confirmada. Comprar una vez en la página de agradecimiento.
• Precios e importes: En Número (no una cadena), con un punto como separador decimal (p. ej. 19.99 - no "19,99").
• Coherencia: Neto o bruto es una decisión que debe tomar cada tienda. importe.carrito, precio.producto y total.pedido.
• Protección de datos: No facilite nunca datos personales: ni direcciones de correo electrónico, ni nombres, ni números o direcciones de clientes. Respete el consentimiento.

Lista de comprobación rápida por sistema de tienda

• WooCommerce: Utiliza el plugin oficial Trackboxx. Activa los cuatro eventos (VerProducto, Añadir al carrito, ViewCart, Comprar) automáticamente, sin necesidad de integración manual.
• Custom Shops: En el lado del servidor, inserte el nombre del producto, el precio y el total como variables en el script en línea correspondiente.
• Shopify: Insertar fragmentos en las plantillas (producto.líquido, carro.líquido, (página de pago). Para Añadir al carrito acoplarse a la devolución de llamada de éxito de AJAX.
• Shopware / Magento: Adjuntar a los eventos o ganchos correspondientes en el tema o plugin - página de producto, página de cesta de la compra, evento de añadir al carrito, evento de pedido completado.

Referencia: Variantes mínimas

VerProducto (mínimo)

trackboxx(Compra, [
  { type: VerProducto },
  { type: producto, nombre: Nombre del producto 1, precio: 19.99 }
]);Lenguaje del código: JavaScript (javascript)

AddToCart (mínimo)

trackboxx(Compra, [
  { type: Añadir al carro },
  { type: producto, nombre: Nombre del producto 1, precio: 19.99 }
]);Lenguaje del código: JavaScript (javascript)

ViewCart (mínimo)

trackboxx(Compra, [
  { type: VerCarro' },
  { type: carro, importe: 19.99 }
]);Lenguaje del código: JavaScript (javascript)

Compra (mínimo)

trackboxx(Compra, [
  { type: 'orden', id: 'ORDER_ID', total: 19.99 },
  { type: producto, nombre: Nombre del producto 1, precio: 19.99 }
]);Lenguaje del código: JavaScript (javascript)

Breve resumen: Las normas más importantes

• trackboxx('Compra', [...]) es una llamada genérica de comercio electrónico, no un evento.
• El tipo de evento se encuentra en la carga útil (type-del primer objeto), no en la llamada a la función.
• Añadir al carrito disparar después de una adición exitosa - no ciegamente al hacer clic.
• importe.carrito como valor neto por defecto; bruto permitido, pero coherente dentro del evento.
• precio = Precio unitario a VerProducto / Añadir al carrito, total de artículos para ViewCart / Comprar.
• No por separado cantidad-campo - cantidades a través del precio.
• Evento de compra basado en { type: 'order' } sin un marcador de evento precedente.
• Precios como número con separador decimal de puntos, nunca como cadena.
• No hay datos personales en la carga útil.