El script de Webtracking de WoowUp permite rastrear la actividad de los clientes en tu tienda, como los productos que visitaron, para optimizar estrategias de marketing y ofrecer recomendaciones personalizadas.

¿Cómo integrar el script desde tu tienda Shopify?

Configuración previa: Identifica tus datos

Antes de comenzar con la integración, necesitas identificar dos datos clave:

Clave Pública de WoowUp
Tu Clave Pública (Public Key) es necesaria para identificar tu cuenta en WoowUp.
¿Dónde encontrar la clave pública?
- Ingresa a tu cuenta de WoowUp
- Ve a Configuración > Mi Cuenta
- Copia tu Clave Pública (Public Key)
Ejemplo: ABC123456
Identificador del producto (SKU)

⚠️ MUY IMPORTANTE: El identificador que elijas aquí DEBE SER EXACTAMENTE EL MISMO que utilices en:

Tus integraciones de tiendas físicas con WoowUp
Tus cargas de productos en WoowUp
Cualquier otra fuente de datos que envíes a WoowUp

¿Por qué es tan importante?

WoowUp utiliza el SKU como identificador único para reconocer productos
Si utilizas diferentes códigos en diferentes canales, WoowUp no podrá unificar la información
Esto afectará tus reportes, segmentaciones y recomendaciones de productos

Ejemplo de problema común:

❌ En tienda física utilizas: "REF-001" (código de referencia)
❌ En Shopify envías: "12345" (SKU de Shopify)
❌ Resultado: WoowUp ve 2 productos diferentes cuando en realidad es el mismo

Solución:

✅ Utiliza siempre el mismo código en todos los canales
✅ Define cuál es tu "código maestro" y utilízalo consistentemente

Opciones que ofrece Shopify para identificar tus productos

Debes definir el código utilizarás para identificar tus productos. Aquí algunas opciones:

Opción A

SKU de la variante del producto (Por defecto en Shopify)

Utiliza el SKU estándar que Shopify asigna a cada variante del producto.

Código a utilizar:

sku: "{{ product.selected_or_first_available_variant.sku }}"

Cuándo utilizarlo:

Cuando tus productos tienen SKU configurados en Shopify
Cuando necesitas identificar variantes específicas (tallas, colores, etc.)
Cuando este mismo SKU es el que utilizas en tu ERP, tiendas físicas y otros sistemas integrados con WoowUp
Es la opción más común

Verificación: ✅ Confirma que este SKU coincide con el que envías desde tus otros canales a WoowUp

Opción B

Código de referencia personalizado (Metafield del producto)

Utiliza un código de referencia personalizado que hayas creado como metafield a nivel de producto.

Código a utilizar:

sku: "{{ product.metafields.custom.NOMBRE_DE_TU_METAFIELD }}"

Ejemplo con metafield llamado c_digo_referencia:

sku: "{{ product.metafields.custom.c_digo_referencia }}"

Cuándo utilizarlo:

Cuando tienes un sistema de códigos interno diferente al SKU de Shopify
Cuando el código es a nivel de producto (no de variante)
Cuando este código de referencia es el que usas en tu ERP, tiendas físicas y otros sistemas integrados con WoowUp
Cuando necesitas sincronizar con otro sistema externo

¿Cómo saber el nombre de tu metafield?

Ve a Configuración > Metafields > Productos en Shopify
Busca el metafield que utilizas como código de referencia
El nombre aparecerá como custom.nombre_del_campo

Verificación: ✅ Confirma que este código de referencia es exactamente el mismo que utilizas en WoowUp para identificar productos

Opción C

Código de referencia personalizado (Metafield de la variante)

Similar a la opción B, pero el metafield está a nivel de variante en lugar de producto.

Código a utilizar:

sku: "{{ product.selected_or_first_available_variant.metafields.custom.NOMBRE_DE_TU_METAFIELD }}"

Cuándo utilizarlo:

Cuando cada variante tiene su propio código de referencia personalizado
Cuando necesitas códigos diferentes para cada combinación de opciones
Cuando estos códigos son los que utilizas en tus otros sistemas integrados con WoowUp

Verificación: ✅ Confirma que estos códigos coinciden con los que envías desde otros canales a WoowUp

Opción D

ID del producto de Shopify

Utiliza el ID único que Shopify asigna automáticamente a cada producto.

Código a utilizar:

sku: "{{ product.id }}"

Cuándo utilizarlo:

Como última opción si no tienes SKU ni códigos personalizados
Para pruebas iniciales
Solo si utilizas exclusivamente Shopify y no tienes otros canales integrados

