Administrador de etiquetas de Google: el oyente del historial

¡Hay un nuevo oyente en la ciudad! Han pasado ya unos días desde que Administrador de etiquetas de Google equipo desató el Oyente de historiay ha llegado el momento de contaros lo que este bebé puede hacer.

Historical past Listener está diseñado para usarse en sitios net donde el contenido se carga dinámicamente. Normalmente, estos sitios net hacen un uso intensivo de AJAX (Asincrónico javaScript aDakota del Norte incógnitaML), que está diseñado para cargar contenido en segundo plano y servirlo dinámicamente sin tener que recargar la página.

Como no quiero profundizar demasiado en cómo funciona un sitio net dinámico, este tutorial debería ser bastante easy. La clave es comprender qué eventos activan el Historical past Listener y cómo puede realizar un seguimiento de las visitas a su página en un sitio net sin URL estáticas vinculadas a contenido estático.

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.

Fondo

Un sitio que carga contenido dinámicamente suele ser incompatible con ciertos eventos predeterminados del navegador. Por ejemplo, si tiene un sitio que carga dinámicamente su contenido sin ningún cambio en la URL de la página (no sucede nada en la barra de direcciones), ¿qué cree que sucede cuando un visitante sale de su sitio y luego hace clic en el navegador? Atrás ¿botón? Puedo darte una pista: no verán el estado dinámico en el que se encontraba la página justo antes de irse.

Esto es, por supuesto, un problema para los motores de búsqueda Además, ya que quieren indexar páginas con direcciones URL únicas, cada una de las cuales devuelve un contenido estático y único. Esta es la razón fragmentos de URL (También conocidos como anclajes, también conocidos como hashes) se introdujeron para resolver los problemas con el historial del navegador. Si cargó contenido haciendo clic en el enlace “Acerca de nosotros”, su URL se habría visto así https://www.simoahava.com/predominant#aboutus.

Esto solucionó el problema con el historial del navegador, ya que ahora podía detectar cambios en el fragmento de URL y mostrar contenido apropiado nuevamente, incluso si el usuario usaba el botón Atrás. Sin embargo, esto no fue suficiente para los motores de búsqueda o para Google Analytics, que tienen dificultades para manejar fragmentos de URL.

Introduzca el hachís (el nombre más genial que jamás se le haya dado a algo en ningún lugar). El hashbang es un hash seguido de un signo de exclamación: #!. Es un invento antiguo, que existía en los sistemas UNIX para facilitar la carga de scripts. Google lo adoptó como esquema para indicar un sitio AJAX con contenido rastreable. Cuando los rastreadores de búsqueda encontraron la secuencia hashbang, la tradujeron a un parámetro de consulta de URL adecuado (escaped_fragment=_el-fragmento-original). Un parámetro de consulta significaba que la página podía rastrearse e indexarse ​​para que los usuarios de motores de búsqueda la encontraran.

Sin embargo, el hashbang no es la solución más fácil de implementar, parece absolutamente horribley Simplemente no es así como debes tratar tus URL..

El capítulo ultimate de la historia, y el más relevante para Historical past Listener, está creado por el estándar HTML5. HTML5 introdujo el ventana.historia API, que se puede utilizar para manipular manualmente el historial del navegador al cargar contenido dinámicamente. Ahora puede insertar manualmente un estado en el historial del navegador, y cuando alguien navega con el botón Atrás del navegador a su página, puede buscar estados almacenados y cargarlos en orden, tal como el comportamiento predeterminado de un sitio net estático.

Historical past Listener escucha los cambios en el historial del navegador. Si detecta dicho evento de cambio, le dirá qué sucedió, si hay un objeto de estado almacenado en el historial y si hubo un cambio de fragmento de URL involucrado. Puede utilizar esta información para enviar visitas a páginas virtuales, evitar que ciertas etiquetas se activen nuevamente, publicar etiquetas dinámicas y básicamente cualquier cosa que haría normalmente cuando se carga una página.

Configurar el oyente de historial

Configuras el Historical past Listener como lo harías cualquier otro oyente.

1. Crear una nueva etiqueta

2. Nómbrelo sabiamente

3. Establecer tipo de etiqueta en Escucha de eventos > Escucha de historial

4. Establezca la regla de activación en Todas las páginas ({{url}} coincide con expresiones regulares.*)

