Una de las principales cosas que se pueden utilizar Administrador de etiquetas de Google para es inyección de scriptCargar una biblioteca JavaScript de terceros es algo trivial de hacer con un Etiqueta HTML personalizaday funciona de maravillas.
Sin embargo, el uso de etiquetas HTML personalizadas para cualquier cosa ya no es la forma preferida de agregar código personalizado al sitio. Las etiquetas HTML personalizadas son inyecciones de DOM bastante costosas y pueden ser herramientas increíblemente peligrosas (para la experiencia del usuario, la seguridad y la privacidad) en manos equivocadas o inexpertas.
Afortunadamente, Plantillas personalizadas se introdujeron hace un tiempo para ayudar a eliminar los fragmentos de JavaScript personalizados que flotaban en el contenedor. Además, el injectScript API es justo lo que recetó el médico para cargar SDK de terceros a través de Google Tag Supervisor.
Tenga en cuenta que la carga cualquier El JavaScript de terceros en un sitio internet es arriesgadoya que los ataques de inyección podrían provocar la ejecución de código malicioso en su sitio. Si esto le preocupa, debería echar un vistazo a Políticas de seguridad de contenido y Comprobaciones de integridad de subrecursos para garantizar que solo se ejecute en el sitio código de terceros debidamente examinado.
Para este propósito, he creado el CDNJS – Bibliotecas alojadas Plantilla de etiqueta personalizada. Le permite cargar bibliotecas desde el CDNJ Repositorio de CloudFlare.
Puedes descargar la plantilla desde galería de plantillas.
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!
Utilizando una biblioteca listada
La plantilla le permite: Elija de una lista de algunas de las bibliotecas de terceros más populares, o también puede simplemente escribir la ruta a la biblioteca si no está en la lista.
Las bibliotecas listadas son:
- D3.js – una biblioteca de visualización.
- Dojo – un marco para diseñar y construir aplicaciones.
- Núcleo externo – un marco para diseñar y construir aplicaciones.
- Martillo.js – una biblioteca para gestos multitáctiles.
- jQuery – una biblioteca para operaciones DOM.
- jQuery Móvil – un marco optimizado para el tacto para dispositivos móviles y tabletas.
- Interfaz de usuario jQuery – una biblioteca para construir interfaces de usuario usando jQuery.
- Knockear – un marco para crear interfaces de usuario responsivas.
- Herramientas Moo – un marco ligero y orientado a objetos.
- Prototipo – un marco para diseñar y construir aplicaciones.
- Tres.js – una biblioteca para crear y visualizar gráficos en 3D.
- Cargador de fuentes internet – una biblioteca para cargar fuentes internet.
Cuando elijas uno de estos, deberás especificar el versión de la biblioteca. Para saber qué número de versión ingresar, debe visitar CDNJ para ver cuál es la última versión (o si hay una versión anterior que necesitas).
El beneficio La ventaja de utilizar una biblioteca listada es que hay cierta lógica interna en la plantilla que verifica si una método international agregado por la biblioteca ya existe, y en ese caso la carga de la biblioteca es obstruidoEsto es útil porque cut back la sobrecarga potencial de recargar bibliotecas que ya se han descargado.
Agregar manualmente una ruta de biblioteca
Si la biblioteca que necesita no está en la lista, o si desea evitar la verificación del método international descrita en el párrafo anterior, también puede agregar la ruta de la biblioteca seleccionando Introducir ruta manualmente en las opciones de plantilla.
Por ejemplo, si desea agregar clickspark.js al sitio porque te mueres por ese pequeño efecto de brillo en cada clic del mouse, primero buscarías clickspark.js en CDNJ.
Una vez que encuentre la página de la biblioteca, verá la lista de versiones disponibles y la URL del SDK. Intente siempre elegir una versión minimizada de la biblioteca. Suelen terminar con .min.jsEsto cut back el tamaño de la biblioteca descargada por el navegador del usuario.
Desde esta URL, copie todo desde /ajax/libs/ en adelante. Para clickspark.jscopiarías /ajax/libs/clickspark.js/1.16.0/clickspark.min.js.
Luego, en la plantilla, pegar esta ruta en el campo respectivo.
La plantilla ha incluido en la lista blanca todas las URL de https://www.cdnjs.com/ajax/libspor lo que no debería haber problemas siempre que pegues la ruta correctamente.
Resumen
Se trata de una plantilla sencilla que cumple una función específica: permite controlar qué bibliotecas de terceros se cargan en el sitio a través de Google Tag Supervisor.
Un gentil recordatorio:
Intente no cargar a través de Google Tag Supervisor nada que pueda tener un propósito más común que el de seguimiento o publicidad..
Por ejemplo, no cargue jQuery a través de GTM si necesita jQuery para la funcionalidad del sitio. ¿Por qué? Porque los usuarios pueden bloquear GTM, lo que genera una experiencia de usuario incómoda para aquellos que no quieren que Google Tag Supervisor se cargue en la página.
También quiero señalar la advertencia que aparece en el capítulo de introducción de este artículo. Las bibliotecas de terceros son vulnerables a ataques maliciosos y, al cargarlas a través de Google Tag Supervisor, se abre un posible vector de ataque.
Aparte de eso, ¡disfruta de la plantilla! ¡Avísame si me he olvidado de alguna biblioteca de terceros absolutamente obvia que definitivamente debería estar en la lista!