Configuración Navegación Web

Cómo conectar nuestro script de seguimiento web a su sitio de comercio electrónico para hacer un seguimiento de los productos que visitan sus clientes.

Configuración Web Tracking / Navegación Web

Habilitar el seguimiento de seguimiento de la navegación web en el Ecommerce requiere de la inserción 2 Scripts; una librería que se encarga de todo el proceso y un script encargado de tomar el SKU y realizar el envío de la información a tu cuenta en WoowUp.

Agregar el Script #1 (Librería) en TODAS las páginas de su sitio.

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

ADVERTENCIA: Es necesario agregar el script #1 debajo del cierre del </body> en TODAS las páginas para no perder el tracking a medida que los usuarios vayan cambiando de página.

Agregar el Script #2 (Capturador del SKU) en TODAS las páginas de PRODUCTO.

Existen 3 variantes de este Script, una específica para tiendas VTEX Legacy, VTEX IO, Tienda Nube y otra para el resto de las plataformas custom.

<script type="text/javascript">
    let metadata = {
        sku: "XXXXXXX", // required
        price: 543.21, // required
        offer_price: 123.45 //optional, can be 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('{Your-PublicKey}', 'product-view', metadata, callback);
</script>

<script type="text/javascript">
    let metadata = {
        /* Optional: if you need to send metadata put it here */
    };

    let callback = function () {
        /* Optional: if you need to call a function after tracking put it here */
    }

    WU.trackProductVTEX('{Your-PublicKey}', metadata, callback);
    
</script>

Debe llamar a la función WU.trackProductVTEX solo una vez por página de producto cargada.

<script type="text/javascript">
    let metadata = {
        sku: "XXXXXXX", // required
        price: xxxx, // required
        offer_price: xxxx //optional, can be 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('{Your-PublicKey}', 'product-view', metadata, callback);
</script>

<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 metadata = {
            sku: skuVal, // required
            price: 543.21, // required
            offer_price: 123.45 //optional, can be 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('{Your-PublicKey}', 'product-view', metadata, callback);
  }
</script>

El script de VTEXIO se puede insertar vía Google Tag Manager

En ambas variantes DEBES reemplazar "{Your-PublicKey}" por la clave pública de WoowUp. La puedes encontrar en la página de configuración de WoowUp, en la sección "Mi cuenta".

EJEMPLO: Si tu clave pública es "12345" debe quedar asi :

WU.track('12345', 'product-view', metadata, callback);

DEBES reemplazar en el valor sku: "XXXXXX" por la variable que almacena el SKU del producto (asegurate que es el mismo valor que está asociado a tu producto en Woowup).

DEBES reemplazar en el valor price: xx.xx por el precio de lista del producto reemplazar el valor de offer_price: xx.xx por el precio de oferta.

NOTA si no tuviese precio oferta, simplemente no envíes este campo o puedes enviarlo con valor null.

El Script #2 SIEMPRE debe cargar luego de la librería para funcionar.

Pasos a seguir en VTEX LEGACY

Ingresar al CMS

Ir al Template de Producto listado en la barra de la izquierda

Agregar el Script #2 al final de todo el código.

Pasos a seguir Tienda Nube

Ingresa a tu Tienda > Configuraciones > Códigos Externos
Busca la sección CÓDIGOS DE TRACKING
Copia y pega el Script#2 de Tienda Nube indicado al principio del instructivo.

No te olvides de reemplazar "{Your-PublicKey}" por la clave pública de WoowUp. La puedes encontrar en la página de configuración de WoowUp, en la sección "Mi cuenta".

Guarda los cambios

Pasos a seguir para Campaña Automatizada de Baja de Precios

Esto no es necesario en integraciones de tipo VTEX.

Hay que agregar dos campos a la hora de realizar la sincronización en el objeto metadata :

price y offer_price

Ambos campos deben tener valores de tipo float, offer_price puede ser nulo.

Resultará en algo de este estilo:

<script type="text/javascript">
    let metadata = {
        sku: "XXXXXXX", // required
        price: 43.21, // must be float 
        offer_price: 12.34, //must be float or 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('{Your-PublicKey}', 'product-view', metadata, callback);
</script>

<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 metadata = {
            sku: skuVal, // required
            price: priceVal, // must be float
            offer_price: offerPriceVal // must be float or 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('{Your-PublicKey}', 'product-view', metadata, callback);
  }
</script>

PreviousSegment Export NextConfiguración Notificaciones Web Push en Magento / Web Custom

Last updated 3 years ago

Was this helpful?

hashtagConfiguración Web Tracking / Navegación Web

hashtagAgregar el Script #1 (Librería) en TODAS las páginas de su sitio.

hashtagAgregar el Script #2 (Capturador del SKU) en TODAS las páginas de PRODUCTO.

hashtagPasos a seguir en VTEX LEGACY

hashtagPasos a seguir Tienda Nube

hashtagPasos a seguir para Campaña Automatizada de Baja de Precios

Configuración Web Tracking / Navegación Web

Agregar el Script #1 (Librería) en TODAS las páginas de su sitio.

Agregar el Script #2 (Capturador del SKU) en TODAS las páginas de PRODUCTO.

Pasos a seguir en VTEX LEGACY

Pasos a seguir Tienda Nube

Pasos a seguir para Campaña Automatizada de Baja de Precios