Y eso es todo. Esto configurará a su oyente en todas las páginas para que espere los activadores que lo activen.

También notarás que se han proporcionado un montón de nuevas variables de eventos automáticos. Puede usarlos para acceder a las propiedades del cambio de evento del historial después de que se haya activado el detector del historial. Lea más sobre estos en mi Guía de macros.

Los desencadenantes

El Historical past Listener se activará cada vez que ocurra una de las siguientes situaciones:

• Llama al método ventana.historia.pushState()

• Llama al método window.historical past.replaceState()

• A estado pop Se detecta evento

• El fragmento de URL (hash) cambia

ventana.historia.pushState() se utiliza para agregar un estado a la pila del historial del navegador. empujarEstado() toma tres argumentos: un objeto de estado, un título y una URL.

El objeto de estado es donde almacena detalles sobre el contenido, que puede usar más adelante para ofrecer el mismo contenido al visitante que regresa. El título es sólo una forma de nombrar la entrada del historial, aunque se puede utilizar con estado pop para establecer el título de la página. La URL es lo que aparecerá en la barra de direcciones de su navegador después de la empujarEstado() csll está completo. Esto es especialmente útil porque los visitantes de su sitio pueden compartir esta URL “digital”, que luego puede usarse para ofrecer el contenido correcto a los visitantes que llegan a través de este enlace.

ventana.historia.replaceState() es prácticamente lo mismo que pushState(), excepto que reemplaza el estado del historial precise con el nuevo estado.

estado pop es lo que ocurre cada vez que cambia la entrada activa del historial. Por ejemplo, los botones Atrás y Adelante del navegador activan estado pop. Si la entrada del historial que se activa al estado pop fue creado por empujarEstado() o reemplazarEstado()el estado pop El evento tendrá el objeto de estado almacenado como propiedad. Puede utilizar este objeto para ofrecer el mismo contenido a las personas que navegan a través del historial del navegador hasta su sitio AJAX.

¡Nota! Existen algunas diferencias en cuanto a cómo y cuándo los navegadores envían el estado pop. Chrome y Safari, por ejemplo, activan un estado pop con cada carga de página (ya que es entonces cuando cambia la entrada del historial activo), pero Firefox no. Firefox requiere una entrada en el historial creada por un empujarEstado() o reemplazarEstado() llamar.

Cambios de fragmentos de URL Son restos de la period hashbang, pero los fragmentos todavía se utilizan ampliamente en los sitios net. Por ejemplo, si tiene enlaces de anclaje internos, activará un evento de cambio de fragmento cada vez que el visitante salte a un anclaje en su página. En los sitios AJAX, puede escuchar eventos de cambio de fragmentos y usarlos para enviar una vista de página o activar una etiqueta de su elección.

{{evento}} es igual a gtm.historyChange

Cuando Historical past Listener se está ejecutando y ocurre cualquiera de los eventos descritos en el capítulo anterior, se gtm.historyCambiar se inserta en la capa de datos. Las macros de eventos automáticos pueden acceder a la mayoría de las propiedades de este evento, pero es bueno saber cómo se ve la entrada de la capa de datos.

Así es como se ve su objeto dataLayer después de un evento pushState(). Aquí, el objeto de estado que envío es muy easy. Contiene solo un par clave-valor, página: “Acerca de nosotros”.

Así es como se ve su capa de datos después de un evento replaceState(). Los parámetros son los mismos que en pushState(). Tenga en cuenta que disparé replaceState() justo después de pushState(), por lo que verá el objeto de estado anterior almacenado en el gtm.oldHistoryState ¡propiedad!

Ahora, si salgo de la página y vuelvo con el botón Atrás del navegador, aparece un estado pop El evento ocurre con mi objeto de estado cuidadosamente almacenado dentro de:

Como puede ver, el estado anterior y el nuevo son los mismos, porque salí de la página de Contacto y llegué a la misma página después de hacer clic en Atrás en mi navegador. Cuando ocurre popstate, puedo mirar el objeto de estado del historial y enviar la vista de página correcta para el contenido dinámico. En este caso, puedo ver que el visitante regresó a la página de Contacto.

Finalmente, aquí estoy navegando de un fragmento de URL a otro:

Como puede ver, primero fui al ultimate de la página a través del fragmento de URL. #abajo. Esto desencadena una estado pop evento, con #abajo como gtm.newUrlFragment. Después de eso, hice clic en “Volver al principio”, lo que me transportó a la URL. #volver al inicioy esto se refleja en la captura de pantalla anterior.