⚠️ Advertencia: No es recomendado si tienes tiendas físicas u otros canales, ya que el ID de Shopify solo existe en Shopify

Resumen de configuración

Antes de continuar, ten a mano:

✅ Tu Clave Pública de WoowUp: _________________

✅ Tu código de identificación de producto (elige uno):

IMPORTANTE: Verifica que el código que elijas sea el mismo que usas en:

Integración de tu tienda física
Carga de productos en WoowUp
Sistema de inventario/ERP
Otros canales de venta

Opciones disponibles

Opción A: SKU de variante
Opción B: Metafield de producto
Opción C: Metafield de variante
Opción D: ID de producto (solo si no tienes otros canales)

Pasos para integrar el script de Webtracking de WoowUp en Shopify

Paso 1: Cargar la librería de WoowUp

Accede al Editor de temas:
• Inicia sesión en tu panel de administración de Shopify
• Navega a Tienda online > Temas
• Ubica tu tema actual y haz clic en Acciones > Editar código
Abre el archivo theme.liquid:
• En el menú lateral izquierdo, busca la carpeta Layout
• Haz clic en el archivo theme.liquid para abrirlo

Inserta el script de la librería:

• Localiza la etiqueta de cierre </head>

• Justo ANTES de esta etiqueta, inserta el siguiente código:

<script>
var script = document.createElement('script');
script.src = "https://assets-cdn.woowup.com/js/webtracking.min.js";
script.type = "text/javascript";
document.head.appendChild(script);
</script>

Guarda los cambios:
• Haz clic en el botón Guardar para aplicar la actualización

Paso 2: Configurar el tracking de productos

En el mismo archivo theme.liquid:

• Localiza la etiqueta de cierre </body> (al final del archivo)

• Justo ANTES de esta etiqueta, inserta el siguiente código:

{% if template contains 'product' %}
<script>
// ============================================
// CONFIGURACIÓN - MODIFICA ESTAS VARIABLES
// ============================================

// 1. CLAVE PÚBLICA DE WOOWUP
// Obtén tu clave en: WoowUp > Configuración > Mi Cuenta
const WOOWUP_PUBLIC_KEY = 'ABC123456';

// 2. IDENTIFICADOR DEL PRODUCTO (SKU)
// ⚠️ IMPORTANTE: Debe ser el MISMO código que usas en:
//    - Tus tiendas físicas integradas con WoowUp
//    - Tu sistema de inventario/ERP
//    - Cualquier otra fuente de datos en WoowUp
//
// Elige UNA de las siguientes opciones y comenta las demás:

// OPCIÓN A: SKU de la variante (por defecto en Shopify)
const PRODUCT_SKU = "{{ product.selected_or_first_available_variant.sku }}";

// OPCIÓN B: Metafield personalizado del producto
// Reemplaza 'c_digo_referencia' con el nombre de tu metafield
// const PRODUCT_SKU = "{{ product.metafields.custom.c_digo_referencia }}";

// OPCIÓN C: Metafield personalizado de la variante
// const PRODUCT_SKU = "{{ product.selected_or_first_available_variant.metafields.custom.TU_METAFIELD }}";

// OPCIÓN D: ID del producto de Shopify (solo si no tienes otros canales)
// const PRODUCT_SKU = "{{ product.id }}";

// ============================================
// FIN DE CONFIGURACIÓN - NO MODIFICAR DEBAJO
// ============================================

document.addEventListener("DOMContentLoaded", function() {
  console.log("🔵 Script WoowUp iniciado");
  
  // Función para verificar si WU está disponible
  function waitForWU(callback, maxAttempts = 20) {
    let attempts = 0;
    
    const checkWU = setInterval(function() {
      attempts++;
      console.log("🔍 Intento " + attempts + " - Verificando WU...");
      
      if (typeof WU !== "undefined") {
        clearInterval(checkWU);
        console.log("✅ WU encontrado!");
        callback();
      } else if (attempts >= maxAttempts) {
        clearInterval(checkWU);
        console.error("❌ WU no se cargó después de " + maxAttempts + " intentos.");
      }
    }, 500);
  }
  
  // Ejecuta el tracking cuando WU esté disponible
  waitForWU(function() {
    // Obtén los precios originales y de oferta
    let original_price = {{ product.compare_at_price | divided_by: 100 }};
    let discounted_price = {{ product.price | divided_by: 100 }};
    
    console.log("💰 Precio original:", original_price);
    console.log("💰 Precio con descuento:", discounted_price);
    console.log("📦 SKU del producto:", PRODUCT_SKU);
    console.log("⚠️ VERIFICA: Este SKU debe coincidir con el que usas en otros canales");
    
    // Configura el metadata
    let metadata = {
      sku: PRODUCT_SKU,
      price: original_price ? original_price : discounted_price,
      offer_price: original_price ? discounted_price : null
    };

    console.log("📋 Metadata a enviar:", metadata);

    let callback = function () {
      console.log("✅ Callback ejecutado - Track enviado!");
    };

    console.log("🚀 Ejecutando WU.track...");
    WU.track(WOOWUP_PUBLIC_KEY, 'product-view', metadata, callback);
    console.log("📡 WU.track ejecutado");
  });
});
</script>
{% endif %}

