selector, selector – dos selectores separados por una coma se evalúan con lógica O BIEN cuando se usan en un disparador. Por lo tanto, puede especificar varios selectores y, siempre que uno de ellos coincida, se activará el disparador.
Estos selectores genéricos son la base de prácticamente todo lo que haces con los selectores CSS, por lo que es una buena concept aprender cómo funcionan.
2. a(href^=”tel:”)
Este selector coincide con cualquier elemento de enlace () cuyo href atributo comienza con la cadena “tel:”, como por ejemplo: . Esto es útil para realizar un seguimiento de los clics en números de teléfono que se han codificado para utilizar el protocolo “tel:”.
También puedes hacerlo funcionar con enlaces de correo electrónico: a(href^="mailto:")el protocolo SMS: a(href^="sms:")y el protocolo JavaScript obsoleto pero aún vigente: a(href^="javascript:").
3. a(href*=”simoahava.com”)
Este selector coincide con cualquier elemento de enlace cuyo href atributo contiene “simoahava.com”. Por lo tanto, puedo usarlo para eliminar (o incluir) clics en enlaces internos de mi sitio net.
4. a(href$=”.pdf”)
Este selector coincide con cualquier elemento de enlace cuyo href atributo termina con “.pdf”. Esto es útil para rastrear enlaces PDF. Para medir otros nombres de archivos, simplemente puede reemplazar “.pdf” con cualquier tipo de archivo que desee rastrear.
5. div.algúnElemento a
Ya cubrí esto en los selectores genéricos, pero hay un caso de uso muy importante que debo resaltar.
Al trabajar con el Haga clic / Todos los elementos desencadenante, es una buena concept agregar un comodín para cada elemento que desee rastrear:
Haga clic en El elemento coincide con el selector CSS a(href*="simoahava.com"), a(href*="simoahava.com") *
En otras palabras, después del selector actual, agregue un segundo selector que coincida con cualquier descendiente de ese selector. Esto es útil porque el disparador Todos los elementos captura el mismo elemento en el que se hizo clic. Con una estructura DOM anidada, esto puede ser a menudo algo inesperado. Por ejemplo, si tiene un enlace comparable a este:
Un clic en el elemento de enlace de arriba aterrizará en el . Al configurar el selector en a(href="mailto:(e-mail protected)"), a(href="mailto:(e-mail protected)") *estás capturando clics en el elemento de enlace en sí, así como en cualquier descendiente (incluido el ).
6. opción formulario#myForm:marcada
Puedes utilizar el pseudo-selector :checked para que coincida con cualquier elemento marcado. Por ejemplo, kind#myForm possibility:checked busca cualquier seleccionado elemento(s) del formulario. Esto es útil cuando desea identificar qué elemento de una lista desplegable está seleccionado actualmente.
7. a:no()
El :not pseudo-selector coincide si el opuesto del selector dado es cierto. Entonces, un selector como a:not((href*="simoahava.com")) coincidirá con los clics en cualquier enlace que no tengo “simoahava.com” en su href valor del atributo.
8. ol > li:primer hijo
El :first-child selector coincidirá con el elemento dado que es el primer hijo de su padre. Entonces ol > li:first-child coincidirá con el primero
lista.
Otros selectores similares son :last-child (coincide con el último hijo de su padre) y :nth-child(N) (coincide con el enésimo hijo de su padre, por lo que :nth-child(3) coincidiría con el elemento que es el tercer hijo de su padre).
9. a(evento-gtm-datos)
Los corchetes denotan atributos, y si omite el signo igual (=), simplemente puede verificar si un elemento tiene el atributo dado. a(data-gtm-event) coincidirá con cualquier elemento de enlace que tenga el atributo data-gtm-event independientemente de cuál sea el valor de ese atributo.
10. cuerpo > div.site-container > div > div > principal… ARGH
En realidad, esto es más un consejo que un selector útil. Intente evitar cadenas de selección realmente largas y complejas. Cuanto más larga sea la cadena y cuanto más insista en las relaciones directas entre padres e hijos (>), más puntos de falla introducirá en el selector.
Todo lo que se necesita es un elemento para cambiar a lo largo de esa ruta DOM y su selector dejará de funcionar. Por lo tanto, trate de encontrar siempre el selector más genérico que sea lo suficientemente específico como para coincidir exactamente con lo que está intentando capturar. Esto requiere cierto conocimiento de la estructura HTML de sus plantillas.
El selector largo y complejo en la imagen principal de esta publicación podría reemplazarse simplemente con:
header > h2 > a
y será igual de preciso, porque sé con certeza que mi HTML reserva esa secuencia DOM para los títulos de los artículos que ves en la página principal.
Resumen
¡Y ahí lo tienes! Estos selectores deberían resultar útiles a la hora de modificar la configuración de GTM.
¿Tiene algún otro selector realmente útil que le gustaría compartir con otros? Si es así, ¡compártelos en los comentarios del weblog!