dom. Mar 16th, 2025

Comprensión de la secuenciación de etiquetas en Google Tag Supervisor


Una actualización reciente de Administrador de etiquetas de Google introdujo una característica que ha estado en la lista de deseos de muchos usuarios durante mucho tiempo. se llama Secuenciación de etiquetasy su finalidad es facilitar la activación secuencial de Tags. La thought es que puedas especificar un configuración y un limpieza para cada etiqueta en su contenedor.

Este artículo pretende funcionar como un recorrido rápido por la función. No es la característica más sencilla de entender, ya que la secuenciación de etiquetas se ejecuta en paralelo pero separada del flujo regular de su contenedor. No te preocupes, volveré a esto pronto.


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.

1.Secuencia en pocas palabras

A secuencia comprende tres fases:

El configuraciónque es una etiqueta que debe exitosamente completar antes de que se energetic la etiqueta principal.

El etiqueta principalque es el Tag con las dependencias. Depende de la configuracióno establece una dependencia con el limpieza.

El limpiezaque es una etiqueta que se activa después de la etiqueta principal ha completado con éxito.

La secuencia se crea editando el Configuración avanzada del etiqueta principal. Verá dos nuevas configuraciones aquí:

  • Dispara una etiqueta antes…

  • Dispara una etiqueta después…

La primera configuración es para elegir el configuración para el etiqueta principal. Este último es para el limpieza. Si eliges un configuracióndeberá completarse antes de que etiqueta principal se dispara. Si eliges un limpiezael etiqueta principal deberá completar antes del demoler está despedido. Para ambos, puede elegir si se produce o no una falla en cualquiera de los configuración o el etiqueta principal abortará la secuencia.

DE ACUERDO. Eso fue confuso. Permítanme visualizarlo con mis habilidades superiores en PowerPoint.

En la secuencia anterior, la etiqueta de vista de página (configuración) debe completarse exitosamente antes de la etiqueta de evento (etiqueta principal) incendios. Si la etiqueta de vista de página falla, la secuencia se cancela. De manera comparable, la etiqueta de evento debe completarse exitosamente antes de la etiqueta de evento closing (limpieza) incendios. Si la etiqueta principal falla, la etiqueta de evento closing no se activará.

Por supuesto, puede especificar que las etiquetas se activen incluso si algún miembro de la secuencia falla.

La clave para entender acerca de la secuencia es que es aislado. El uso de la secuenciación de etiquetas le permite especificar una secuencia de visitas que se activan cuando el etiqueta principal se desencadena. Esto significa que el configuración y limpieza Las etiquetas actuarán completamente ajenas a cualquier desencadenante que les hayas agregado.

De hecho, no importa qué disparadores tengas o no equipados, se ignoran por completo si la etiqueta se usa como un configuración o limpieza. Por esta razón, podría ser prudente no usar configuración y limpieza Etiquetas para cualquier cosa excepto secuenciación, pero hay una manera de hacer que funcione en ambos sentidos (volveré a esto pronto).

Vuelvo a subrayar que se trata de un concepto difícil de comprender. Estoy seguro de que la UX/UI podría hacerse más intuitiva, pero la razón por la que es difícil es que depende de devoluciones de llamada, que son invisibles en el uso actual de GTM (a menos que comiences a depurar en un nivel realmente granular).

2. Las devoluciones de llamada

Todavía nos queda algo de teoría que cubrir antes de profundizar en las cuestiones prácticas.

En GTM, cada etiqueta tiene una devolución de llamada. Con las plantillas de etiquetas, estas devoluciones de llamada dependen de cómo funciona la etiqueta. Por ejemplo, la etiqueta de Google Analytics utiliza el hitDevolución de llamada función como devolución de llamada.

Entonces, cuando estableces un configuraciónpor ejemplo, el etiqueta principal no disparará hasta que onSuccess devolución de llamada de configuración es invocado. Con la plantilla de etiqueta de Google Analytics, el etiqueta será disparado sólo después del hitCallback del configuración se ejecuta exitosamente. De manera comparable, el limpieza no será despedido hasta que onSuccess devolución de llamada del etiqueta principal se llama.

¡Uf!

La otra devolución de llamada es onFailure. Esto se invoca en caso de que la etiqueta no se full correctamente. En la configuración de secuenciación de etiquetas, puede especificar que el etiqueta principal no debe disparar si configuración falla, o puede optar por ignorar la falla. Del mismo modo, puede especificar que el limpieza no debe disparar si etiqueta principal falla, o puedes, nuevamente, optar por ignorar la falla.