Modifica las variables de configuración: a) Reemplaza tu Clave Pública:
```
   const WOOWUP_PUBLIC_KEY = 'ABC123456'; // Pon aquí tu clave pública de WoowUp
```
Elige tu opción de SKU
⚠️ ANTES DE ELEGIR: Verifica cuál es el código que estás utilizando en tus otros canales integrados con WoowUp (tiendas físicas, ERP, etc.)
• Si utilizas SKU de variante en todos tus canales, deja activa la OPCIÓN A y comenta las demás
• Si utilizas un código de referencia personalizado en todos tus canales, activa la OPCIÓN B o C según corresponda y comenta las demás

Ejemplo usando metafield personalizado (mismo que tienda física):
```
   // OPCIÓN A: SKU de la variante (por defecto en Shopify)    // const PRODUCT_SKU = "{{ product.selected_or_first_available_variant.sku }}";        // OPCIÓN B: Metafield personalizado del producto    // Este es el mismo código que usamos en tienda física    const PRODUCT_SKU = "{{ product.metafields.custom.codigo_referencia }}";
```
Guarda los cambios:
• Haz clic en Guardar para aplicar la actualización

Verificación de la integración

Paso 1: Verifica que el script funciona

Abre una página de producto en tu tienda
Abre la consola del navegador:
• Presiona F12 (Windows/Linux) o Cmd + Option + I (Mac)
• Ve a la pestaña Console (Consola)
Busca los mensajes de confirmación: Deberías ver mensajes como:
🔵 Script WoowUp iniciado
🔍 Intento 1 - Verificando WU...
✅ WU encontrado!
💰 Precio original: 100
💰 Precio con descuento: 80
📦 SKU del producto: ABC123
⚠️ VERIFICA: Este SKU debe coincidir con el que usas en otros canales
📋 Metadata a enviar: {sku: "ABC123", price: 100, offer_price: 80}
🚀 Ejecutando WU.track...
📡 WU.track ejecutado
✅ Callback ejecutado - Track enviado!
Verifica el envío de datos:
• Ve a la pestaña Network (Red) en las herramientas de desarrollo
• Filtra por Woowup o busca peticiones HTTP
• Deberías ver una petición exitosa a WoowUp

Paso 2: Verifica la consistencia del SKU

⚠️ Este paso es fundamental para que WoowUp unifique correctamente tus productos

Anota el SKU que aparece en la consola del navegador cuando visitas un producto en Shopify Ejemplo: 📦 SKU del producto: REF-001
Verifica el mismo producto en tus otros canales:
• Ve a tu sistema de tienda física / ERP
• Busca el mismo producto
• Verifica que el código sea exactamente el mismo
Compara en WoowUp:
• Ingresa a WoowUp
• Ve a Productos
• Busca el producto por su SKU
• Verifica que WoowUp lo reconoce correctamente

Ejemplo de verificación correcta

✅ Shopify (consola): 📦 SKU del producto: REF-001
✅ Tienda física: Producto con código REF-001
✅ WoowUp: Producto encontrado con SKU REF-001
✅ Resultado: WoowUp unificará correctamente las vistas del producto de ambos canales

Ejemplo de problema

❌ Shopify (consola): 📦 SKU del producto: 12345
❌ Tienda física: Producto con código REF-001
❌ WoowUp: Tiene dos productos diferentes (12345 y REF-001)
❌ Resultado: Los reportes y segmentaciones estarán fragmentados

Si detectas inconsistencias:

Define cuál será tu "código maestro" (el que utilizarásen todos los canales)
Actualiza Shopify para usar ese código (mediante la opción correcta de SKU)
Verifica que todos los canales utilicen el mismo código
Prueba nuevamente

Paso 3: Valida el Webtracking en WoowUp

Para verificar que WoowUp está recibiendo correctamente los datos de navegación, sigue la Guía de configuración para el seguimiento de navegación web (Webtracking) disponible en:

¿Cómo comprobar que el Script está funcionando?

Esta guía te ayudará a:

