Todos los que nos encargamos de gestionar campañas de pago en algún nos hemos visto en la necesidad de poder extraer un valor (generalmente un precio) desde nuestra web para poder enviarlo a través de Google Tag Manager a Facebook Ads, Google Ads u otra herramientas de publicidad digital o analytics.
Para lograr esto comúnmente existen dos caminos (también hay otros métodos, pero nos centraremos solo en dos para no alargar este artículo). Crear una capa de datos o crear una variable Javascript Personalizada. Quizá nos resulten abrumadores estos conceptos así que definámolos antes de avanzar:
Variable: Es un elemento de Google Tag Manager que nos permite guardar elementos estáticos (el UA de Google Analytics) o cambiantes (un precio) para realizar diferentes operaciones.
Capa de datos (datalayer): Es una serie de datos ordenados que se visualizan a nivel de código en la web. Estos datos generalmente suelen ser muy relevantes a nivel analítica como una URL, un precio, un SKU, un nombre de producto, etc.
Javascript personalizado: Es un tipo de variable que nos permite inyectar código Javascript a un site. Javascript es el lenguaje de la web y nos permite interactuar con componentes de una página web.
Continuemos 🙂 A decir verdad, la opción recomendada es la de extraer los datos desde una capa de datos. El contra es que probablemente el área de TI se tarde un tiempo importante en poder realizar esta implementación. Y en muchos casos el tiempo en marketing digital apremia. Por tanto, sería bueno plantearnos un plan B, una ruta de implementación que nos permita extraer el precio de una web de una forma más sencilla e independiente. Eso es lo que veremos. Nos apoyaremos en una variable Javascript Personalizada.
A continuación el paso a paso:
- Debemos instalar la extensión GTM Variable Builder https://bit.ly/3JlIly1 en nuestro navegador. Esta nos ayudará a generar el código necesario para poder extraer el valor de una web de forma dinámica.
- Ahora debemos ir a la página donde se encuentra el valor que queremos recoger. Una vez ahí damos clic derecho en Inspeccionar elemento y vamos al modo consola.
- Seleccionamos el valor que queremos recoger y damos clic en la extensión GTM Variable Builder. Eso debe generarnos un código tal como el que vemos a continuación.
- En Google Tag Manager debemos ir a variables, luego a variables definidas por el usuario, damos clic en la que se llama Javascript Personalizado y ahí debemos pegar el código generado por la extensión. Debe quedar así.
- Vamos a vista previa para poder verificar si el valor se está recogiendo en la variable precio que hemos creado. Recordemos que una variable nos permite guardar un valor estático o cambiante. Verificamos que efectivamente todo es ok y que la variable precio está recogiendo como valor 180.
- Lo más seguro es que necesitemos este valor como un número y no como un string (un texto). Por tanto debemos agregar en el return del código un parseFloat y debe quedar así:
function(){ var capturedText = document.querySelector(«bdi»).innerText.match(/^.{1}(.*).{0}/i)[1].trim(); return parseFloat(capturedText); }
Al verificar desde vista previa vemos que la variable precio ya no es de tipo string, sino number.
- Ahora podemos utilizar este valor para poder enviar dinámicamente el precio a, por ejemplo, Facebook Ads. Solo bastará con ir a la etiqueta respectiva, en este caso a la etiqueta Purchase, posar el cursor del ratón en el elemento donde queremos añadir una variable, luego presionar dos veces el símbolo {{ y se nos abrirá un listado de variables para seleccionar, escogemos la que hemos creado: precio.
