Se honesto, ¿puedes pensar en algo que sea más injusto que esto?
un nuevo Administrador de etiquetas de Google artículo, publicado en 02:07 a.m. mi tiempo, y con una búsqueda de huevos de Pascua involucrada? Por supuesto, fue el exasperante Charles Farina quien encontró la nueva característica y reclamó el premio. ¡Maldiciones! (Es broma, Charles, sigues siendo increíble).
De todos modos, hay una nueva característica de GTM en la ciudad, y ¡vaya, esta vez es algo grande! Sin más preámbulos, permítanme presentarles un nuevo operador Set off: el coincide con el selector CSS:
Es modus operandi es bastante easy. Usted crea una condición de activación, donde un elemento HTML se compara con un selector de CSS. Si el selector CSS se aplica al elemento HTML, la condición pasa.
incógnita
El boletín a fuego lento
Suscríbete al Boletín a fuego lento para recibir las últimas noticias y contenido de Simo Ahava en su bandeja de entrada de correo electrónico.
Selectores CSS y GTM
Selectores CSS son patrones que usted busca en cualquier elemento HTML determinado. Tradicionalmente, los selectores CSS se han utilizado para modificar los estilos de los elementos dados. Hoy en día, también podemos usarlos para apuntar a elementos HTML para otros fines, especialmente porque marcos como jQuery, que apuntan a elementos usando selectores CSS, se han vuelto omnipresentes. También está el JavaScript básico. querySelector(), querySelectorAll() y matches() Métodos DOM que le permiten seleccionar elementos basados en selectores CSS.
Para obtener una buena lista de selectores CSS3 actualmente compatibles, consulte la guía W3Schools: Referencia del selector CSS.
A continuación se muestran algunos selectores de CSS que pueden resultarle muy útiles. estos son todos seguimiento automático de eventos relacionado, porque las posibilidades de seguimiento automático de eventos se abrieron de una manera completamente nueva con la introducción de este nuevo operador Set off.
En lugar de apuntar Haga clic en ID o Clase de formularioahora siempre debe proporcionar un elemento HTML a la condición de activación. Entonces, necesitarás usar Haga clic en Elemento o Elemento de formulario (son lo mismo) para hacer coincidir el patrón con el elemento objetivo de su evento automático.
| Selector | Descripción |
|---|---|
| .esta clase | Coincide si el elemento tiene la clase “thisclass” |
| .esta clase.esa clase | Coincide si el elemento tiene la clase “esta clase” y la clase “esa clase” |
| #thisid | Coincide si el elemento tiene ID “thisid” |
| #principal .navlink | Coincide si el elemento tiene la clase “navlink” y es descendiente de un elemento con el ID “principal” |
| div#principal > .navlink | Coincide si el elemento tiene la clase “navlink” y es hijo directo de un elemento DIV con el ID “principal” |
| :comprobado | Coincide si el elemento está marcado (botón de opción o casilla de verificación) |
| (título de datos*=”presidente mao”) | Coincide si el elemento tiene el atributo “título de datos” con la cadena “presidente mao” en algún lugar de su valor |
| a(href$=”.pdf”) | Coincide si el elemento es un enlace (A) con un atributo HREF que termina en “.pdf” |
| .contactmail:niño único | Coincide si el elemento tiene la clase “contactmail” y es el único hijo de su padre |
Como puedes ver, puedes hacer cosas bastante creativas con él. El activo más importante es, con diferencia, la posibilidad de ver relaciones ancestrales. Ahora puede comprobar si el elemento en el que se hizo clic o en el que se envió es hijo o descendiente directo de cualquier elemento determinado. ¡Qué forma tan ingeniosa de activar etiquetas solo al hacer clic en la navegación principal, por ejemplo!
Recuerda que puedes agregar múltiples selectores al igual que con CSS usando una coma entre los selectores:
Haga clic en Elemento – coincide con el selector CSS – vídeo, vídeo *
Esta condición coincidiría con los clics en un HTML5. elemento o cualquiera de sus descendientes.
Estás limitado por CSS3, principalmente. No puede realizar comprobaciones de descendientes, por lo que no puede tener un selector CSS que solo coincida con un elemento si tiene un elemento específico como hijo. Desafortunadamente, aún necesitarás JavaScript para esto.
Afortunadamente, CSS4 ya está bastante avanzado en sus etapas de borrador. Trae una serie de características nuevas e increíbles, que solo harán que este activador selector de CSS sea aún más poderoso.
Detalles técnicos
Sólo para concluir esta publicación, aquí hay una descripción técnica del nuevo operador (¡gracias Brian Kuhn!). No hay nada revolucionario en esto, lo que demuestra cómo GTM todavía aprovecha prácticas bien fundadas en lugar de inventar la rueda cada vez.
El operador utiliza el matches() Método con variaciones según el navegador que estés utilizando. El matches() El método le permite comprobar si un elemento determinado coincide con un selector de CSS:
aspect.matches('.thisclass');
El código anterior se evaluaría como verdadero si el elemento dado tiene la clase “esta clase”.
matches() no es appropriate con todos los navegadores y, por ejemplo, Web Explorer sólo lo admite en la versión 9.0. Para navegadores anticuados, GTM recurre a verificar cada nodo que coincide con un selector determinado y devuelve verdadero si el elemento dado se encuentra entre estos nodos.