Verificar que WoowUp está recibiendo los eventos de navegación
Confirmar que los productos se están registrando correctamente
Validar que los datos de precio se envían adecuadamente
Revisar la información en los reportes de WoowUp

Solución de problemas

❌ No veo los mensajes en consola

Posible causa: El script no se está ejecutando

Solución: Verifica que pegaste el código justo antes de </body> en theme.liquid

❌ WU no está definido

Posible causa: La librería no se cargó correctamente

Solución: Verifica que el primer script (en </head>) esté correctamente instalado

❌ El SKU aparece vacío en consola

Posible causa: El código de SKU seleccionado no existe en tus productos

Solución:

Verifica que tus productos tengan SKU configurado (si usas OPCIÓN A)
Verifica el nombre correcto de tu metafield (si usas OPCIÓN B o C)
Prueba con OPCIÓN D temporalmente para confirmar que todo lo demás funciona

❌ Los precios aparecen como "null"

Posible causa: El producto no tiene precio configurado

Solución: Verifica que el producto tenga un precio asignado en Shopify

❌ WoowUp muestra productos duplicados

Posible causa: Estás utilizando diferentes códigos en diferentes canales

Solución:

Sigue la sección "Verificación de consistencia del SKU"
Define un código maestro único
Actualiza todos los canales para usar el mismo código
Contacta a soporte de WoowUp para unificar productos duplicados existentes

❌ Los reportes de WoowUp no coinciden

Posible causa: Inconsistencia en los SKUs entre canales

Solución:

Verifica que estés utilizando la misma opción de SKU que en tus otros sistemas
Revisa manualmente algunos productos en WoowUp para confirmar que los SKU coinciden
Si has cambiado recientemente el sistema de códigos, ten en cuenta que los datos históricos pueden tener códigos diferentes

❌ No veo los eventos en WoowUp

Posible causa: El tracking se está enviando pero hay un problema de configuración Solución:

Consulta la guía oficial de validación
Verifica que tu clave pública sea correcta
Contacta a soporte de WoowUp si el problema persiste ([email protected])

Notas importantes

Importancia de la consistencia en SKUs

Por qué es crítico:

WoowUp utiliza el SKU como llave única para identificar productos
Si un producto tiene diferentes SKUs en diferentes canales, WoowUp lo tratará como productos distintos
Esto afecta directamente a:
- Reportes de productos más vistos
- Segmentaciones por productos comprados/vistos
- Recomendaciones automáticas de productos
- Análisis de comportamiento del cliente

Mejores prácticas

Define un "código maestro" único para cada producto antes de integrar
Usa ese mismo código en TODOS tus sistemas (Shopify, tienda física, ERP, etc.)
Documenta cuál es tu sistema de códigos para futuras referencias
Capacita a tu equipo para que use siempre el mismo código al dar de alta productos

Cambios respecto a versiones anteriores

Configuración simplificada:
• Todas las variables configurables están al inicio del script
• No es necesario buscar en todo el código para hacer cambios
Múltiples opciones de SKU:
• Se pueden utilizar diferentes fuentes para el identificador del producto
• Fácil cambio entre opciones comentando/descomentando líneas
Implementación unificada:
• Ambos scripts se insertan en el mismo archivo theme.liquid
• Más fácil de mantener y actualizar
Logs de depuración mejorados:
• El script incluye mensajes detallados en consola
• Facilita la identificación de problemas
• Incluye recordatorios sobre la importancia de la consistencia del SKU
Énfasis en la unificación de datos:
• Documentación clara sobre la importancia de usar el mismo SKU en todos los canales
• Pasos de verificación para asegurar la consistencia
• Referencia a documentación oficial para validación completa

Integrar Webtracking Shopify

¿Cómo integrar el script desde tu tienda Shopify?

Configuración previa: Identifica tus datos

¿Dónde encontrar la clave pública?

¿Por qué es tan importante?

Ejemplo de problema común:

Solución:

Opciones que ofrece Shopify para identificar tus productos

Opción A

Opción B

¿Cómo saber el nombre de tu metafield?

Opción C

Opción D

Resumen de configuración

Opciones disponibles

Pasos para integrar el script de Webtracking de WoowUp en Shopify

Paso 1: Cargar la librería de WoowUp

Paso 2: Configurar el tracking de productos

Elige tu opción de SKU

Verificación de la integración

Paso 1: Verifica que el script funciona

Paso 2: Verifica la consistencia del SKU

Ejemplo de verificación correcta

Ejemplo de problema

Paso 3: Valida el Webtracking en WoowUp

Solución de problemas

Notas importantes

Importancia de la consistencia en SKUs

Mejores prácticas

Cambios respecto a versiones anteriores