No tiene que preocuparse por estas devoluciones de llamada cuando utiliza plantillas de etiquetas. GTM se encarga de llamar onSuccess y onFailure para usted, y todo lo que necesita hacer es asegurarse de haber marcado las casillas correctas en la configuración (¡lo prometo, llegaremos a la configuración muy pronto!).

3. La etiqueta HTML personalizada

La excepción es la Etiqueta HTML personalizada. Dado que es posible que desee indicarle a Google Tag Supervisor que no pase a la siguiente etiqueta hasta que suceda algo (por ejemplo, se haya completado una operación asincrónica), se requiere una solución alternativa. Si vas al Variables incorporadasdeberías ver uno nuevo: ID HTML:

Esto se utiliza para invocar el onSuccess o onFailure devolución de llamada para la etiqueta HTML personalizada.

Por lo tanto, si desea utilizar una etiqueta HTML personalizada como configuración o el etiqueta principaly deseas establecer una secuencia con condiciones de éxito y/o fracaso, necesitarás lo siguiente:

  1. El ID HTML Variable incorporada

  2. El ID del contenedor Variable incorporada

  3. El Etiqueta HTML personalizada sí mismo

En el siguiente ejemplo de código, estoy ejecutando JavaScript personalizado y, una vez hecho, le informo a la secuencia que onSuccess ha sido llamado.

<script>
  (perform() {
    var gtm = window.google_tag_manager({{Container ID}});
    var el = doc.getElementById('content-head');
    strive {
      el.innerHTML = 'We've got taken over your web site!';
      gtm.onHtmlSuccess({{HTML ID}});
    } catch(e) {
      gtm.onHtmlFailure({{HTML ID}});
    }
  })();
script>

En la primera línea del script, copia una referencia a la interfaz del contenedor GTM en el archivo gtm variable. Esta es una interfaz muy específica para los mecanismos de GTM, así que no te preocupes demasiado por ella. Basta decir que esta referencia le permite pasar el onSuccess y onFailure devoluciones de llamada, por eso es importante aquí.

A continuación, hay un strive...catch bloque, donde se ejecuta un método DOM. Una vez completado, el onHtmlSuccess() Se invoca el método de la interfaz. El parámetro de este método es el nuevo. ID HTML Variable incorporada. De esta manera GTM podrá comunicar al siguiente miembro de la secuencia que fue precisamente este Etiqueta HTML personalizada specific que acaba de completarse.

Si hay un error, entonces el onHtmlFailure() Se invoca el método y se pasa información a la secuencia de que esta etiqueta no se completó correctamente.

A estas alturas ya no debería ser demasiado complicado entender lo que está pasando. Cada plantilla de etiqueta tiene una onSuccess y onFailure devolución de llamada, excepto para la etiqueta HTML personalizada, donde puede proporcionarlas usted mismo.

ACTUALIZACIÓN 23 de julio de 2018: Asegúrate de leer mi artículo sobre Etiquetas HTML personalizadas con secuenciación de etiquetas para obtener más detalles sobre cómo funcionan juntas las etiquetas HTML personalizadas y la secuenciación de etiquetas.

4. Cómo crear la secuencia

¡Finalmente! ¡Alguna información práctica!

bajo el Configuración avanzada De cada plantilla de Etiqueta, encontrarás tres nuevas opciones:

  1. Opciones de activación de etiquetas – Te permite delimitar la Etiqueta a disparar ya sea simplemente Una vez por evento, Una vez por páginao simplemente déjalo disparar Ilimitado veces.

  2. Secuenciación de etiquetas -> CONFIGURACIÓN – Le permite elegir la Etiqueta que debe completarse antes que la Etiqueta cuya configuración está editando actualmente. Puede especificar si el configuración debe completarse exitosamente, o si las fallas aún deberían hacer que esta etiqueta se energetic.

  3. Secuenciación de etiquetas -> LIMPIEZA – Le permite elegir la etiqueta que debe activarse después de que la etiqueta precise haya completado su ejecución. Nuevamente, puede especificar si la etiqueta precise debe completarse exitosamente o si su falla debe ignorarse y la limpieza debería disparar de todos modos.

Así es como se configura un Secuencia de etiquetas.

Ahora bien, al principio mencioné que la secuencia funciona de forma aislada. Esto significa que la configuración que establezca para cualquier etiqueta en specific ejecutará la secuencia independientemente de qué otros activadores haya adjuntado a la misma. configuración o limpieza. Esto también significa que una secuencia siempre está ligada al evento del etiqueta principal. Así, si el etiqueta principal se activa con el activador “Todas las páginas”, por ejemplo, entonces toda la secuencia se completará durante este evento.

