Activar una sola etiqueta varias veces en GTM

Puede haber muchas razones por las que desearías activar una sola etiqueta varias veces al mismo tiempo. Administrador de etiquetas de Google. El más común es cuando desea implementar múltiples puntos de seguimiento en la internet. Quizás tenga una cuenta acumulada a la que desee enviar las visitas, además de la propiedad de seguimiento específica del sitio.

Hace bastante tiempo, yo dio una solucion para esto con un enfoque específico en Google Analytics Etiquetas. Aprovechó el hitDevolución de llamada característica de la biblioteca Common Analytics al aumentar un contador world cada vez que se activa una etiqueta. Esta solución tenía varios inconvenientes: period específica de GA, contaminaba el espacio de nombres world y requería una configuración única para cada etiqueta que deseaba activar.

Poco después de esto, comencé a hacer todo de una manera diferente. Una forma mucho más duradera, sensata y robusta, y en este artículo quiero abrir el método. De hecho, no es sólo a mí ¿Quién quiere presentar esto? Este artículo es una colaboración con Marco Wekking de imprudentemente. Se acercó a mí con casi exactamente la misma solución y me pidió una revisión. En lugar de revisar, le pregunté si le gustaría contribuir a algún tipo de colaboración en esta publicación, y aceptó elegantemente. Entonces, gran parte de esta publicación es de la pluma de Marco, con mi típico mal humor y algunas travesuras de JavaScript entrelazadas en la retórica.

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.

como funciona

El diagrama hábilmente injertado de arriba muestra cómo funciona la solución. Cada evento que pasa por dataLayer se duplica añadiéndole el sufijo .first y .second. De esta manera, todas las etiquetas que desee activar dos veces por evento solo deben modificarse para usar el nombre del evento authentic más los dos sufijos. Incluso puede utilizar esto en una tabla de búsqueda para activar las visitas a diferentes propiedades de seguimiento de Google Analytics, por ejemplo.

Es una solución easy y elegante a un problema urgente que, en mi opinión, la plataforma debería manejar de forma nativa. Este es un caso de uso muy común para muchas personas; sería de gran ayuda si pudiera indicar múltiples ciclos para cada etiqueta usando la configuración de la plantilla de etiquetas en lugar de tener que recurrir a trucos como este.

como hacerlo

La solución consta de tres pasos:

1. Crear un nuevo activador de evento personalizado

2. Cree la etiqueta HTML personalizada que gestiona la duplicación.

3. Crear nuevos desencadenadores

Lo concluiremos con un ejemplo de cómo aprovechar esto al activar varias propiedades de Google Analytics. Así que estad atentos.

1. Cree el activador de evento personalizado

Para activar la etiqueta HTML personalizada, necesitaremos un activador que se energetic en cada evento. ¿Por qué? ¡Porque queremos duplicar cada evento! Sólo hay una excepción: no queremos activar el activador cuando se introducen los eventos de duplicación reales. dataLayero podríamos encontrarnos en un bucle infinito. Ontológicamente fascinante, pero no genial cuando se trata del rendimiento del sitio.

Antes de crear el disparador, asegúrese de tener el Evento Variable incorporada marcada en la ranura apropiada de la página Variables en su contenedor.

Esto es necesario para que el Set off funcione.

A continuación, cree un activador que coincida con todos los eventos excepto los duplicados. En este ejemplo, estamos usando el genérico .first y .second como los sufijos, pero nada te impide usar algo más descriptivo, por ejemplo .Nation y .Rollup.

Para reiterar: La excepción es importante! Si no agrega esa condición Disparo activado, tendrá problemas, ya que el Disparador se disparará una y otra vez con cada ciclo de duplicación. Sí, podrías usar el Opciones de activación de etiquetas característica de las plantillas de etiquetas, pero es mejor cortar el mal comportamiento de raíz.

2. Cree la etiqueta HTML personalizada

La etiqueta HTML personalizada es el corazón y el alma de esta solución. Es muy sencillo, pero tiene algunas peculiaridades que pueden sorprender si no estás familiarizado con el funcionamiento de GTM.

En realidad, para garantizar que una de estas funciones especiales funcione como debería, deberá activar otra variable incorporada: ID de contenedor. Esto devuelve, sorpresa, la identificación pública del contenedor GTM en el que se activa la etiqueta (GTM-XXXX).

Cree una nueva etiqueta HTML personalizada y agregue el siguiente código dentro:

