Introducción a Google Tag Manager

Seguidamente, vamos a crear una etiqueta que permita registrar los datos de clics proveniente de anuncios de manera eficaz.Cuando los usuarios hacen clic en sus anuncios, las URL de las páginas de conversión de su sitio web suelen incluir información sobre esos clics y la almacena en cookies propias de su dominio que crea en esas páginas web y la transfiere a las URLs de las páginas correspondientes.

Para configurar una etiqueta de vinculación de conversiones, siga estos pasos:

• Haga clic en Etiquetas y luego Nueva.
• Haga clic en Configuración de la etiqueta y seleccione Vinculación de conversiones.
• Seleccione la casilla Activar enlace entre dominios. Esta opción permite que la etiqueta Conversion Linker transmita información entre páginas del mismo dominio añadiendo parámetros a las URL de los enlaces y formularios.
• Elija un activador. En la mayoría de los casos, le recomendamos usar uno que se active en todas las vistas de páginas o en las vistas de las páginas a las que acceden los visitantes del sitio web después de hacer clic en un anuncio.
• Guarde y publique la configuración de la etiqueta.

Creación de Etiquetas Basadas en Clicks de Botones

En Google Tag Manager, clic en Etiquetas (Tags), clic en el botón de Nueva (New) y seleccione el tipo de etiqueta que desea configurar, por ejemplo, ‘Google Analytics’ ó Google Ads. En este ejemplo usaremos el seguimiento de conversiones en Google Ads:

El Conversion ID y Conversion Label lo obtenemos al crear la conversion en Goolge Ads, que en este caso se llama Click Button:

Colocamos un nombre que identifique la etiqueta de Conversión. Para el disparador (Trigger), hacemos clic en esa sección y seleccionamos la opcion de Click – All Elements

La opción de Click – Just Links se suele utlizar cuando el clic corresponde a un hipervínculo por elemplo un clic a un número de teléfono, e-mail, etc. Para evitar que la etiqueta dispare con cualquier clic sobre el sitio web, establecemos una condición adiconal que nos permite filtrar la acción del clic solo al botón especificado. Esto es muy importante ya que de esa manera se evitan multiples conversiones que puedan afectar el presupuesto establecido en las conversiones de GAds

Para esta parte es necesario realizar una vista previa en el Google Tag Manager para determinar en los valores de las variables integradas configuradas anteriormente, la que nos permite establecer una condición única para el seguimiento del evento de clic deseado

Luego de conectar con el sitio web, hacemos clic en el botón al cual queremos hacer el seguimiento y verficamos en nuestras variables la que podriamos utilizar para especificar el clic en ese botón:

En este caso observamos que para el evento Click, en la sección Variables, tenemos Click Text con el valor Ver mas. Vamos a utilizar esta variable como condición en el Disparador (Trigger) para especificar el clic en ese botón, ya que no hay otro botón con ese varlor:

Guardamos y publicamos los cambios y verificamos realizando un nuevo Preview

Creación de Etiquetas Basadas en Envío de Formularios

En el procedmiento anterior usamos el seguimiento de conversiones en Google Ads. Para este ejemplo, se realizará el segimiento de formulario utililzando el seguimiento de conversiones para Google Analytics 4 (GA4). Para enviar datos de eventos de Google Tag Manager a GA4, debes tener dos etiquetas que funcionan juntas:

• Etiqueta de Google
  La etiqueta de Google establece el flujo de datos de tu sitio web a Google Analytics y otros destinos que podrías haber establecido. Crea una etiqueta de Google por dominio y colócala en cada sitio que desees medir.
• Google Analytics: evento de GA4
  La etiqueta de evento de GA4 te permite configurar eventos en tu sitio web sin la necesidad de escribir código. Los datos de eventos aparecen en tus informes de GA4.
  Crea tantas etiquetas de evento como necesites para medir tus eventos recomendados o personalizados.