Debido a que puedes usar una etiqueta tanto de forma independiente como como parte de una secuencia, la nueva Opciones de activación de etiquetas son muy útiles, por cierto. Por ejemplo, si tiene la Etiqueta A como configuración para algunas etiquetas, además de dispararse por sí solo, un disparador particular person, puede especificar que la etiqueta A solo debe dispararse Una vez por página para evitar que se envíen múltiples visitas. Esto significa simplemente que después de que se haya activado una vez, ya sea de forma independiente o como parte de una secuencia, no se volverá a activar mientras el usuario esté en la página.

También puedes especificar Una vez por eventolo que significa que la etiqueta solo se activará una vez para un determinado evento de capa de datos. Por lo tanto, es posible que la Etiqueta A se energetic en el activador “Todas las páginas” y también es posible que la tenga como limpieza de alguna etiqueta que también se activa con el activador “Todas las páginas”. Al utilizar el Una vez por evento configuración, la Etiqueta A solo se activará una vez durante el evento “Todas las páginas”.

5. Nota sobre el uso dataLayer.push() en la secuencia

Uno de los principales casos de uso de la secuenciación de etiquetas sería tener la configuración Etiqueta empujar algo hacia dataLayer para que la utilice la etiqueta principal.

¡Detengan sus caballos!

Si conoce su Administrador de etiquetas de Google, sabrá que la capa de datos disponible para cualquier etiqueta es fija para el duración del evento de capa de datos! Entonces, cualquier etiqueta que se energetic en la inicial dataLayer.push() sólo podrá acceder a los valores en este push. Si algún Tag intenta modificar los valores en la Capa de Datos, estos valores no serán registrados hasta que próximo dataLayer.push() con un evento.

(ACTUALIZAR: Algún tiempo después de escribir este artículo, el comportamiento de GTM cambió de modo que las variables se resuelven por separado para cada etiqueta en una secuencia. Esto significa que tu no necesito usar google_tag_manager(...).dataLayer.get() si desea recuperar una variable que cambió de una etiqueta en la secuencia a la siguiente. En su lugar, puede utilizar las variables habituales del Administrador de etiquetas de Google, ya que sus valores se actualizarán para cada etiqueta de la secuencia).

Esto dificulta un poco el desarrollo, ya que parece que dataLayer no se puede utilizar como medio de mensajería dentro de una secuencia, ya que toda la secuencia opera en el transcurso de un único evento de capa de datos (el que activó la etiqueta principal en primer lugar).

El guía para desarrolladores en realidad tiene una nota sobre esto:

Sin embargo, al momento de escribir esto, dataLayer.set() no existe. Pregunté a los desarrolladores y esto parece ser un error en la guía. En su lugar, debe utilizar el siguiente comando para colocar valores en la capa de datos incluso durante la secuencia de etiquetas:

// To set a worth, use set() with the important thing as the primary parameter, and worth because the second
google_tag_manager({{Container ID}}).dataLayer.set('someKey', 'someValue');

Una vez que use esto, cualquier etiqueta que se energetic después de esta (en la misma secuencia) tendrá su referencia de variable de capa de datos a alguna clave actualizado para regresar algún valor.

Si desea recuperar este valor modificado en el mismo Etiqueta en la que se cambió, no puede usar una variable de capa de datos, ya que se resuelve antes de que se ejecute la etiqueta (y la set() se ejecuta el comando). Necesitará utilizar esta sintaxis en su lugar:

// To get a worth, use get() with the important thing because the parameter
google_tag_manager({{Container ID}}).dataLayer.get('someKey');

Recuerde habilitar el ID del contenedor ¡Variable incorporada!

Estos son casos de uso bastante avanzados, pero es muy bueno tener esto en cuenta cuando se trabaja con secuencias de etiquetas cuyo ámbito es un único evento de capa de datos.

6. ¿Por qué utilizar la secuenciación de etiquetas?

La carga asincrónica de JavaScript se da por sentada hoy en día. Es una buena manera para que los navegadores garanticen una experiencia de navegación decente incluso con recursos vinculados grandes y voluminosos.

Sin embargo, JavaScript asincrónico dificulta el establecimiento ordenya que no se puede predecir cuándo terminará de cargarse algún script o biblioteca. El orden se introduce con devoluciones de llamada o promesaspero estos son conceptos difíciles de manejar y la interfaz de usuario de Google Tag Supervisor no necesariamente le permite aprovecharlos, especialmente si usa plantillas.

La secuenciación le permite aprovechar las devoluciones de llamada que GTM establece de forma predeterminada (las plantillas de etiquetas) o que usted crea manualmente (etiquetas HTML personalizadas). Le permite encadenar etiquetas, lo cual es particularmente útil si desea establecer dependencias.

Related Post

Deja un comentario

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