vie. Mar 14th, 2025

#GTMTips: Use selectores CSS comodín con activadores de todos los elementos


Al utilizar el Todos los elementos desencadenar en Administrador de etiquetas de GoogleEs fácil pasar por alto el hecho de que captura todo clics en la página. También es brutalmente preciso: captura los clics en la página. exacto elemento que estaba debajo del botón del ratón cuando se hizo clic. Esto significa que, al trabajar con el disparador Todos los elementos, debe tener más cuidado al identificar el elemento. elemento correcto En realidad, desea realizar un seguimiento de los clics.

En esta breve guía, te mostraré un truco sencillo para asegurarte de que siempre capturas clics en un elemento determinado, independientemente de cómo se vea la estructura HTML circundante. Todo lo que necesitas hacer es un easy ajuste en el Selector CSS que utilizas en el disparador.


incógnita


El boletín informativo de Simmer

Suscríbete a la Boletín informativo de Simmer ¡Para recibir las últimas noticias y contenidos de Simo Ahava en tu bandeja de entrada de correo electrónico!

Consejo 76: Utilice el selector CSS comodín con activadores de Todos los elementos

El selector de comodines literalmente significa cualquier descendiente del selector anterior. Entonces, dado un selector como div#nav * coincidiría con cualquier elemento que esté anidado con un

aspect, however not the

aspect itself.

Let me present you a helpful instance.

<div id="container">
  <div id="header">
    <div id="brand">
      <img src="/pictures/brand.png" />
      <span>Again housespan>
    a>
  div>
div>

En este escenario, digamos que desea realizar un seguimiento de los clics en

, no matter whether or not the clicking falls on the picture aspect or the span.

Si intenta hacerlo con un disparador Todos los elementos que tenga alguna de las siguientes condiciones, no funcionará:

  1. Haga clic en ID es igual brand

  2. Haga clic en Elemento coincide con el selector CSS div#brand

¿Por qué no? Porque el clic no aterrizará en el

. Reasonably, it can land on one of many nested parts, as a result of they're block-level parts that truly fill the wrapping

utterly. Thus there’s no space left within the

itself that may be clicked!

So, it's worthwhile to instruct the set off to trace clicks on the

itself (this can be a good precaution in case there’s further padding that does introduce floor space to the

, too) and any of its nested parts. That is the place the wildcard selector is useful.

The selector you’ll want to make use of appears like this:

Click on Aspect matches CSS selector div#brand, div#brand *

Esto literalmente significa:

Seguimiento de los clics que llegan a un

aspect, or any aspect nested inside this

.

I’ll go as far as to say that everytime you use the All Components set off, all the time use this aspect, aspect * Sintaxis. De esa manera, siempre podrá realizar un seguimiento de los clics en el elemento apropiado, independientemente de la estructura HTML anidada.

Los únicos casos extremos que se me ocurren son si realmente quieres rastrear clics en los bordes del elemento envolvente únicamente y no en nada anidado dentro, pero tengo problemas para justificar este caso de uso en un escenario del mundo actual. Pero en caso de que hacer Si desea realizar un seguimiento de los clics específicamente en un elemento envolvente, simplemente suelte el selector de comodín y use div#brand como único selector.

© 2024 Simo Ahava. Todos los derechos reservados.

Imagen del autor

Simo Ahava

Esposo | Padre | Desarrollador de análisis
simo (at) simoahava.com



Defensor sénior de datos en Reaktor



Finlandia

Related Post

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *