Integración con Shopify

Integre Zenovay con su tienda Shopify para análisis completo de e-commerce, seguimiento de ingresos e insights sobre el viaje del cliente.

Instalación

Instalación de tema

1. Vaya a Online Store -> Themes
2. Haga clic en « Actions » -> « Edit code »
3. Encuentre theme.liquid
4. Añada antes de </head>:

<script
  defer
  data-tracking-code="YOUR_TRACKING_CODE"
  src="https://api.zenovay.com/z.js">
</script>

Google Tag Manager

Si utiliza GTM:

1. Cree una nueva etiqueta Custom HTML
2. Añada la etiqueta de script de Zenovay
3. Desencadene en All Pages

Rastreo automático de e-commerce

Eventos rastreables

Estos eventos pueden rastrearse usando los fragmentos a continuación:

• Vistas de producto
• Agregar al carrito
• Quitar del carrito
• Inicio del checkout
• Información de pago agregada
• Compra completada
• Ingresos atribuidos

Eventos rastreados

Evento	Cuándo
view_product	Se ve la página del producto
add_to_cart	Se agrega un artículo al carrito
remove_from_cart	Se quita un artículo
begin_checkout	Se inicia el checkout
add_payment_info	Se ingresa la información de pago
purchase	Se completa el pedido

Rastreo manual de ingresos

Página de estado del pedido

Agregue en Configuración → Pago → Página de estado del pedido:

{% if first_time_accessed %}
<script>
if (window.zenovay) {
  zenovay('revenue', {{ total_price | money_without_currency | remove: ',' }}, '{{ currency }}', {
    order_id: '{{ order.name }}',
    shipping: {{ shipping_price | money_without_currency | remove: ',' }},
    tax: {{ tax_price | money_without_currency | remove: ',' }},
    items: [
      {% for item in line_items %}
      {
        id: '{{ item.sku | default: item.product_id }}',
        name: '{{ item.title | escape }}',
        price: {{ item.final_price | money_without_currency | remove: ',' }},
        quantity: {{ item.quantity }}
      }{% unless forloop.last %},{% endunless %}
      {% endfor %}
    ]
  });
}
</script>
{% endif %}

Rastreo en la página de producto

Agregue al template del producto:

<script>
document.addEventListener('DOMContentLoaded', function() {
  if (window.zenovay) {
    zenovay('track', 'view_product', {
      product_id: '{{ product.id }}',
      product_name: '{{ product.title | escape }}',
      price: {{ product.price | money_without_currency | remove: ',' }},
      category: '{{ product.type | escape }}',
      variant: '{{ product.selected_or_first_available_variant.title | escape }}'
    });
  }
});
</script>

Rastreo de agregar al carrito

Para carritos Ajax, agregue al JavaScript del tema:

// Escuchar las actualizaciones del carrito
document.addEventListener('cart:added', function(event) {
  if (window.zenovay && event.detail) {
    const item = event.detail;
    zenovay('track', 'add_to_cart', {
      product_id: item.product_id,
      variant_id: item.variant_id,
      product_name: item.product_title,
      price: item.price / 100,
      quantity: item.quantity
    });
  }
});

Identificación de clientes

Después del checkout

{% if customer %}
<script>
if (window.zenovay) {
  zenovay('identify', '{{ customer.id }}', {
    email: '{{ customer.email }}',
    name: '{{ customer.name | escape }}',
    orders_count: {{ customer.orders_count }},
    total_spent: {{ customer.total_spent | money_without_currency | remove: ',' }}
  });
}
</script>
{% endif %}

Páginas de cuenta

Agregue a los templates de cliente:

{% if customer %}
<script>
if (window.zenovay) {
  zenovay('identify', '{{ customer.id }}', {
    email: '{{ customer.email }}',
    name: '{{ customer.name | escape }}'
  });
}
</script>
{% endif %}

Funciones de Shopify Plus

Extensibilidad del checkout

Para el checkout de Shopify Plus:

// checkout.js
import { extension } from '@shopify/checkout-ui-extensions';

export default extension('Checkout::Dynamic::Render', (root, api) => {
  // Registrar eventos del checkout
  if (window.zenovay) {
    zenovay('track', 'checkout_step', {
      step: api.step,
      total: api.cost.totalAmount.amount
    });
  }
});

Editor de scripts

Para tiendas Plus, use Scripts:

# Rastrear con atributos personalizados
Output.cart.attributes["zenovay_session"] = Input.cart.token

Configuración de metas

Meta de compra

Configuración manual:

1. Vaya a Zenovay → Metas
2. Cree la meta "Compra"
3. Tipo: Evento
4. Nombre del evento: purchase

Meta de agregar al carrito

1. Cree la meta "Agregar al carrito"
2. Tipo: Evento
3. Nombre del evento: add_to_cart

Suscripción al boletín

Rastree los formularios de boletín de Shopify:

<script>
document.querySelector('[data-newsletter-form]')?.addEventListener('submit', function() {
  if (window.zenovay) {
    zenovay('goal', 'newsletter_signup');
  }
});
</script>

Embudo de conversión

Embudo estándar de e-commerce

Vista de producto    100%
    ↓
Agregar al carrito    15%
    ↓
Checkout              8%
    ↓
Compra                4%

Configuración del embudo

1. Vaya a Embudos → Crear
2. Agregue los pasos:
   • view_product
   • add_to_cart
   • begin_checkout
   • purchase
3. Guarde y analice

Soporte de múltiples monedas

Registrar en la moneda del cliente

<script>
if (window.zenovay) {
  zenovay('revenue', {{ total_price | money_without_currency | remove: ',' }}, '{{ cart.currency.iso_code }}');
}
</script>

Moneda de los informes

En la configuración de Zenovay, configure:

• Moneda principal para los informes
• La conversión automática se aplica

Shopify headless

Hydrogen/Oxygen

// En su componente de confirmación de pedido
import { useEffect } from 'react';

export function OrderConfirmation({ order }) {
  useEffect(() => {
    if (window.zenovay) {
      window.zenovay('revenue', parseFloat(order.totalPrice.amount), order.totalPrice.currencyCode, {
        order_id: order.id,
        items: order.lineItems.map(item => ({
          id: item.variant.sku,
          name: item.title,
          price: parseFloat(item.variant.price.amount),
          quantity: item.quantity
        }))
      });
    }
  }, [order]);

  return <div>¡Gracias!</div>;
}

API de Storefront

Al usar la API de Storefront:

// Después del checkout exitoso
const response = await fetch('/api/checkout', {
  method: 'POST',
  body: JSON.stringify(checkoutData)
});

const order = await response.json();

// Registrar en Zenovay
zenovay('revenue', order.total, order.currency, {
  order_id: order.id
});

Opciones de configuración

Opciones de configuración

Configuración	Descripción
ID del sitio web	Su ID de rastreo de Zenovay
Rastrear productos	Habilitar eventos de vista de producto
Rastrear carrito	Eventos de agregar/quitar del carrito
Rastrear checkout	Eventos del embudo de checkout
Rastrear pedidos	Completación de compra
Excluir personal	No rastrear visitas del personal

Configuración de privacidad

Configuración	Descripción
Anonimización de IP	Enmascarar IPs de visitantes
Consentimiento de cookies	Esperar el consentimiento
Respetar DNT	Respetar Do Not Track

Solución de problemas

Los eventos no se registran

Verifique:

• Que el script de rastreo esté agregado en theme.liquid
• Que el ID del sitio web sea correcto
• Que no esté conectado como personal (si están excluidos)
• La consola del navegador para ver errores

Los ingresos no coinciden

Confirme:

• La configuración de moneda
• La inclusión de impuestos/envío
• El manejo de reembolsos
• El rastreo del pedido de prueba

El checkout no se rastrea

Para el checkout:

• El script debe estar en el checkout
• Shopify Plus puede requerir configuración personalizada
• Pruebe con un checkout real

Compatibilidad con temas

Funciona con:

• Dawn
• Debut
• Brooklyn
• Todos los temas 2.0
• La mayoría de los temas personalizados

Pruebas

Modo de prueba

Habilite el modo de prueba:

1. Agregue ?zenovay_debug=true a la URL
2. Vea los eventos en la consola
3. Verifique la estructura de los datos

Pedido de prueba

1. Habilite el modo de prueba
2. Complete el checkout
3. Verifique en el tiempo real de Zenovay
4. Compruebe la atribución de ingresos

Próximos pasos

• Guía de ingresos de e-commerce
• Embudos de conversión
• Ingresos por fuente