Etiqueta de Google: en Google Tag Manager, clic en Etiquetas (Tags), luego clic en Nueva (New) y seguidamente clic en Configuración de la Etiqueta (Tag Configuration), clic en Etiqueta de Google (Google Tag):

Para la configuración de la etiqueta, se necesita el ID de Medicón de la cuenta de GA4: ingesar a la cuenta de Google Analytics 4, clic en la rueda dentada abajo a la izquierda: Administración (Admin) y luego ir a Flujo de Datos (Data Streams). En Flujo de datos, copiar el ID de medición y pegarlo luego en el campo Tag ID de la etiqueta de Google:

Se ha anãdido en la Configuración de Parámetros send_page_view con el valor true. Esto es porque en este caso, se desea enviar el evento automático page_view al cargar esta etiqueta. Para el Disparador (Trigger) seleccionamos la opción All Pages

Configurada la Etiqueta de Google, procedemos a crear la etiqueta de Google Analytics: evento de GA4, para el evento de envío de formularios.

En este caso, se desea hacer el seguimiento de envío de un formulario cuando el usuario realice clic en el botón Enviar. Dependiendo de la forma como ha sido creado el formulario en el sitio web: a través de un «plugin», a través de un iframe (documento HTML incrustado dentro de otro documento HTML, es decir, un HTML proveniente de otra fuente, por ejemplo un formulario de Google Forms) ó a través de código en el sitio web, el Google Tag Manager podría «ver» el evento de envío de formulario como: Form Submit ó form_submit ó a través de un evento personalizado enviado a la capa de datos (datalayer), y en el caso de no «ver» ningún evento, es probable que se trate de un formulario tipo iFrame

Una forma de determinar si el evento Form Submit es capturado en el GTM, es creando un trigger para ese evento: En GTM, en el menú izquierdo, hacemos clic en Disparadores (Triggers) luego clic en el botón Nuevo (New) y seleccionamos un trigger, que en este caso, corresponde a Form Submision e indicamos, de momento, que sea para todos los formularios (All Forms)

Colocamos un nombre al trigger y guardamos. Seguidamente, hacemos una Vista Previa (Preview) en GTM y enviamos un formlario para saber el tipo de evento que este genera:

En este caso, el GTM consigue ver el evento de envío de formulario Form Submit, por lo que se podria utilizar ese trigger para crear la etiqueta de envío de formulario para GA4. Es importante «filtrar» el trigger para el formulario específico, por ejemplo usando el ID del formulario o cualquier otro parámetro del formulario como condición para identificar el fomulario en cuestión, y asegurarse que el simple clic en el botón enviar no produzca el evento Form Submit, ya que de ser así, se estarían enviando eventos que no corresponden precisamente al envio de un formulario por parte el usuario.

Para este formulario con el que estamos haciendo estas pruebas, el simple clic en el boton sin llenar los campos obligatorios del formulario, genera el evento Form Submit:

Voy a aprovechar esta situación para mostrar la creacion de variables en el GTM que permita capturar el valor de cada uno de los campos del formulario y como validar la dirección del correo electrónico a través del uso de Expresiones Regulares. Vamos a crear 3 variables (una por cada campo obligatorio del formulario) que nos permita leer el contenido al momento de enviar el formulario:

En el menú izquierdo del GTM, vamos a Variables y en la sección de Variables definidas por el usuario (User-Defined Variables), hacemos clic en Nuevo (New) y seleccionamos la variable de Elemento DOM:

y creamos la variable para el campo Obligatorio del Nombre. Para ello es necesario obtener el parámetro name definido en el código del fomulario. Colocamos el cursor del ratón sobre el campo Nombre en el formulario, clic derecho, inspeccionar:

Se abrirá en la derecha la ventana de Herramientas de Desarrollo (Developer Tools), aparecerá resaltado el segmento de código correspondiente al código del campo de Nombre del formulario, obtenemos el parámetro name=»your-name». Vamos a la Variable DOM en el GTM y la configuramos de la siguiente forma:

