Secuenciación de etiquetas Fue presentado a Administrador de etiquetas de Google a finales de 2015. Su principal objetivo period facilitar la secuencial activación de etiquetas que tienen dependencias entre sí. Debido a la asincrónico Debido a la naturaleza de las bibliotecas de terceros como Google Tag Supervisor, es difícil establecer un orden de finalización con etiquetas que compiten por su oportunidad de activarse.
La secuenciación de etiquetas cambió esto, ya que le permite establecer configuración y limpieza etiquetas – el ex despido antes la etiqueta principal y la última después.
Configurar la secuencia de etiquetas es relativamente fácil, al menos una vez que comprende cómo funciona. Sin embargo, las etiquetas HTML personalizadas tienen un comportamiento excepcional, ya que debe utilizar ciertos comandos específicos para indicar la secuencia una vez que la etiqueta HTML personalizada haya completado su ejecución. #ConsejosGTMT El artículo tiene como objetivo guiarlo en la configuración de etiquetas HTML personalizadas en una secuencia de etiquetas.
incógnita
El boletín informativo de Simmer
Suscríbete a la Boletín informativo de Simmer ¡Para recibir las últimas noticias y contenidos de Simo Ahava en tu bandeja de entrada de correo electrónico!
Lección 1: La secuencia se gestiona con las devoluciones de llamadas de éxito y error
Las dos devoluciones de llamada, onHtmlSuccess() y onHtmlFailure() En realidad, la secuenciación de etiquetas con etiquetas HTML personalizadas gira en torno a ellas. La primera se utiliza para indicar un lugar en el código cuando el código ha terminado de ejecutarse. exitosamentey la ejecución puede pasar a la siguiente etiqueta en la secuencia. La segunda se utiliza para indicar cuándo una falla sucede, y aquí la ejecución también se pasa a la siguiente etiqueta en la secuencia a menos que Tiene el alternar falla en:
Sólo para recapitular (pero asegúrese de leer Mi guía para un tratamiento más exhaustivo), aquí se muestra cómo configurar una etiqueta HTML personalizada regular en una secuencia de etiquetas, donde ambas éxito y falla Se establecen criterios.
¡NOTA! Recuerde habilitar la Identificación del contenedor y Identificación HTML variables incorporadas para esto.
(operate() {
var gtm = window.google_tag_manager({{Container ID}}); // Required
window('one thing') = getSomethingElse();
if (typeof window('one thing') !== 'undefined') {
gtm.onHtmlSuccess({{HTML ID}}); // Success, transfer to subsequent tag
} else {
gtm.onHtmlFailure({{HTML ID}}); // Failure, transfer to subsequent tag until it has failure toggle on
}
})();
Lección 2: Las devoluciones de llamadas de éxito y fracaso no siempre son necesarias
Aquí hay algo que creo que la mayoría de las guías han pasado por alto: no es necesario necesidad onHtmlSuccess() y onHtmlFailure() ¡En su etiqueta HTML personalizada! El navegador internet ejecuta todo el código que encuentra en una etiqueta HTML personalizada de arriba a abajo antes de pasar al siguiente elemento de la secuencia.
Por ejemplo, si ha configurado el Píxel de Fb Con etiquetas HTML personalizadas, no es necesario onHtmlSuccess() en la etiqueta de píxel base.
!operate(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=operate(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.model='2.0';n.queue=();t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)(0);s.parentNode.insertBefore(t,s)}(window,
doc,'script','https://join.fb.web/en_US/fbevents.js');
fbq('init', {{Fb Pixel ID}});
// The next line is NOT vital:
// window.google_tag_manager({{Container ID}}).onHtmlSuccess({{HTML ID}});
¿Por qué no es necesaria la última línea? Porque GTM pasaría la ejecución a la siguiente etiqueta En todo caso Cuando llega a la última línea de esta etiqueta, el navegador internet ejecuta el código de manera sincrónica: no hay forma de que se detenga en medio de esta etiqueta y comience a trabajar en la siguiente.
Así que la lección es:
Si tiene un código que siempre se ejecuta de arriba a abajo antes de pasar a la siguiente etiqueta, no necesita onHtmlSuccess() y onHtmlFailure().
Pero, y siempre hay un “pero”, también querrás revisar la siguiente lección.
Lección 3: Si tienes onHtmlFailure()siempre querrás tener onHtmlSuccess()también
Si utilizas onHtmlFailure() para señalar que en algún punto del código se encuentra un error y la secuencia debe no Continúe con la siguiente etiqueta (ya que tiene activada la opción de falla), también debe agregar onHtmlSuccess() En algún lugar del código.
Esto se debe a que cuando se utiliza la devolución de llamada de error, GTM ya no pasará automáticamente a la siguiente etiqueta cuando llegue a la última línea de la etiqueta HTML personalizada, incluso si tiene desactivada la opción de error. onHtmlFailure()le estás diciendo a Google Tag Supervisor que espere a que onHtmlFailure() o onHtmlSuccess() antes de decidir si pasar a la siguiente etiqueta.
(operate() {
var gtm = window.google_tag_manager({{Container ID}});
if (true) {
console.log('Labored!');
} else {
gtm.onHtmlFailure({{HTML ID}});
}
})();
En el ejemplo anterior, la secuencia será nunca Proceda a la siguiente etiqueta. Tiene onHtmlFailure() cual es nunca se reunió (porque true es siempre true), pero no tienes onHtmlSuccess() En cualquier lugar. Por lo tanto, solo se ejecuta esta primera etiqueta y la secuencia nunca continúa.
Esta es una forma de hacerlo quería trabajar:
if (true) {
console.log('Labored');
gtm.onHtmlSuccess({{HTML ID}});
} else {
gtm.onHtmlFailure({{HTML ID}});
}
Esto también funcionaría (aunque no es un buen patrón) si la siguiente etiqueta en la secuencia tuviera la opción de falla desactivada:
if (true) {
console.log('Labored');
gtm.onHtmlFailure({{HTML ID}});
} else {
gtm.onHtmlFailure({{HTML ID}});
}
Y dado que es un código sincrónico, puedes omitir ambas devoluciones de llamadas y la secuencia continuará normalmente después del registro. Labored A la consola también en este caso:
(operate() {
if (true) {
console.log('Labored');
}
})();
Lección 4: Las devoluciones de llamadas funcionan mejor en operaciones asincrónicas
En mi opinión, la objetivo El objetivo de la secuenciación de etiquetas es establecer un orden cuando la etiqueta anterior tiene una operación asincrónica. En otras palabras, se desea que el navegador espere a que se full la operación antes de indicarle a la siguiente etiqueta que comience a ejecutarse.
Por ejemplo, aquí cargamos el jQuery biblioteca de forma asincrónica, esperando a que se haya cargado completamente antes de pasar a la siguiente etiqueta:
(operate() {
var gtm = window.google_tag_manager({{Container ID}});
var el = doc.createElement('script');
el.async = true;
el.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js';
el.addEventListener('load', operate() {
gtm.onHtmlSuccess({{HTML ID}});
});
doc.head.appendChild(el);
})();
Como se puede ver, onHtmlSuccess() está incrustado en la devolución de llamada del load oyenteque se invoca solo después de que la biblioteca se haya descargado y el navegador haya ejecutado el código que contiene.
Resumen
Trabajar con etiquetas HTML personalizadas en una secuencia de etiquetas tiene algunas trampas Debes tenerlo en cuenta, pero en realidad hay muy pocos cambios que cambien el juego. El mayor “error” que veo que comete la gente es agregar el onHtmlSuccess() devolución de llamada al remaining de un bloque de código ejecutado sincrónicamente: esto no es necesario A menos que tengas onHtmlFailure() En algún lugar del código, también..
Espero que este artículo haya aclarado cómo funcionan juntas las etiquetas HTML personalizadas y la secuenciación de etiquetas.
¡Déjame saber en los comentarios si tienes más preguntas!