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

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

Aunque el raspado de DOM no es recomendable (porque es bastante frágil) en el seguimiento de la web, a veces simplemente no tienes otra opción. Pedirle a un desarrollador que empuje un cierto punto de datos a la Capa de Datos es siempre la mejor práctica, pero en algunos proyectos, sólo tienes dos opciones:

tratar de obtener un cierto valor de la página por ti mismo
o no hacer nada y continuar sin ese punto de datos en particular

En esta entrada del blog, quería mostrarte varios pequeños guiones que te ayudarán a conseguir un precio si es un elemento visible en una página.

Esto no está diseñado para obtener todos los precios de una página y construir objetos complejos, etc. Demos un paso atrás. Esta entrada del blog es para aquellas situaciones en las que quieres trabajar sólo con un precio.

¿Dónde puede ser útil?

¿Quizás quieras rastrear una impresión de un producto y quieras enviar el precio de ese producto a alguna herramienta? Si es así, esta guía es para ti.
¿Quizás quieras rastrear las compras y quieras enviar el total del pedido a algún píxel de rastreo? Si es así, entonces esta guía también te será útil.

En esta entrada del blog, me centraré SOLAMENTE en cómo extraer un precio de una página, no en cómo enviarlo a otras herramientas de análisis/marketing.

Variable JavaScript personalizada

En esta guía, usaré una variable JS personalizada. Sí, sé que Plantilla Personalizada sería una mejor solución pero parece que por el momento, las Plantillas Personalizadas no permiten acceder a los elementos de una página. Si me equivoco, por favor corrígeme. Estaré encantado de crear una Plantilla de Variable Personalizada para esto.

Hay varias maneras de cómo los sitios web muestran los precios, por ejemplo:

12.00 USD
$12.00
Precio: $12.000.00, etc.

Además, su definición de «precio de extracción» podría ser diferente a la mía. Algunas personas sólo quieren deshacerse del signo de dólar, otras quieren convertir las cuerdas en números, etc. Por eso publicaré varias opciones del código JavaScript personalizado y tendrás que elegir la que mejor se adapte a tus necesidades.

Nota: obviamente, estos códigos no cubrirán TODAS las posibles variaciones de formato de los precios. Estaba tratando de resolver las situaciones más comunes. Así que, si tienes algún caso de ventaja, házmelo saber en los comentarios y veré lo que puedo hacer.

Requisito

Para implementar correctamente esta solución, debes estar familiarizado con los selectores CSS. Normalmente, lo básico es suficiente. En esta guía, presumo que ya tienes ese conocimiento.

Opción #1: Si sólo quieres deshacerte de los signos de texto y moneda

Esta opción funcionará si el precio en su sitio web coincide con uno de los siguientes ejemplos (funciona con cualquier código o signo de moneda):

algún texto 12.00 (p.ej. Precio: 12.00). La variable Custom JavaScript devolverá una cadena ‘12.00‘.
algún texto12.00 algún texto . La variable Custom JS devolverá una cadena ‘12.00‘.
$12.00 (se aplica también a otros signos monetarios). La variable Custom JS devolverá una cadena ‘12.00‘.
12.00USD (o algún otro código de moneda). La variable personalizada JS devolverá una cadena ’12.00‘.
12,000.00 USD o $12,000.00. La variable Custom JS devolverá una cadena ‘12,000.00‘.

Estos eran los escenarios que estaba probando. Y aquí está el código en sí:

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

Importante: necesitas cambiar la parte EDIT_YOUR_SELECTOR e introducir el selector real del elemento que contiene el precio. Por ejemplo:

si el elemento de precio tiene la clase seleccionado-ticket-precio, el selector CSS será .Selectedd-ticket-price
si el elemento de precio tiene el ID de orden-total, el selector CSS será #orden-total , etc.

Aquí hay una guía que puede ayudarte con los selectores CSS. ¿Demasiado confuso? Considera la posibilidad de inscribirte en mi curso de GTM Intermedio/Avanzado y te enseñaré qué diablos es esto.

Opción #2: Si quieres deshacerte del texto, los signos de moneda y las comas

Esta opción funcionará si el precio en su sitio web se ve así (miles están separados por comas):

12,000.00 USD. La variable Custom JS devolverá una cadena ‘12,000.00‘.
$12,000.00. La variable Custom JS devolverá una cadena ‘12,000.00‘.

Si hay algún texto antes o después del precio, será automáticamente eliminado.

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

Si comparamos este script con la opción #1, este utiliza un método de reemplazo que eliminará todas las comas en el precio extraído.

Una vez más, es necesario reemplazar el ENTER_YOUR_SELECTOR con un selector real del elemento del sitio web que contiene un precio.

Opción 3: Si también desea que la variable devuelva el número (en lugar de una cadena)

Algunas herramientas pueden requerir que pases el precio no como una cadena (‘12.99’) sino como un número (12.99 – sin comillas). Si ese es tu caso, necesitas usar el método parseFloat en la declaración de retorno, por ejemplo:

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

Si ya tienes un precio como variable

¿Qué pasa si ya tienes un precio sin procesar como una variable en Google Tag Manager? Por ejemplo, ¿una variable de capa de datos que devuelve 12 dólares?

En ese caso, puedes sustituir document.querySelector(‘ENTER_YOUR_SELECTOR’) e insertar tu variable rodeada por llaves dobles. Además, deshazte de la propiedad «innerText». El resultado final:

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

Consejos adicionales sobre cuándo usar esta variable

Tenga en cuenta que cualquiera de estas variables devolverá el valor adecuado SÓLO si el elemento de precio existe en una página.

Si el elemento se muestra cuando se carga la página, puedes empezar a usarlo en DOM Ready y en los eventos subsiguientes. NO lo utilice en el Contenedor cargado (también conocido como Pageview).
Si el elemento de precio aparece dinámicamente después de una interacción particular del visitante, comience a utilizar esta variable en sus etiquetas en el evento Element Visibility (cuando aparece el precio) y en los eventos subsiguientes.

En resumen: no intente activar sus etiquetas (que utilizan estas variables JS personalizadas) cuando el elemento de precio no se muestre en una página todavía.

Extraer un precio de una página con GTM: Palabras finales

Y eso es todo. En esta guía rápida, compartí varios fragmentos de JavaScript personalizado que deberían ayudarte a extraer un precio de una página con la ayuda de Google Tag Manager. Si es posible pedirle a un desarrollador que empuje el precio a la Capa de Datos, siempre ve con esa opción. Considera esta entrada del blog como un plan B.

¿Por qué es más frágil? Porque el raspado de DOM es más propenso a los errores. Si los desarrolladores cambian el código del front-end del sitio web, tales soluciones de rastreo pueden romperse fácilmente.