Extraer un precio de una página con Google Tag Manager

Extraer datos, especialmente precios, de una página web puede parecer una tarea desalentadora, pero con las herramientas adecuadas, es un proceso manejable. Google Tag Manager (GTM) ofrece varias funciones que permiten realizar este tipo de extracciones de manera más eficiente. En este artículo, exploraremos cómo obtener precios específicos de una página web utilizando GTM y algunos scripts de JavaScript personalizados.

La extracción de datos a través de técnicas como el DOM scraping no es la opción más recomendada debido a su fragilidad inherente. Sin embargo, en algunas situaciones, no hay más remedio que hacerlo. Este artículo está diseñado para aquellos casos en los que deseas obtener un precio visible en una página, lo que puede ser útil para el seguimiento de productos o para análisis de compras.

¿Por qué utilizar Google Tag Manager para extraer precios?

Google Tag Manager es una herramienta poderosa que simplifica el proceso de gestión de etiquetas y seguimiento de datos en sitios web. Al incorporar GTM en tu estrategia de análisis, puedes:

• Realizar un seguimiento de interacciones de usuario de manera más eficiente.
• Implementar etiquetas sin necesidad de modificar el código del sitio web directamente.
• Aprovechar la flexibilidad de las variables personalizadas para extraer datos específicos como precios.

Utilizar GTM para extraer precios no solo te permite obtener datos valiosos, sino que también mejora la calidad de los informes de análisis y facilita la toma de decisiones informadas.

Cómo funciona la extracción de precios en GTM

El proceso de extracción de precios implica el uso de variables de JavaScript personalizadas. A través de estas variables, puedes acceder a los elementos del DOM y extraer información específica. Sin embargo, es fundamental que tengas conocimientos básicos sobre CSS selectors para implementar estas soluciones adecuadamente.

Existen diferentes formatos en los que los precios pueden aparecer en una página. Por ejemplo:

• 12.00 USD
• $12.00
• Precio: $12,000.00

Dependiendo de la estructura de tu página, necesitarás adaptar el código para capturar el precio correctamente.

Variable personalizada en JavaScript

Para empezar, utilizaremos una variable personalizada en JavaScript. Aunque una plantilla personalizada puede parecer una solución más adecuada, actualmente estas plantillas no permiten acceder a los elementos del DOM de forma directa. Por lo tanto, recurriremos a la creación de una variable de JavaScript personalizada para realizar la extracción.

El siguiente código es un ejemplo de cómo puedes definir una variable personalizada para extraer un precio:

function() {
  var priceText = document.querySelector('INGRESE_SU_SELECTOR_AQUI');
  if (priceText) {
    var regex = /([0-9.,]+)/;
    if (regex.test(priceText.innerText)) {
      return priceText.innerText.match(regex)[0];
    }
  }
}

Recuerda reemplazar ‘INGRESE_SU_SELECTOR_AQUI’ con el selector CSS que apunta al elemento que contiene el precio.

Cómo seleccionar el elemento adecuado

La elección del selector correcto es crucial para el éxito de la extracción. Aquí hay algunos ejemplos de selectores que podrías usar:

• Si el precio tiene una clase específica, como precio-producto, el selector será .precio-producto.
• Si el precio tiene un ID, como precio-total, el selector será #precio-total.

Una comprensión básica de los selectores CSS te permitirá personalizar tus scripts de manera efectiva. Si necesitas más información sobre CSS selectors, hay muchos recursos en línea que pueden ser de ayuda.

Opciones para extraer precios

A continuación, presentaremos diferentes opciones para adaptar tu código de extracción dependiendo de cómo se presente el precio en la página.

Opción 1: Eliminar texto y signos de moneda

Para aquellos precios que tienen texto adicional o signos de moneda, puedes usar el siguiente código:

function() {
  var priceText = document.querySelector('INGRESE_SU_SELECTOR_AQUI');
  var regex = /([0-9.,]+)/;
  if (regex.test(priceText.innerText)) {
    return priceText.innerText.match(regex)[0];
  }
}

Este código es útil cuando el precio está rodeado de otros textos, ya que solo extraerá el valor numérico.

Opción 2: Eliminar texto, signos de moneda y comas

Si el precio utiliza comas para separar miles y deseas eliminarlas, puedes utilizar:

function() {
  var priceText = document.querySelector('INGRESE_SU_SELECTOR_AQUI');
  var regex = /([0-9.,]+)/;
  if (regex.test(priceText.innerText)) {
    return priceText.innerText.match(regex)[0].replace(/,/g, '');
  }
}

Este enfoque es ideal para precios que están en formato de miles.

Opción 3: Retornar un número en lugar de una cadena

Si necesitas que el precio se retorne como un número en lugar de una cadena de texto, puedes usar:

function() {
  var priceText = document.querySelector('INGRESE_SU_SELECTOR_AQUI');
  var regex = /([0-9.,]+)/;
  if (regex.test(priceText.innerText)) {
    return parseFloat(priceText.innerText.match(regex)[0].replace(/,/g, ''));
  }
}

Esto es especialmente útil si el sistema que utilizará el precio requiere un valor numérico.

Uso de una variable existente

Si ya tienes un precio definido como variable en Google Tag Manager, puedes modificar el código de la siguiente manera:

function() {
  var priceText = {{NOMBRE_DE_TU_VARIABLE}};
  var regex = /([0-9.,]+)/;
  if (regex.test(priceText)) {
    return priceText.match(regex)[0].replace(/,/g, '');
  }
}

Este método es útil para aprovechar el trabajo que ya has realizado en GTM y evitar duplicaciones.

Consejos adicionales sobre el uso de variables

Es importante recordar que las variables solo funcionarán si el elemento que contiene el precio está presente en la página en el momento adecuado. Aquí hay algunas consideraciones:

• Si el elemento está disponible al cargar la página, puedes activarlo en el evento DOM Ready.
• Si el precio aparece de forma dinámica después de una interacción del usuario, deberías utilizar el evento Element Visibility para activarlo.

Siempre asegúrate de que los elementos que deseas rastrear estén renderizados antes de activar tus etiquetas.

Implementación y mejores prácticas

Si bien la extracción de precios mediante Google Tag Manager puede parecer complicada, con las guías y scripts adecuados, es un proceso bastante directo. Sin embargo, se recomienda siempre colaborar con desarrolladores para que los precios sean enviados directamente al Data Layer, de esta manera se minimizan los errores y se asegura una mayor estabilidad en el seguimiento.

El DOM scraping, aunque útil, puede ser sensible a cambios en la estructura del código del front-end, lo que puede romper la funcionalidad. Por esta razón, siempre que sea posible, busca soluciones más robustas y menos propensas a fallos.