Skip to content

Hacks

BLOG DE ANALÍTICA WEB Y ESTRATEGIA DE NEGOCIO

Google Tag Manager: cómo disparar un tag con un elemento visible en pantalla de forma correcta

El trigger de visibilidad de elemento se presenta como un gran recurso a la hora de disparar nuestros tags en Google Tag Manager, ya que podemos hacer que se disparen con la aparición de cualquier elemento visible en nuestra página web.

Este trigger nos es de gran ayuda sobretodo cuando queremos trackear, por ejemplo, envíos de formulario que no te llevan a una ‘thank you page’ de envío, o que no se produce ninguna carga en la URL, pero sí que aparece un mensaje en pantalla como el siguiente:

En el momento de configurar este activador, deberemos tener en cuenta los siguientes aspectos si queremos que nos funcione correctamente.

Lo primero en lo que nos fijaremos cuando estemos configurando el activador de visibilidad de elemento, es el checkbox de los cambios en el DOM:

Esta casilla la dejaremos activada en el caso de que aparezca en pantalla un elemento visible sin haber hecho scroll, en el caso contrario la dejaríamos deshabilitada.

El segundo punto a tener en cuenta en la configuración del trigger es el método que vamos a emplear para seleccionar el elemento visible en pantalla.

Si sabemos con certeza que el elemento que queremos trackear contiene un ID, escogeremos la primera opción.

El problema nos lo encontraremos cuando ese elemento no disponga de un ID y debamos utilizar el selector de CSS. En este caso, deberemos tener un conocimiento básico de CSS para poder emplear correctamente este método de selección:

  • Si queremos seleccionar un elemento que contiene una class concreta, ésta deberá empezar con un punto, ejemplo: .estaClass
  • Si nos interesa seleccionar un elemento que contiene varias class, deberemos añadir un punto antes de cada una de las class, ejemplo: .estaClass.otraClass
  • En el caso de querer seleccionar un elemento por una class que es un hijo directo de otro elemento con una class distinta, deberemos utilizar la siguiente sintaxis: .parentElementClass > .childElementClass

Hay otro punto, que aunque sea menos importante y se dé en menos ocasiones, debemos también tener en cuenta. Se trata de cuando nos encontramos, por ejemplo, con un formulario que está en un iframe, y nosotros queremos trackear el momento en el que éste aparece en pantalla. Si el iframe donde tenemos el formulario no dispone de un estilo definido, eso significa que el valor del parámetro height es 0, por lo tanto el elemento se muestra como invisible y de esta manera resulta imposible ser trackeado. Si nos encontramos con esta situación, simplemente tenemos que pedir a nuestro developer que añada para ese elemento un height que sea de al menos 1 o 2 px.

Resumiendo en pocas palabras, el trigger de elemento de visibilidad es de gran utilidad, nos puede sacar de muchos apuros a la hora de disparar ciertos tags, pero debemos vigilar bien el momento de configurarlo y entender el elemento que debemos seleccionar para que funcione correctamente la activación del tag.

Artículos relacionados

¿Por qué un cliente necesita una plataforma de CDP ...

En un mundo cada vez más digitalizado, sabemos que las empresas intentan gestionar, retener, analizar y captar clientes o usuarios con herramientas de analítica o de CRM, entre ...

Configuración de propiedades en GA4

El final de Universal ya es una realidad, y quien no haya implementado ya GA4 en su plataforma digital tiene que ponerse las pilas. Si ya lo has hecho o lo vas a hacer en breve te ...

Google Tag Manager: cómo sacar provecho a los parámetros de ...

Funcionalidades escondidas Una de las funcionalidades escondidas de GTM pero que puede resultar de gran ayuda, es poder extraer un parámetro de consulta de la URL, para después ...

Cómo implementar eventos de video en Google Analytics con ...

En este artículo os contaremos cómo implementar el Player de video Dailymotion en nuestras páginas web para poder mapear correctamente distintos eventos desde Google Tag Manager. ...

Trucos de analítica: ¿Como trackear fragmentos de URL en ...

Cada vez son más las páginas web en las que se muestra el contenido de manera dinámica sin necesidad de recargar la página. Denominadas Single-Page Application (SPA), en este tipo ...

HIKE Hack: cómo enviar datos de tu formulario web a Google ...

En el artículo de hoy os vamos a mostrar cómo generar una buena base de datos simplemente conectando tus formularios web con Google Sheets a través de Google Tag Manager, algo que ...

Google Analytics 4: guía paso a paso para utilizar el Debug ...

Google Analytics 4 sigue mejorando día a día sus funcionalidades. La inminente llegada de la nueva herramienta para sustituir Universal Analytics presenta algunas utilidades que ...

Todo lo que necesitas saber sobre los eventos Google ...

En Google Analytics 4 todas las interacciones de los usuarios se concentran en los llamados eventos. Si en Universal Analytics las interacciones se dividían en hits de páginas ...

Guía paso a paso para implementar vídeos en el entorno AMP

Me gustaría decir que para tener el tracking de vídeos en el entorno AMP basta con preparar un simple tag en GTM con su correspondiente trigger y ya podremos empezar a tener datos ...

Cómo enriquecer tus análisis de Google Analytics con ...

La interfaz de Google Analytics nos proporciona una gran cantidad de dimensiones y métricas por defecto: el tipo de dispositivo, el canal de adquisición, el número de usuarios y ...

Newsletter

Tenemos una recopilación de noticias que seguro te puede interesar sobre Analítica, Martech, Cookies, etc.

Te puedes dar de baja en cualquier momento.Para más detalles puedes consultar nuestra Política de Privacidad.