Si quieres medir enlaces JavaScript con Google Tag Manager (de tipo onclick). O bien enlaces u otras tags clicables en una página (por ej. pestañas, acordeones, etc.) que tengan atributos data de HTML5, aquí te explico cómo hacer :)
Aquí vamos a ver el ejemplo del «onclick» pero con un atributo «data» sería todo casi idéntico.
Empecemos por el principio: Como sabemos, Google Tag Manager tiene dos activadores predefinidos para medir clicks. Por un lado podemos seguir clicks en enlaces y por otro clicks en todos los elementos.
1. Click en Solo enlaces: es un activador que sirve para links de tipo <a href=»…»>anchor text</a>. Enlaces estándar por tanto, donde tenemos una ruta a donde se apunta en el atributo href, que como veremos, equivale a la variable de GTM {{Click URL}}.
2. Click en Todos los elementos: Otro tipo de activador que usaremos para medir clicks en otros tipos de etiquetas HTML distintas a enlaces <a href=»…»>. Por ej. etiquetas <span>, <button>, <input>, <div>…
Para saber en qué caso nos encontramos debemos mirar con Herramientas de desarrollo el código fuente del enlace, dando a Inspeccionar / Inspeccionar elemento, tras hacer click derecho sobre el botón o enlace que deseemos medir:
Por ej.
Lo que se selecciona en azul es el elemento sobre el que hicimos click derecho.
Ahora nos centramos de nuevo en el asunto del post. A veces, aunque no sea lo más aconsejable, todavía nos encontramos enlaces hechos con código JavaScript de este tipo:
< div onclick=" window . location (...) " >...< /div >
Para empezar, ya vemos:
- que debemos usar un activador de tipo Click en Todos los elementos
- que querremos conocer el texto o código que incluye el atributo onClick para tener idea de hacia dónde apunta
Como también sabremos, tenemos una serie de variables predefinidas de tipo Click, para eventos de Click de Tag Manager. Solo las debemos habilitar:
- {{Click Element}}: Todo el código HTML del elemento clicado.
- {{Click Classes}}: Clases CSS del elemento clicado. Lo que hay dentro del atributo class=»…», en la etiqueta/elemento HTML clicada. Si hay varias clases se recopilan todas.
- {{Click ID}}: ID CSS del elemento clicado (si existe). Dentro del HTML del elemento clicado, buscamos el atributo id=»…». Su valor es lo de dentro.
- {{Click Target}}: Atributo target=»…» si hay. Ídem.
- {{Click URL}}: Atributo href=»…». Esto lo tienen solo los tags de tipo enlace porque incluye la dirección a la cual apunta el propio enlace. Se trata de aquella URL donde iremos al pinchar en el enlace o botón. Solo existe en etiquetas <a> y <link>.
- {{Click Text}}: Se trata del texto visible, por ej. del enlace – anchor text -. Aplicable en etiquetas de tipo enlace: <a href=»…»>texto del enlace</a>, etiquetas <button>,… y en definitiva todo lo que tenga texto.
Sin embargo, no hay ningún {{Click onclick}}. Por tanto, se trata de una variable que deberemos crear. ¿Y cómo lo haremos?
¿Cómo extraemos el valor del atributo onClick de un enlace? (¿o de otro atributo que no esté en la lista de variables predefinidas?)
GTM tiene la opción de crear variables personalizadas o a medida. Dentro de estas, encontramos un tipo de variable de Tag Manager llamado «Auto-event variable» o «Variable de evento automático».
Dicho tipo de variables nos permite recopilar valores sobre el último elemento afectado por un evento. Por ejemplo, para lo que nos atañe en este caso, sobre el último elemento clicado.
Podemos seleccionar el tipo de contenido que queremos extraer del elemento: class, id, elemento completo, old history state, etc. Hasta aquí todo es muy similar a lo que ya podemos obtener con las variables predefinidas existentes, ¿verdad?
Pero además :D podemos extraer cualquier atributo del elemento, y en concreto, para este caso del ejemplo escribiremos «onclick» en el campo que corresponde.
Así creamos la variable {{Click onclick}}:
NOTA: Fíjate bien de si en el código está escrito «onclick» u «onClick». El campo es sensible a mayúsculas y minúsculas.
ACTIVADOR DE GTM PARA ENLACES JAVASCRIPT
A continuación, podemos configurar así el activador para Clicks JS onclick así:
*Con este activador medimos todas las etiquetas HTML clicadas que tengan atributo onclick relleno.
ETIQUETA PARA ENLACES JAVASCRIPT (ejemplo)
En la etiqueta, por ejemplo así, añadimos en label la variable {{Click onclick}}. Damos por sentado en este ejemplo que se trata de medir botones, si no el texto de Action y Label lo podemos adaptar.
A que así parece sencillo de aplicar? Ala, pues a probarlo en un proyecto donde tengas este tipo de enlaces o donde tengas atributos data de HTML5 que desees recopilar. Sí, has leído bien :)
Espero que sea útil. Gracias por leer! Y comparte si te ha gustado ;)
O si prefieres una formación in company, en tu empresa, sobre:
- Tag Manager y Píxeles de Conversión
- Google Analytics básico o avanzado
- Data Studio
- Supermetrics Functions
- SEO
- Google Ads