Ejemplo de uso

Mostraré un ejemplo rápido, ampliando la thought de navegar a la página “Contacto”, donde los detalles de la página se almacenan en un objeto de estado, creado usando empujarEstado().

La premisa es que cuando su visitante hace clic en un enlace a la página “Contacto”, el contenido se carga dinámicamente. Para tener en cuenta los cambios históricos, el empujarEstado() El método se llama con algo como:

var web page = {web page:"Contact"};
historical past.pushState(web page,'Contact','contact.html');

Esto envía una nueva entrada a la pila del historial de su navegador, con una única propiedad dentro del objeto de estado. Esta propiedad es a la que querremos acceder en un estado pop Por ejemplo, es decir, cuando alguien regresa a la página de contacto a través de un evento del historial (regresar al navegador, por ejemplo).

• Cree una nueva macro de variable de capa de datos para obtener la página propiedad del nuevo estado histórico:

• Cree una nueva regla para la etiqueta de vista de página:

Y eso es todo. Puede adjuntar esta secuencia a su etiqueta de vista de página, por ejemplo, asegurándose de que la vista de página se envíe cada vez que alguien regrese al contenido de su contacto a través del historial del navegador (consulte a continuación cómo asegurarse de que las propiedades de vista de página estén en orden).

La regla de despido es importante. Estás buscando un gtm.historyCambiar evento. Esto se inserta en la capa de datos cuando se activa el Historical past Listener. Después de eso, querrás asegurarte de que el evento fue estado pop (la macro en (2)), y que el página La propiedad del nuevo estado histórico tiene el valor “Contacto”.

Ahora, cuando envíe una vista de página, la URL será correctamente contact.html (ya que la proporciona en la llamada pushState()). Sin embargo, el título de su documento puede estar desactivado, a menos que lo establezca explícitamente en su lógica AJAX. Una buena forma de enviar el título de la página es utilizar la configuración Ruta del documento en la etiqueta de vista de página y completarla con el valor de una macro de tabla de búsqueda, que a su vez evalúa el página propiedad nuevamente. Permítanme demostrar:

Esa es su etiqueta de vista de página. En el campo Título del documento, está recuperando el valor de una macro de tabla de búsqueda, a la que he llamado {{ AJAX – Título de la página }}.

Esto establece el título de la página dependiendo de la página propiedad, insertada en la capa de datos cuando se activa el detector de historial. Puede establecer un valor predeterminado para la macro Tabla de búsqueda, pero, por otro lado, si no devuelve un valor, la etiqueta simplemente enviará lo que se encuentre en el documento.título propiedad.

Conclusiones

¡Uf! Esto se convirtió en un monstruoso tutorial. Pero eso es de esperarse. Trabajar con AJAX y contenido dinámico no es fácil, ya que hay muchas cosas que tener en cuenta. No sólo hay problemas de usabilidad y compatibilidad del navegador involucrados, sino que también deberás tomar en cuenta motores de búsqueda en cuentay necesitarás comprender cómo funcionan los eventos históricos.

Como siempre, le recomiendo encarecidamente que repase su JavaScript antes de comenzar a trabajar con Historical past Listener. No hay daño que hacer, pero no querrás arruinar tu seguimiento al no entender cómo funcionan los objetos de estado, por ejemplo. Además, es muy possible que tengas que volver a tu configuración de AJAX para asegurarte de que las llamadas pushState() y replaceState() proporcionen todos los datos necesarios para tu uso.

Usar Historical past Listener en un sitio dinámico es mucho mejor que recurrir a Hyperlink Click on Listeners. La mayoría de las veces te encontrarás con problemas de propagación de eventos con sus oyentes, ya que la mayor parte de la navegación AJAX está diseñada para evitar el comportamiento predeterminado de los enlaces. Con Historical past Listener, solo escucha los eventos del historial del navegador, por lo que los conflictos en la página no afectarán la funcionalidad básica del escucha.

Tendrás que ser cuidadoso y preciso con tus reglas. Utilice todas las propiedades del evento gtm.historyChange, porque querrá hacer cosas diferentes según empujarEstado() y estado popPor ejemplo.

Y si tienes alguna pregunta, envíame un correo o deja un comentario a continuación.