A finales de enero, Simo Ahava publicó en su blog una reseña sobre la posibilidad de usar etiquetas HTML personalizadas en Google Tag Manager. Las etiquetas HTML personalizadas brindan una amplia oportunidad para cambiar el contenido del sitio, pero debe tener mucho cuidado: las características de las etiquetas y su procesamiento conllevan grandes riesgos. El analista de MediaGuru Timur Ledenyov ha traducido esta útil revisión para usted.Durante bastante tiempo (desde finales de 2012), una de las opciones de GTM más importantes fue la etiqueta HTML personalizada. Esta herramienta mágica le permite a GTM agregar un elemento HTML a la página de un sitio web. Desde 2012, Google Tag Manager ha evolucionado de un entorno aislado con plantillas de etiquetas personalizadas a una solución ilimitada de administración de contenido del lado del cliente.En el artículo, consideraremos los principios de la etiqueta HTML personalizada y las posibilidades de su aplicación.Relleno de etiqueta HTML personalizado
Como su nombre lo indica, la etiqueta HTML personalizada le permite colocar elementos HTML en la página del sitio. Vamos a crearlo:
<script>
console.log('Hello!');
</script>
<div>
<span>Hello!</span>
</div>
Esta etiqueta agrega tres elementos a la página:<script>, que se compila y ejecuta en JavaScript;- bloquear
div; <span>incluido en <div>
Cuando publica un contenedor y mira la fuente minimizada del contenedor de JavaScript, se ve así:
su etiqueta bellamente formada se ve así porque el HTML está codificado, y este es un paso inteligente antes de definir cadenas como elementos HTML.Los indicadores enableIframeMode y enableEditJsMacroBehavior son las características antiguas que ya no son visibles en la interfaz de usuario. Puede hacerlos visibles en la interfaz de etiqueta HTML personalizada si sabe cómo. Pero no afectará nada.Entonces, creaste una etiqueta HTML personalizada y viste cómo se agrega al contenedor. Pero, ¿qué sucede en la página y dónde exactamente?Inyección
Cuando se activa la etiqueta HTML personalizada en el Administrador de etiquetas de Google, se inicia el siguiente mecanismo:- Se crea un maniquí
<div>, al cual, utilizando el atributo .innerHTML, se agrega una cadena codificada que representa su etiqueta HTML personalizada. - Esto obliga al navegador a tratar la cadena codificada como HTML, de modo que las etiquetas agregadas a HTML personalizado se convierten en elementos HTML.
- Uno por uno, estos elementos se eliminan
<div>y proceden a la inyección. - Luego, cada elemento se agrega como el último elemento hijo document.body.
Hay algunos matices en este proceso:- Cómo interactúa el Administrador de etiquetas de Google con onHtmlSuccess y onHtmlFailure en la cola
- cómo los elementos
<script>se borran de todos los atributos del usuario antes de la inyección.
Qué significa eso? Todo lo que ingrese en la etiqueta HTML personalizada se agrega al final del cuerpo, sea lo que sea en el momento de la inyección. Por lo general, significan pie de página, pero esto no es necesario, dados los diseños de página modernos.
Importante: cuando agrega un nuevo elemento a la página, comienza a reorganizar el contenido. Por lo general, el navegador debe recalcular los tamaños, el posicionamiento, el diseño y los atributos de los elementos; precedente, circundante o anidado dentro de un elemento incrustado.No es tan fácil. Cada elemento que agregue agrava el problema. Y en aplicaciones de una sola página, que pueden no restablecer el DOM entre transiciones, puede observar cientos de tales elementos en una página, cada uno de los cuales empeora el rendimiento cada vez más. Volveremos a esto en conclusión, pero antes de la conclusión diré:Evite usar etiquetas HTML personalizadas sin una necesidad obvia.Admito que tal descargo de responsabilidad para el artículo no está exento de ironía.Scripts de secuencias de comandos HTML personalizados
¿Por qué usar estas etiquetas y aplicar una solución de administración de etiquetas para inyectar un elemento? Una excelente pregunta para la que no tengo una respuesta rápida y definitiva.Puedo decir que una gran cantidad de HTML personalizado en el contenedor puede hablar sobre una de las siguientes situaciones:- Se enfrenta a un caso demasiado complicado para el que las etiquetas GTM estándar o las plantillas personalizadas no son adecuadas.
- Usted es nuevo en GTM (o JavaScript) y no comprende que ninguna de sus etiquetas HTML personalizadas se pueda reemplazar por etiquetas estándar o plantillas personalizadas.
- , -, .
- , - .
- , Google Tag Manager, .
Este es su contenedor y, por supuesto, tiene derecho a usarlo como mejor le parezca. Pero si aparecen los escenarios 2 y 3, le recomiendo encarecidamente que realice cambios en el status quo. Ignorar la complejidad de GTM y JavaScript puede interferir con los efectos positivos que abren estas tecnologías. El trabajo contrario a las restricciones establecidas en su empresa a largo plazo también causará desacuerdos y provocará una comunicación interrumpida, un sitio terrible y un almacenamiento de información poco confiable.Veamos algunos escenarios en los que probablemente desee probar etiquetas HTML personalizadas.Agregar un elemento a un lugar específico en la página
La desventaja de la etiqueta HTML personalizada es que incorpora el elemento al final <body>. ¿Para qué? Si el elemento es un componente visual (es decir, debe mostrarse en la pantalla), lo más probable es que el final <body>no sea el lugar donde le gustaría verlo. Para evitar esto, debe usar JavaScript y sus métodos de manipulación DOM.El truco es encontrar algún elemento que ya esté en la página y colocar un nuevo elemento relativo a él.Por ejemplo, quiero añadir un pequeño subtítulo de la página para que se vea como esto:
Ahora, si se crea un HTML personalizado de la siguiente manera: <h3> It's really cool - I promise!</h3>, se añade el elemento al final <body>y no se ven muy bien.Entonces en cambio necesitoCree un nuevo elemento usando JavaScript y luego colóquelo en relación con el título de la página.<script>
(function() {
var h3 = document.createElement('h3');
h3.innerText = "It's really cool - I promise!";
var title = document.querySelector('h1');
if (title) {
title.parentElement.insertBefore(h3, title.nextSibling);
}
})();
</script>
El resultado final que ves en la captura de pantalla anterior.Esta es una ironía sutil: utiliza HTML personalizado para crear un elemento ( <script>) que creará otro elemento ( <h3>). Sí, sería genial si pudieras definir en HTML personalizado dónde se ubicará el elemento. De hecho, sería aún mejor si hubiera una plantilla personalizada que le permita crear un elemento con la capacidad de seleccionar una ubicación para el elemento. Por lo tanto, no necesita inyectar el script al final del código. Pero estábamos distraídos.Colocando el guión lo <head>más alto posible
Esto se debe en parte al escenario anterior, pero merece especial atención dependiendo de la frecuencia con la que surja esta situación. A veces se le pregunta: "Coloque el guión MUCHO ANTES <head>".Por lo tanto, necesita que el script se ejecute en la página lo antes posible. Cuanto más alto sea el elemento <head>, más rápido lo procesará el navegador como parte de la página mostrada.Pero esta ventaja se pierde al usar Google Tag Manager. Por lo general, cuando la biblioteca GTM se ha cargado, el procesamiento <head>ya ha finalizado y el navegador está procesando con might y main <body>. Debido a esto, intentar agregar un script lo <head>más alto posible no tiene sentido y en realidad solo daña el resultado final.¿Por qué? Cuando creó HTML personalizado, forma un elemento y lo incrusta en<head>. Primero, el navegador necesita agregar HTML personalizado (hit de rendimiento), luego crear un nuevo elemento (otro hit de rendimiento) y finalmente agregar un nuevo elemento a <head>(hit de rendimiento).
En su lugar, debe agregar <script>HTML directamente a Personalizado. Con este método, se agregará al final <body>y el navegador lo ejecutará lo más rápido posible.Descargar código JavaScript de terceros
Continuemos el experimento del escenario anterior. Supongamos que tiene un desarrollador externo cuyo código JavaScript desea cargar en el sitio. Y se dio cuenta de que solo necesita agregar un elemento <script>a la página usando HTML personalizado.En este caso, no necesita utilizar HTML personalizado en absoluto.En su lugar, cree una plantilla personalizada que use la API de injectScript para cargar la biblioteca.Las plantillas personalizadas están optimizadas para la inyección y carga de JavaScript, y ofrecen un modelo de permiso y política para una inyección segura (más segura).
En el futuro, esta será la mejor manera de implementar<script>. Esto no lo ayudará con otros scripts, ya que el conjunto estándar de plantillas de JavaScript es bastante limitado. Por lo tanto, si desea agregar, por ejemplo, un detector de eventos personalizado, necesitará una etiqueta HTML personalizada.Cambiar ux
Una de las cosas que querrá hacer con HTML personalizado es cambiar la experiencia de usuario (UX). Para hacer esto, puede usar algo como un banner de cookies, es posible cambiar los estilos en la página o agregarlo <iframe>, lo que carga algún widget conveniente para su sitio de comercio electrónico.Me gustaría advertirle sobre los riesgos que conlleva hacer todo esto con el Administrador de etiquetas de Google.- (, Brave) / GTM. ( , ).
- / , . , HTML . Google Tag Manager , , , . querySelector() , – - .
- A todo esto se suman las razones relacionadas con el rendimiento que mencioné anteriormente. Agregar cada elemento dinámico en orden creciente degradará el rendimiento de la página, lo que conducirá a cosas molestas: sus elementos personalizados comenzarán a aparecer y desaparecer; la calidad de los datos se deteriorará (cuando el iframe, que está cambiando dinámicamente, tenga tiempo antes de realizar cambios) hasta retrasos y congelaciones de página, especialmente en sitios de una sola página.
Por lo tanto, no considere el uso de Google Tag Manager como un sistema de gestión de contenido.recomendaciones
Esta fue una breve descripción de las características de las etiquetas HTML personalizadas.Si pudiera hablar conmigo mismo en 2012, me recomendaría considerar las deficiencias de las etiquetas HTML personalizadas lo antes posible y dejar de crear ilusiones sobre las infinitas posibilidades de Google Tag Manager para agregar scripts. Más bien, pensar de manera compleja, sobre la organización, sobre el sitio en su conjunto y sobre el contexto del entorno en el que trabaja GTM, antes de tomar decisiones arriesgadas.Sin embargo, hay aplicaciones para HTML personalizado hoy. Crear un detector de clics con la etiqueta HTML personalizada (document.addEventListener ()) puede ser más beneficioso que ejecutar algún tipo de código personalizado con activadores de GTM.
Esto se debe a que el activador de clic ejecutará la etiqueta una y otra vez (inyectándola una y otra vez) cada vez que se dispare. Si crea su escucha de clics en la etiqueta HTML personalizada y procesa una tarea repetitiva con ella, evitará confusión durante la implementación.También garantizo vigorosamente la conveniencia de HTML personalizado para respaldar hipótesis. Puede probar rápidamente un nuevo diseño o funcionalidad publicando cambios en una muestra específica de visitantes. Si los resultados son satisfactorios, será posible proponer estos cambios para su inclusión en el código principal del sitio.Sin embargo, espero que algún día las plantillas personalizadas reemplacen las etiquetas HTML personalizadas.Como palabra de despedida para aquellos que usan etiquetas HTML personalizadas, especialmente para aquellos que desean agregar código encontrado en la red, el famoso proverbio ruso es útil:Confíe, pero verifique.Si no sabe qué está haciendo el código, consulte con un desarrollador web familiar.