Ir al contenido principal
Integrar Webtracking Shopify
Actualizado hace más de un mes

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.

  1. 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.

  1. 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).

  2. 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>

  3. 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.

  4. Guarda los cambios:

  • Haz clic en Guardar para aplicar la actualización.

¿Ha quedado contestada tu pregunta?