El jQuery La biblioteca de JavaScript es, en casi todos los sentidos, una herramienta de conteo. La biblioteca de JavaScript más fashionable Se utiliza en sitios internet de todo el mundo. De hecho, es tan influyente que su evolución está estrechamente ligada al esfuerzo de estandarización de JavaScript y es una parte integral de la Fundación JS esfuerzos para construir una comunidad para desarrolladores de JavaScript.
Administrador de etiquetas de Googlede manera comparable, es el más sistema de gestión de etiquetas fashionable Se utiliza en sitios internet a nivel mundial. Por lo tanto, debido a la débil correlación, tiene sentido esperar cierta sinergia entre ambos.
En este artículo, quiero explorar la relación entre las dos herramientas. Ambas tienen un propósito comparable: abstracción y facilitación de haciendo cosas con JavaScript en una página internet. También quiero disipar un mito sobre que Google Tag Supervisor incluye jQuery de forma nativa y quiero explorar cuándo podría tener sentido no para utilizar jQuery.
X
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!
No, Google Tag Supervisor no viene incluido con la biblioteca jQuery
Algunas personas han echado un vistazo a las profundidades de la gtm.js biblioteca descargada por el navegador cuando el fragmento de contenedor Se ejecuta. Esta biblioteca contiene el contenedor GTM en todo su esplendor. Dentro del código JavaScript minimizado y ofuscado, los ojos avispados pueden encontrar el siguiente comentario:
Este comentario podría tentarte a pensar que GTM incluye la biblioteca jQuery completa dentro del contenedor JavaScript.
No lo hace.
El comentario está ahí porque Google Tag Supervisor utiliza un método que está fuertemente inspirado en una funcionalidad comparable de la biblioteca jQuery. Puedes encontrar la fuente de esto en ayudante de capa de datos Proyecto de GitHub, donde el is_plain_object.js Contiene la explicación de por qué hay un aviso de licencia como éste:
Por cierto, el ayudante de capa de datos El proyecto es una excelente manera de familiarizarse con el funcionamiento de GTM. modelo de datos internos ¡obras!
Comprueba si jQuery ya se está ejecutando
Es possible que tu sitio ya esté ejecutando jQuery. Puedes probarlo abriendo el Consola de JavaScript en tus navegador internet favoritoUna vez abierta la consola, escribe el siguiente texto y pulsa enter:
typeof window.jQuery !== 'undefined' ? console.log(window.jQuery.fn.jquery) : 'jQuery not discovered!'
Si su sitio ejecuta jQuery, verá el número de versión en la consola. Si su sitio ejecuta jQuery, verá el número de versión en la consola. no Al ejecutar jQuery, verá el texto: jQuery not discovered!.
Si se encontró jQuery, puedes tentativamente Úselo en sus etiquetas HTML personalizadas y en sus variables JavaScript personalizadas.
Sin embargo, jQuery está (o al menos debería estar) cargado. asincrónicamentelo que significa que puede haber una condición de carrera en la que intentes llamar a sus métodos usando GTM antes de que la biblioteca jQuery se haya cargado. Por lo tanto, siempre que quieras usar jQuery, debes protegerlo con algunas medidas de seguridad.
Utilice jQuery de forma segura
Básicamente, si quieres usar jQuery, siempre debes verificar si se ha inicializado con algo como esto:
if (typeof window.jQuery !== 'undefined') {
// Do one thing with jQuery
} else {
// Fallback in case jQuery hasn't been loaded
}
Si se encuentra jQuery, puedes usarlo a voluntad, y si no se encuentra, el else El bloque es la alternativa que utilizará en estos casos. A continuación, se muestra un ejemplo:
perform() {
var el = {{Click on Aspect}};
if (typeof window.jQuery !== 'undefined') {
return window.jQuery(el).discover('h1').textual content();
} else {
return el.querySelector('h1').textContent;
}
}
El código en el if bloque y el código en el else Los bloques son esencialmente Lo mismo, aunque jQuery tiene algunos beneficios, como asegurarse de que textual content() devuelve el contenido del texto independientemente del tipo y la versión del navegador.
Cargar jQuery mediante Google Tag Supervisor
Si tu sitio no utiliza jQuery y aun así quieres aprovecharlo, siempre puedes cargarlo en una etiqueta HTML personalizada.
Primero, Discuta esto con sus desarrolladoresjQuery puede generar bastante volumen en la página y los desarrolladores podrían haber tenido una buena razón para no usar jQuery en absoluto. Es posible que usen otra biblioteca que tenga la misma funcionalidad.
La mejor manera de cargar jQuery es usar una etiqueta HTML personalizada en un secuencia de etiquetas con cualquier etiqueta que tenga que pueda necesitar usar jQuery.
Comencemos con el aspecto que tiene la etiqueta HTML personalizada:
<script>
(perform() {
var el = doc.createElement('script');
el.src = 'https://code.jquery.com/jquery-3.3.1.min.js';
el.async = true;
el.addEventListener('load', perform() { window.google_tag_manager({{Container ID}}).onHtmlSuccess({{HTML ID}})});
el.addEventListener('error', perform() { window.google_tag_manager({{Container ID}}).onHtmlFailure({{HTML ID}})});
doc.head.appendChild(el);
})();
script>Necesitarás habilitar la Identificación del contenedor y Identificación HTML variables incorporadas Para esto. Hazlo no Añade cualquier disparador a esta etiqueta.
Básicamente, creas un asincrónico Solicitud de carga de la biblioteca jQuery desde la propia CDN (purple de distribución de contenido) de jQuery. Como es asíncrono, también se agrega un load oyente, que se activa cuando la biblioteca se ha cargado correctamente, y un error oyente, que se activa si la biblioteca no se pudo cargar debido a un error.
No es perfecto, ya que a veces el hecho de que la biblioteca se haya cargado no significa que haya logrado ejecutarse correctamente (si hay conflictos en el espacio de nombres world de la página, por ejemplo), y no siempre se genera un error si la biblioteca no se carga.
Una vez que haya creado esa etiqueta HTML personalizada, desplácese hacia abajo hasta su Ajustes avanzadosy fijó su Opciones de activación de etiquetas a Una vez por página.
Esto se debe a que, independientemente de cuántas secuencias de etiquetas contenga, solo desea cargar la biblioteca jQuery una vez por página.
A continuación, debe abrir todas las etiquetas que necesitan jQuery, desplácese hacia abajo hasta su Ajustes avanzadosy agregue el cargador jQuery como un configuración etiqueta en la secuencia:
Si desea bloquear la etiqueta para que no se ejecute en caso de que jQuery No carga, puedes marcar la casilla “No disparar” tag si setup_tag falla o está en pausa”. Pero esto es un poco drástico. En su lugar, es posible que desee simplemente ver el consejo del capítulo anterior para ejecutar una alternativa en caso de que no se encuentre jQuery.
Quiero repetir lo que escribí arriba: Habla primero con tus desarrolladoresjQuery no es muy grande, pero aún así es un poco pesado si solo lo necesitas para unas pocas cosas. Lo que me lleva al siguiente punto.
No siempre tienes que usar jQuery
Echa un vistazo a este maravilloso sitio internet: Es posible que no necesites jQueryEs un servicio que te ayuda a reescribir métodos jQuery usando JavaScript básico.
Si solo necesita jQuery para unas pocas cosas, quizás sea mejor usar métodos nativos de JavaScript en lugar de cargar una biblioteca entera para realizar tareas simples.
Cómo escribir una solicitud HTTP POST con y sin jQuery
Aquí están mis propias reglas generales personales:
-
Si el sitio ya carga la biblioteca jQueryÚselo a voluntad. Solo asegúrese de evitar condiciones de carrera si jQuery se carga de forma asincrónica (como debería).
-
Si el sitio no está ejecutando jQueryanaliza la complejidad de las tareas que deseas realizar. Si solo necesitas realizar recorridos DOM simples o solicitudes HTTP triviales, considera usar JavaScript nativo en lugar de cargar la biblioteca.
-
Si debes cargar jQueryusar una reciente, minimizado Versión de la biblioteca. Cargarla asincrónicamentey use secuenciación de etiquetas para garantizar que la dependencia se haya cargado antes de que la utilice la etiqueta principal.
Resumen
jQuery es una gran herramienta para el desarrollo internet. Hay una razón por la que es la biblioteca de JavaScript más fashionable en la internet.
Sin embargo, JavaScript nativo también es espectacularmente útil, incluso si es necesario escribir algunos caracteres adicionales en comparación con los métodos auxiliares de jQuery.
Siempre he intentado evitar el uso de jQuery o, en realidad, de cualquier biblioteca auxiliar porque creo que es importante entender cómo funciona el motor JavaScript subyacente en el navegador. Si siempre usas jQuery, fácilmente ignorarás aspectos como los matices de la compatibilidad con el navegador, la optimización del rendimiento y cómo escribir código bueno y legible en common.
Related a Google Tag Supervisor, jQuery es una gran herramienta, pero debes ganar El derecho a usarlo entendiendo cómo funciona en la página internet. La ignorancia de lo que realmente hace jQuery puede llevar a resultados catastróficos, cuando escribes código crítico para el negocio en tus etiquetas, confías en una versión obsoleta de jQuery o usas métodos que arruinan por completo el rendimiento.