Repetimos el mismo procedimiento para los campos obligatorios de Correo Electrónico y Asunto (inspeccionamos cada uno y obtenemos del código el parámetro name y se crean en GTM las Variables DOM)

Para el campo del Correo Electrónico, se requiere una condición adicional, ya que se puede escribir cualquier cosa y al hacer clic en enviar, se genera un mensaje de error de formato de correo inválido y el evento Form Submit. Para ello, vamos crear una variable del tipo JavaScript Personalizada (Custom JavaScript) con una función que nos retorne la validación del email usando una expresión regular junto con el atributo match: match(/([a-zA-Z0-9_.-]+@[a-zA-Z0-9.-]+.[a-zA-Z0-9-]+)/gi)[0] y establecemos formato al valor (Format Value): en caso de ser nulo (null) devuelve NoEmail (pueden poner el valor que deseen), en caso de no estar definido (undefined) devuelve NoEmail también

Esta es la funcion usada en la Variable de JS Personalizada: function(){return {{EmailDataFld}}.match(/([a-zA-Z0-9_.-]+@[a-zA-Z0-9.-]+.[a-zA-Z0-9-]+)/gi)[0]}

Observe que {{EmailDataFld}} es la variable DOM que captura el correo electrónico del campo de email del formulario.

Definidas las variables, vamos a establecer las condiciones en el trigger para la etiqueta de envio de formulario para GA4.

La expresion regular ^$ representa el parámetro «vacio» y es usada en la condicion del trigger para la variable DOM del Nombre y Asunto. Es decir, el disparador (trigger) se accionará si la variable del Nombre: NamDataFld no coincide con la expresión regular de ^$ (si la variable devuelve vacío no se accionará), la variable de Asunto: SubjDataFld no coincide con la expresión regular de ^$ (si la variable devuelve vacío no se accionará) y si la variable EmailValidation no es igual a NoEmail (si la variable devuelve NoEmail, no se accionará)

Definido el Disparador, procedemos a crear la etiqueta. Clic en Etiquetas (Tags) en el menú izquierdo, clic en Nuevo, clic en Google Analytics y clic en Google Analytics: GA4 Event:

En ID de Medición (Measuremet ID), colocamos el ID correspondiente a la cuenta de GA4 y en el Nombre del Evento podemos colocar un nombre de Evento Personalizado, que en este caso es Contact_Form, o podemos usar un nombre de Evento Recomendado. Obsérvese que se ha añadido un Parámetro de Evento (Event Parameters), esto es para mostrar como podemos hacer uso de esos parámetros para suministrar información del evento, por ejemplo, si tenemos varios formularios: Contacto, Suscripción, Solicitud de Información, etc, al ejecutarse el evento podemos indicarle al GA4 el nombre del evento y el formulario correspondiente (sea por id de formulario, la url, etc.). Esto puede ser utilizado para crear reportes mas detallados en la sección de Exploraciones del GA4. En este ejemplo se envía el evento con el nombre Contact_Form y el parámetro que identifica el formulario: Form_Type (pueden usar el nombre que quieran) a través de la url usando una variable en GTM del tipo Tabla de Consulta (Lookup Table):

Al enviar el formulario, la etiqueta dispara en el evento Form Submit, la variable integrada del GTM Page Path captura el segmento de url donde se ejecuta el evento, la variable del GTM Tabla de Consulta (Lookup Table), creada con el nombre Form_Params convierte el segmento de url a la expresion: Info_Form_Request y la etiquea de Eventos de GA4 envía el evento con el nombre Contact_Form y el parámetro definido con el nombre Form_Type con el valor de la variable Form_Params al GA4

