Uno de los desafíos de trabajar con Administrador de etiquetas de Google (o cualquier plataforma basada en JavaScript) es qué hacer con condiciones de carrera. A condición de carrera surge cuando tienes dos recursos compitiendo por su ejecución en el navegador y hay un grado de imprevisibilidad sobre cuál “gana” la carrera.
Un buen ejemplo es trabajar con jQueryEs una de las bibliotecas de JavaScript más populares y los sitios internet la utilizan para una multitud de cosas, muchas de ellas útiles también para Google Tag Supervisor. Por ejemplo, jQuery trivializa solicitudes HTTP asincrónicas y Travesía del DOMambos pueden causar dolores de cabeza a los usuarios de GTM.
Sin embargo, dado que jQuery a menudo se descarga, y debería descargarse, de forma asincrónica, existe el riesgo de que jQuery aún no se ha cargado cuando GTM comienza a ejecutar sus etiquetas. Por lo tanto, necesitamos algún mecanismo que permita a Google Tag Supervisor saber cuándo un recurso descargado o solicitado de forma asincrónica está disponible.
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!
Consejo 66: Agregue un detector de carga a los elementos del script
Hay dos formas de hacerlo. La primera es utilizar un Etiqueta HTML personalizaday luego dispara un dataLayer.push() una vez que el recurso se haya cargado por completo. La segunda forma es usar secuenciación de etiquetase indique a GTM que la etiqueta de configuración (donde se carga el script) se ha completado mediante el uso interno onHtmlSuccess() método. Pero me estoy adelantando.
dataLayer.push() en la devolución de llamada del oyente de carga
El primer método es crear un Etiqueta HTML personalizada que se activa lo antes posible. Por lo tanto, querrá agregar el Todas las páginas disparador para que se energetic tan pronto como se haya cargado el contenedor GTM.
En este punto es importante que no Cargue el script simplemente agregando el en la etiqueta HTML personalizada. En su lugar, introduciremos un management adicional mediante el uso de JavaScript para crear el elemento, agregarle el detector e inyectarlo manualmente en la página. Puede utilizar el onload Atribuir directamente en el elemento, pero el riesgo aquí es que sobrescriba cualquier atributo existente. onload atributo. Al utilizar métodos de manipulación del DOM de JavaScript, no alterará ningún oyente preexistente.
<script>
(perform() {
var el = doc.createElement('script');
el.src = 'https://code.jquery.com/jquery-3.2.1.js';
el.async = 'true';
el.addEventListener('load', perform() {
window.dataLayer.push({
occasion: 'jQueryLoaded'
});
});
doc.head.appendChild(el);
})();
script>Cuando GTM ejecuta esta etiqueta HTML personalizada, el navegador crea una solicitud asincrónica para descargar el jquery-3.2.1.js desde la CDN (Pink de distribución de contenido). Una vez finalizado este proceso asincrónico, se genera un dataLayer.push({occasion: 'jQueryLoaded'}) incendios, y luego puedes construir un Activador de evento personalizado para que este nombre de evento energetic cualquier etiqueta que dependa de que jQuery se haya cargado.
Uso de secuenciación de etiquetas
Si solo tiene una etiqueta que necesita el recurso descargado de forma asincrónica, una forma bastante elegante de hacerlo sería con secuenciación de etiquetasCon la secuenciación de etiquetas, crearías una Etiqueta HTML personalizada para este código y agréguelo como Etiqueta de configuración en la secuencia. La lógica es que la solicitud asincrónica se ejecuta en la etiqueta de configuración y, una vez que se completa, la etiqueta principal puede activarse con la confianza de que el recurso del que depende se ha cargado por completo.
Así es como se vería la etiqueta HTML personalizada para la etiqueta de configuración:
<script>
(perform() {
var el = doc.createElement('script');
el.src = 'https://code.jquery.com/jquery-3.2.1.js';
el.async = 'true';
el.addEventListener('load', perform() {
window.google_tag_manager({{Container ID}}).onHtmlSuccess({{HTML ID}});
});
doc.head.appendChild(el);
})();
script>Tenga en cuenta que para que esto funcione, debe habilitar la Variables incorporadas Identificación del contenedor y Identificación HTML.
El misterioso window.google_tag_manager().onHtmlSuccess() El método es una función interna que debes usar en la secuenciación de etiquetas si quieres que GTM espere a que se ejecute algún código (por ejemplo, devoluciones de llamadas asincrónicas) antes de pasar de la etiqueta de configuración a la etiqueta principal. Si no tuvieras este fragmento de código aquí, GTM simplemente saltaría directamente a la etiqueta principal después de ejecutar la última línea de la etiqueta de configuración y, en ese caso, es muy posible que jQuery aún no se haya descargado por completo.
Resumen
Estos dos métodos se pueden utilizar para obtener lo mejor de ambos mundos: solicitudes asincrónicas CON previsibilidad. Las condiciones de carrera pueden ser brutales y difíciles de identificar. Solo cuando comience a registrar errores de JavaScript podrá notar un aumento en los mensajes de error como jQuery shouldn't be outlinedEsta es una señal de que podrías estar intentando usar un recurso antes de que se haya cargado por completo. load El oyente es una forma práctica de combatir esto.