Integrar Webtracking Shopify | WoowUp Help Center

Introducción:

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. A continuación, te mostramos cómo integrarlo fácilmente en todas las páginas de tu tienda Shopify.

Paso a paso para integrar el script de Webtracking de WoowUp en Shopify

Insertaremos el primer script, el cual carga la librería necesaria y propaga la identificación del cliente.

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.

2. Abre el archivo theme.liquid:

En el menú lateral izquierdo, busca la carpeta Layout.
Haz clic en el archivo theme.liquid para abrirlo.

3. Inserta el script:

Localiza la etiqueta de cierre </head> (el segundo valor, justo antes del inicio del <body>).

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>

4. Guarda los cambios:

Haz clic en el botón Guardar para aplicar la actualización.

Ahora insertaremos el segundo script, el cual obtendrá datos del producto visitado y los enviará a WoowUp.

Dentro de la edición del código, abre la plantilla de producto:
- En el menú lateral izquierdo, busca la carpeta Sections.
- Encuentra y abre el archivo main-product.liquid o, si tu tema usa secciones dinámicas, abre product.json y localiza el archivo de sección asociado a los productos (generalmente llamado product-template.liquid).

Inserta el script:

Busca el lugar donde quieres que se ejecute el script (puede ser al final del archivo, pero dentro de la estructura HTML de la página del producto).

Inserta el siguiente código:

<script>
// Script de WoowUp
document.addEventListener("DOMContentLoaded", function() {
if (typeof WU !== "undefined") {
// 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 }};
// Configura el metadata para que el precio original esté en `price`
      // y el precio con descuento en `offer_price` (si aplica)
      let metadata = {
          sku: "{{ product.selected_or_first_available_variant.sku }}", // SKU del producto
          price: original_price ? original_price.toLocaleString('es-CO') : discounted_price.toLocaleString('es-CO'), // Precio original con formato
          offer_price: original_price ? discounted_price.toLocaleString('es-CO') : null // Precio con descuento con formato, si existe
      };

      let callback = function () {
          // Aquí puedes incluir cualquier función adicional que desees ejecutar después
      };

      WU.track('PublicKey', 'product-view', metadata, callback);
  } else {
      console.error("WU no está definido. Asegúrate de que webtracking.min.js esté cargado correctamente.");
  }
  });
</script>

Modifica el script con los datos de tu cuenta:
Modifica la 'PublicKey' con la correspondiente en tu entorno de WoowUp.
Esta clave puedes obtenerla dentro de WoowUp en Configuración > Mi Cuenta.
Guarda los cambios:

Haz clic en Guardar para aplicar la actualización.