Supongamos que el formulario al cual queremos hacer el seguimiento genera un evento del tipo form_submit ó algún evento personalizado enviado a la capa de datos (datalayer), por ejemplo, FormSubmitted. En este caso modificamos el Disparador o Trigger al tipo Evento Personalizado (Custom Event), estableciendo las condiciones adecuadas que ocurren en ese evento para evitar que se

dispare múltiples veces y pueda impactar en las conversiones

Si al enviar el formulario, el único evento que se registra es el clic sobre los campos del formulario, clic del botón enviar y se cuenta con un mensaje de confirmación, tenemos la opción de Elementos de Visibilidad (Element Visibility) dentro de las opciones del trigger. Esto no aplica si el mensaje se encuentra dentro del iframe

Para realizar la implementación, enviamos un formulario de prueba, con el ratón seleccionamos el mensaje de confirmación (este puede estar en la misma página del formulario o en la página de gracias o confirmación de formulario enviado), estando sobre el mensaje, clic con botón derecho del ratón y luego clic en inspeccionar

En el lado derecho se abrirá la Herramienta de Desarrollo (Developers Tools) con una seccion de código resaltada con fondo azul o gris (dependiendo de la configuración del ordenador) que corresponde al código que contiene el mensaje de confirmación. Hacemos clic en los 3 puntos que aparecen en la esquina superior izquierda de la seccion resaltada, clic en Copiar y luego en Copiar Selector:

En GTM, clic en Disparadores o Triggers, clic en Nuevo (New) y seleccionamos el Disparador del tipo Elementos de Visibilidad (Elemen Visbility)

Estando en la configuración del Elementos de Visibilidad, en el campo Método de Selección (Selection Method) escogemos la opción CSS Selector y en el campo Selector del Elemento (Element Selector) pegamos el selector obtenido anteriormente. Luego, marcamos la opción de «Una vez por página» (Once per page) para especificar cuando queremos que dispare el trigger y mantenemos el resto de la configuración como muestra la imagen a continuación:

Observe que se ha establecido una condición de disparo para algunos Elementos de Visibilidad, seleccionando la variable integrada Click Text > Contiene > aquí colocamos el texto del mensaje de confirmación que hemos seleccionado en el paso anterior: ¡Gracias por contactar con nosotros! Nos pondremos en contacto contigo muy pronto.

La etiqueta de seguimiento quedaría de esta forma:

Importante tomar en cuenta que en el caso de usar una página de Gracias o de Confirmación de mensaje enviado, al refrescar esta, no cargue nuevamente el mensaje o la misma página, esto podría hacer disparar el trigger y enviar una «falsa conversión». Esto aplica también en los casos en el que el formulario es un iframe pero al enviar el formulario es redireccionado a una página de confirmación o página de gracias en el sitio web, usando un disparador del tipo Vista de Página ó Page View, colocando en la condición del disparador la variable integrada Page URL conteniendo la direccion URL de la pagina de confirmación. Es decir, deben asegurarse que al refrescar la pagina esta no vuelva a cargar con las mismas características, ya que provocaria que se accione el disparador enviando falsas conversiones. En este punto es importante verificar con el desarrollador del sitio web una alternativa para evitar este tipo de situaciones.

En el caso de estar en presencia de un formulario tipo iframe (un formulario proveniente de otra fuente, por ejemplo un formulario de Google Forms) lo recomendable es intentar añadir el código del contenendor del GTM en el código en la sección head / body del formulario, esto es para que el GTM «pueda escuchar los eventos» en ese formulario. En el caso de no pode hacer ese proceso, intente verificar con su desarrollador la creación de un «listener», que es un codigo HTML que debe añadirlo en una Etiqueta de HTML personalizado (Custom HTML) en el GTM, el disparador (trigger) por lo general es del del tipo todas las páginas (all pages). El «listener» envía el evento a la capa de datos y este evento puede ser usado en un trigger de Evento Personalizado (Custom Event) de manera de poder hacer el seguimiento de ese tipo de formulario.