<script>
  (perform() {
    var occasion = {{Occasion}};
    var gtm = google_tag_manager({{Container ID}});

    window.dataLayer.push({
      'occasion' : occasion + '.first'
    });
    window.dataLayer.push({
      'occasion' : occasion + '.second',
      'eventCallback' : perform() { gtm.onHtmlSuccess(); }
    });
  })();
script>

Estamos envolviendo todo en un IFE ya que queremos evitar contaminar el espacio de nombres world. A continuación, asignaremos una variable native. occasion con cualquier valor que esté actualmente almacenado en el Evento variable (es decir, el evento que se envió en primer lugar).

Finalmente, estamos haciendo dos consecutivo dataLayer.push() comandos, uno para cada iteración del ciclo. Si desea agregar más eventos allí, sea mi invitado. Hasta donde sabemos, no hay límite en la cantidad de eventos en los que puedes participar. dataLayer Por aquí.

Este último impulso incluye el especial eventCallback clave (leer más al respecto aquí). La clave contiene una función de devolución de llamada que se invoca tan pronto como las etiquetas que se activan en esta pulsación en specific han señalado su terminación. Dentro de esta devolución de llamada, estamos usando el onHtmlSuccess() Característica de la interfaz de GTM. Esto es algo que fue expuesto para uso público con el Secuenciación de etiquetas característica. Lo único que necesita saber al respecto es que es nuestra forma de decirle a GTM que ahora puede continuar con lo que estaba sucediendo antes de este ciclo de dataLayer.push() comandos.

En otras palabras, si estás duplicando un Haga clic/solo enlacesy tienes marcada “Esperar etiquetas” (lo que significa que el activador esperará a que se activen todas las etiquetas dependientes antes de continuar con la acción predeterminada del enlace), el proceso es algo como esto:

1. El activador de clic en el enlace activa esta etiqueta HTML personalizada.

2. La etiqueta HTML personalizada envía el primer evento duplicado y cualquier etiqueta que la utilice comienza su ejecución.

3. Inmediatamente después, la etiqueta HTML personalizada envía el segundo evento duplicado y cualquier etiqueta que lo utilice comienza su ejecución.

4. Una vez que el último Tag que se activa en el segundo impulso duplicado señala su finalización, el eventCallback Se invoca la devolución de llamada y la etiqueta HTML personalizada le indica al activador de clic en el enlace que todo está hecho, permitiéndole continuar con la redirección.

Ahora, agregue el activador que creó en el paso anterior a esta etiqueta y estará listo para duplicar. Puede obtener una vista previa de esto para ver qué sucede en su capa de datos con cada evento.

Como puede ver, cada evento está duplicado. Ahí está el Vista de páginaseguido de sus duplicados: gtm.js.primero y gtm.js.segundo. hay Listo para DOMseguido de sus duplicados: gtm.dom.primero y gtm.dom.segundoetcétera.

(Si no comprende qué tienen que ver “Pageview” y “gtm.js” entre sí, este último es la representación de evento subyacente del primero. Más información en mi Guía de disparo.)

3. Crea nuevos activadores

El único problema de limpieza que necesitará con esta solución es con los Triggers. Así es como debería funcionar:

• Para duplicar un disparador, necesita un disparador “base” del tipo de evento que se activa sin condiciones delimitadoras. Este es el evento que se duplica.

• Para activar sus etiquetas duplicadas, deberá utilizar activadores de eventos personalizados que utilicen el nombre del evento authentic (p. ej. gtm.linkHaga clic) más .primero o .segundotodo envuelto en una easy expresión common.

En otras palabras, estamos retrocediendo a cómo solía funcionar GTM antes de que se activara el evento automático. estamos creando oyentes utilizando los activadores de eventos genéricos, y cuando estos se duplican, los activadores de eventos personalizados se utilizan para delimitar las etiquetas que se activarán solo cuando existan condiciones específicas.

¡NOTA! No es necesario crear un activador “base” para el tipo de evento Vista de página. Esto se debe a que “Página vista”, “DOM listo” y “Ventana cargada” se insertan automáticamente en dataLayer a medida que se cargan la página y GTM. En otras palabras, se duplican automáticamente y usted sólo necesita concentrarse en crear los activadores de eventos personalizados.

Mire la siguiente ilustración para mayor claridad:

Acerquémonos. Si tiene un activador de “Enlaces salientes”, que se activa cuando la URL de clic no es su propio nombre de host, el activador duplicado se vería así:

Tome nota del campo “Nombre del evento”. Así es como debería verse para tus Triggers. Con nombres de eventos personalizados es fácil, ya que eres tú quien los empuja hacia dataLayer en primer lugar. Con los activadores integrados puede que sea un poco más difícil, así que aquí tienes una hoja de trucos:

Asegúrate de tener el fuego encendido condición en el Activador de evento personalizadoya que no lo necesita en el evento genérico Set off. Si lo pierdes desde el activador de evento personalizado, sin darte cuenta activarás la etiqueta siempre que cualquier dicho evento se detecta en la página. Por ejemplo, si hubiéramos omitido el Haga clic en URL Nombre de host Condición del ejemplo anterior, la etiqueta de enlaces salientes se activará cada vez que el evento de clic en el enlace se inserte en dataLayer.

BONIFICACIÓN: Utilice ID de seguimiento variable

Aquí tienes un consejo directo de Marco. Para crear una variable que envíe un ID de seguimiento de Common Analytics diferente según el ciclo del bucle de duplicación que esté actualmente activo, utilice lo siguiente Variable de JavaScript personalizada:

perform() {
  
  var occasion = {{Occasion}};
  
  var regexFirst = /.first$/;
  var regexSecond = /.second$/;
  
  if (regexFirst.check(occasion)) {
    return "UA-XXXXXXXX-1";
  } else if (regexSecond.check(occasion)) {
    return "UA-XXXXXXXX-2";
  }

  // Do one thing in case neither matches

}

Esto devuelve el código UA “UA-XXXXXXXX-1” si la etiqueta se activa en el primer ciclo del ciclo de duplicación, y “UA-XXXXXXXX-2” si está en el segundo. Es posible que desee configurar algún tipo de valor de retorno predeterminado o alternativo en caso de que ninguno coincida.

Descripción normal y resumen

Si bien la solución funciona para todo tipo de etiquetas y crea menos redundancia en muchas configuraciones, tiene sus propios inconvenientes.

Primero, infla el número de dataLayer eventos significativamente. Una configuración sencilla con sólo dos eventos (vista de página y clics en enlaces salientes) ya triplica la cantidad. Tenga en cuenta que esto realmente no tiene ningún impacto en el rendimiento. dataLayer es solo un bus de mensajes utilizado por Google Tag Supervisor modelo de datos internos. Cada vez que GTM necesita acceder a la “Capa de datos”, en realidad simplemente realiza una búsqueda en su propio modelo de datos, por lo que el tamaño de dataLayer es intrascendente aquí.

En segundo lugar, requiere un enfoque diferente y probablemente más difícil para los factores desencadenantes. Todas las etiquetas deben estar vinculadas a activadores de eventos personalizados en lugar de a los tipos de activadores integrados a los que quizás esté acostumbrado. Si estuvo presente durante la versión anterior de GTM, es posible que esté familiarizado con la configuración, ya que se parece a cómo se hacían las cosas con la antigua configuración de seguimiento automático de eventos. Sin embargo, cuando realmente lo masticas, lo único que estás haciendo en realidad es crear uno Activador adicional por tipo de evento y pasar de los tipos de disparador integrados a Activadores de eventos personalizados.

Finalmente, las condiciones de activación se vuelven más críticas ya que pueden provocar bucles infinitos o etiquetas que se activan en situaciones incorrectas. Si bien estos accidentes no deberían causar un arrepentimiento infinito (suponiendo que realice la prueba antes de publicar), sigue siendo otra dificultad con la que debe lidiar.

Una cosa que podría preocuparle es si todas las variables completadas con el activador base inicial todavía están disponibles cuando se activan los activadores de eventos personalizados duplicados. Por ejemplo, es posible que necesite el Haga clic en URL Variable, y ahora le preocupa que no esté disponible cuando se activen los activadores duplicados. ¡No te preocupes! GTM persiste los valores de las variables hasta que se sobrescriben o se descarga o actualiza una página. Entonces, a menos que estés anulando manualmente los valores de la capa de datos completados por los activadores de eventos automáticos de GTM, todo debería estar bien.

Bueno, es posible que hayamos exagerado la simplicidad y elegancia de la configuración, pero la thought de interceptar cada evento y duplicarlo es mucho más accesible que la compleja configuración hitCallback utilizada antes.

Quiero agradecer a Marco por poner este enfoque por escrito, y la mayor parte del contenido de este artículo proviene de su pluma, editado para adaptarse al estilo despreocupado de este weblog. Cualquier error, error fáctico o propaganda radicalista hábilmente oculta en el espacio en blanco es únicamente culpa mía, Simo, y asumo toda la responsabilidad por todos los levantamientos que inevitablemente seguirán.