El API de visibilidad de página para navegadores net es bastante bueno. Le permite sondear, utilizando algunas propiedades nuevas del doc objeto, ya sea que la página precise sea seen o no para el usuario. La visibilidad está oculta si la página no está abierta en la pestaña precise del navegador o si la ventana del navegador se ha minimizado.
En esta publicación, daré un ejemplo de cómo se podrían usar las funciones de la API de visibilidad de página con Administrador de etiquetas de Google. Sin embargo, tenga en cuenta que la compatibilidad del navegador con la API prácticamente excluye todas las versiones de IE anteriores a ten del alcance de este artículo.
En este ejemplo, configuraremos algunas etiquetas, reglas y macros que nos ayudarán a evitar recibir páginas vistas para páginas que se abrieron en pestañas pero que nunca se leyeron. No sé ustedes, pero tener una página vista para una página que no fue vista suena contrario a la intuición. La página vista solo se enviará una vez que la página sea seen por primera vez.
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.
El oyente de la visibilidad
Primero, crearemos un oyente de visibilidad. Lo que hace es enviar un evento del navegador cada vez que cambia el estado de visibilidad de una página.
operate() {
var prefixes = ('moz', 'ms', 'o', 'webkit');
if ('hidden' in doc) {
return '';
}
// Loop via every prefix to see whether it is supported.
for (var i = 0; i < prefixes.size; i++) {
var testPrefix = prefixes(i) + 'Hidden';
if (testPrefix in doc) {
return prefixes(i);
}
}
return;
}
operate() {
swap ({{visibility prefix}}) {
case '':
return doc('hidden');
case 'moz':
return doc('mozHidden');
case 'o':
return doc('oHidden');
case 'webkit':
return doc('webkitHidden');
default:
return;
}
}
<script>
if (typeof {{visibility prefix}} !== 'undefined') {
var visibilityEvent = {{visibility prefix}} + 'visibilitychange',
hiddenState = {{visibility hidden}},
visibilityChanged = operate() {
if (typeof hiddenState !== 'undefined') {
dataLayer.push({
'occasion' : 'visibilityChange'
});
}
};
// Connect visibility listener to doc
doc.addEventListener(visibilityEvent, visibilityChanged, false);
}
script>- Establecer etiqueta para disparar {{evento}} es igual a gtm.js
Primero creamos una macro de utilidad que devuelve el prefijo del navegador requerido para configurar el oyente y probar el estado de visibilidad. En la siguiente macro, recuperamos el estado del documento (verdadero: el documento está oculto, falso: el documento está seen).
Finalmente, en la etiqueta creamos un detector de cambios en la visibilidad de la página. Si la visibilidad cambia, un dataLayer el evento es empujado.
Utilizaremos estos datos en el siguiente ejemplo.
Bloquear página vista hasta que la página sea seen
Entonces, el punto aquí es no enviar una página vista a Google Analytics hasta que la página sea seen. Esto también se aplica a todos sus eventos, por lo que deberá agregar estas mismas reglas y funciones (modificadas para que coincidan con la lógica de activación authentic) a sus etiquetas de eventos, o podría terminar teniendo sesiones solo con eventos y sin páginas vistas. Esto debe evitarse.
Aquí está la lógica:
-
Cuando la página vista se activa por primera vez (normalmente {{evento}} es igual a gtm.js), utiliza la visibilidad de la página como regla de bloqueo. Si la página está oculta, no energetic la etiqueta.
-
Cuando la página se vuelva seen, utilice el evento de visibilidad como activador de la etiqueta.
-
Cuando la página vista se haya activado, use su hitCallback para evitar que el oyente de visibilidad energetic la etiqueta nuevamente.
Entonces, pongámonos en marcha.
operate() {
return operate() {
if (typeof {{visibility prefix}} !== 'undefined') {
var visibilityEvent = {{visibility prefix}} + 'visibilitychange';
doc.removeEventListener(visibilityEvent, visibilityChanged);
}
}
}
-
En su etiqueta de vista de página, cree una nueva regla con las dos condiciones siguientes y agréguela a la etiqueta. ¡Mantenga todas las viejas reglas en su lugar también!
-
En la etiqueta de vista de página, agregue lo siguiente Regla de bloqueo
- {{visibilidad oculta}} es igual a verdadero
-
En su etiqueta de página vista, navegue hasta Campos para configurary agregue un nuevo campo
Y eso debería bastar. Se trata de una larga cadena de acciones, pero sigue el camino descrito al principio de esta sección.
Conclusiones
La API de visibilidad de página es bastante buena, pero, ante todo, está diseñada para ahorrar recursos. Úselo para detener la reproducción de un video cuando la pestaña no está enfocada o para detener el avance de un carrusel de imágenes.
Con Google Tag Supervisor, puedes hacer varias cosas, como por ejemplo:
-
Bloquear página vista para páginas no visibles (explorada en esta publicación)
-
Enviar visibilidad durante la vista de página como una dimensión personalizada (para realizar un seguimiento si la página se abre en una nueva pestaña o directamente)
-
Realice un seguimiento del cambio de visibilidad como un evento de GA (para ver si las personas se centran en su contenido)
-
Pausar Timer Listener cuando la página esté oculta y reiniciarla cuando se vuelva seen
Etcétera.