¿Cómo configurar el Webtracking en Tienda Nube?

En WoowUp hemos desarrollado un script de Webtracking que permite rastrear los productos visitados por tus clientes dentro de tu ecommerce. Implementarlo es un proceso sencillo que no requiere conocimientos técnicos avanzados, sin necesidad de realizar ningún desarrollo adicional.

Hemos implementado dos scripts distintos, uno para utilizar con Google Tag Manager y otro para insertarlo directamente en Tienda Nube. Debes elegir el método que consideres más adecuado para tu marca.

Utilizando Google Tag Manager

Puedes seguir este video con el paso a paso para configurar el script de Webtracking utilizando Google Tag Manager:

El script que debes pegar es el siguiente:

❗Debes reemplazar en la última línea de este script la 'ClavePublica' de tu entorno en WoowUp. Puedes obtener esta clave dentro de WoowUp en Configuración > Mi Cuenta. Este dato debe insertarse con las comillas simples.

<script>
(function () {
  "use strict";

  // Public key del canal de WoowUp (reemplazar por la del cliente)
  var PUBLIC_KEY = 'TU_PUBLIC_KEY';

  function initWoowup() {
    var el = document.getElementById('single-product');

    // Solo trackea si estan listas todas las dependencias:
    // - LS.product  -> variable global de Tienda Nube (indica ficha de producto)
    // - el nodo single-product con su data-variants
    // - WU.track    -> libreria de webtracking ya cargada
    if (typeof LS === 'undefined' || !LS.product ||
        !el || !el.dataset.variants ||
        typeof WU === 'undefined' || !WU.track) {
      return false;
    }

    var variant = JSON.parse(el.dataset.variants)[0];
    var skuVal = variant.sku;
    var comparePriceVal = variant.compare_at_price_number;

    // Cuando hay precio de oferta, compare_at_price_number es el precio de
    // lista (tachado) y price_number el precio con descuento.
    var metadata = (comparePriceVal != null)
      ? { sku: skuVal, price: comparePriceVal, offer_price: variant.price_number }
      : { sku: skuVal, price: variant.price_number, offer_price: null };

    WU.track(PUBLIC_KEY, 'product-view', metadata);
    return true;
  }

  // Carga la libreria de webtracking una sola vez
  if (typeof WU === 'undefined') {
    var s = document.createElement('script');
    s.src = 'https://assets-cdn.woowup.com/js/webtracking.min.js';
    document.getElementsByTagName('body')[0].appendChild(s);
  }

  // Reintenta cada 500ms hasta que esten WU + LS + el nodo (max ~20s).
  // Este patron evita depender de DOMContentLoaded, que en GTM suele haber
  // ocurrido antes de que dispare el tag.
  var tries = 0;
  var timer = setInterval(function () {
    if (initWoowup() || ++tries >= 40) clearInterval(timer);
  }, 500);
})();
</script>

Insertando el script directamente en Tienda Nube

Paso 1: Acceder a la Configuración de Tienda Nube

Iniciar sesión en su cuenta de Tienda Nube.
En el panel principal, dirigirse a la sección de Configuración.

Paso 2: Navegar a Configuraciones Avanzadas

En el menú lateral, buscar y hacer click en Códigos Externos.

Paso 3: Insertar el Script de Tracking

Ir a la sección de Códigos de conversión y tracking.
En Códigos de tracking, seleccionar la pestaña Para la Tienda.
Pegar el siguiente script de WoowUp en la caja de texto que aparece.

❗Nota: Si ya tienen otros scripts insertados, asegurarse de situar el script de WoowUp al final de todos los scripts existentes.

<!-- WoowUp Webtracking -->
<script src="https://assets-cdn.woowup.com/js/webtracking.min.js" type="text/javascript"></script><script>

$( document ).ready(function(){
  if (LS.product){
    loadScript();
    setTimeout(sendSku, 1500);
  }
});
function loadScript(_callback){
   var script = document.createElement('script');
   script.src = 'https://assets-cdn.woowup.com/js/webtracking.min.js';
   var body = document.getElementsByTagName("body")[0];
   body.appendChild(script);
}
  function sendSku(){
        let skuVal = JSON.parse(document.getElementById('single-product').dataset.variants)[0].sku;
        let priceVal = JSON.parse(document.getElementById('single-product').dataset.variants)[0].price_number;
        let comparePriceVal = JSON.parse(document.getElementById('single-product').dataset.variants)[0].compare_at_price_number;

        let offerPrice=null;
        let offerPriceVal=null;
        let hasOfferPrice = (comparePriceVal!=null);

        let metadata = null;

        if (hasOfferPrice) 
        metadata =
        {
            sku: skuVal, // required
            price: priceVal,
            offer_price: offerPriceVal 
            /* if you need to send more metadata add it here */
        }
        else
        metadata=
       {
            sku: skuVal, // required
            price: priceVal,
            offer_price: null
            /* if you need to send more metadata add it here */
        }

        let callback = function () {
            /* Optional: if you need to call a function after tracking put it here */
        };
        WU.track('ClavePublica', 'product-view', metadata, callback);
  }
</script>

Paso 4: Guardar los Cambios

Después de pegar el script, asegurarse de guardar los cambios realizados.

Listo! Completados estos pasos ya quedará activo el Webtracking en tu cuenta de Woowup. Verás información de productos visitados por tus clientes una vez que comiences a enviar campañas.