doc.physique elemento.Este proceso tiene algunos matices, como la forma en que Google Tag Supervisor maneja las onHtmlSuccess y onHtmlFailure devoluciones de llamadas en secuenciación de etiquetasy cómo Los elementos se despojan de todos los atributos personalizados antes de la inyección. Pero, en normal, este es el proceso.
Ahora bien, lo que esto significa esencialmente es que cualquier cosa que escriba en una etiqueta HTML personalizada se agrega al remaining de physiquecualquiera que sea el estado en el momento de la inyección. Por lo normal, esto se traduce en: “La parte inferior de la página”pero esto no es algo que se pueda dar por sentado con los diseños fluidos actuales.
Uno extremadamente importante Lo que hay que tener en cuenta es que cuando se agrega un nuevo elemento a la página se fuerza una reflujo del contenido. Básicamente, el navegador tiene que volver a calcular las dimensiones, la posición, los diseños y los atributos de los elementos que preceden, rodean y anidan dentro del elemento inyectado.
No es una operación indolora. Cada elemento que se añade agrava el problema y, en aplicaciones de una sola página que podría no restablecer el DOM entre transiciones, podría terminar con cientos de elementos inyectados en la página, cada uno de los cuales perjudica el rendimiento en incrementos exponenciales.
Llegaremos a esto en el resumen, pero sólo para anticipar la conclusión:
Evite utilizar etiquetas HTML personalizadas a menos que sea absolutamente necesario.
Sí, reconozco la ironía de tal exención de responsabilidad en este artículo en specific.
¿Por qué utilizar etiquetas HTML personalizadas? ¿Por qué utilizar una solución de gestión de etiquetas para la inyección de elementos?
¡Excelente pregunta! Y no tengo una respuesta clara y contundente. Diría que una gran cantidad de etiquetas HTML personalizadas en un contenedor es síntoma de una (o más) de las siguientes cosas:
- Tienes casos de uso demasiado complicado para las etiquetas nativas de GTM o Plantillas personalizadas manejar.
- Tienes muy poco conocimiento acerca de GTM (o JavaScript) para saber que algunas de sus etiquetas HTML personalizadas podrían reemplazarse con etiquetas nativas o plantillas personalizadas.
- Tienes un organización rigiddonde lograr que los desarrolladores net agreguen sus personalizaciones directamente a las plantillas de página (u otro código del sitio) no es una opción.
- Has encontrado un cosa genial en línea y desea probarlo rápidamente antes de pasarlo a los desarrolladores net para su correcta implementación.
- Eres borracho de poder sobre lo que puedes hacer en tu sitio con Google Tag Supervisor, y ningún tipo calvo de Finlandia te impedirá hacerlo.
Es su contenedor; por supuesto, usted es libre de usarlo como desee. Pero si los escenarios (2) y (3) le suenan familiares, le recomiendo encarecidamente que busque un cambio en el established order. Ser ignorante acerca de las complejidades de GTM y JavaScript puede ser contraproducente para los efectos beneficiosos que estas tecnologías permiten. De manera comparable, trabajar en contra de las restricciones impuestas por su organización causará más fricción a largo plazo y puede conducir a estructuras de comunicación inflamadas, un sitio de mala calidad y una recopilación de datos inestable.
Dicho todo esto, ¡exploremos algunos de los escenarios en los que podría verse tentado a utilizar una etiqueta HTML personalizada!
Agregar un elemento a una posición specific en la página
La desventaja de la etiqueta HTML personalizada es que inyecta el elemento al remaining de . However what use is that? If the component is a visible element (one thing that ought to be proven on the display), then almost certainly the tip of is not the place you need it to finish up in.
To rectify this, it’s essential to use JavaScript and its DOM manipulation strategies.
The trick is to search out some component that’s already on the web page, after which place the brand new component relative to that.
For instance, let’s say I need to add a little bit subtitle to this present web page, in order that it finally ends up wanting like this:
Now, if I created a Customized HTML tag with simply this:
<h3>It is actually cool - I promise!h3>El elemento se añadiría al remaining de and wouldn’t look excellent.
So, as an alternative, I have to create a brand new component with JavaScript, after which place this new component relative to the title of the web page.
<script>
(perform() {
// Create a brand new H3 component
var h3 = doc.createElement('h3');
// Add the textual content content material
h3.innerText = "It is actually cool - I promise!";
// Get the reference to the present heading
var title = doc.querySelector('h1');
// Inject the brand new component proper after the H1
if (title) {
title.parentElement.insertBefore(h3, title.nextSibling);
}
})();
script>¿El resultado remaining? Puedes verlo en la captura de pantalla anterior.
Hay una ironía sutil aquí: estás usando una etiqueta HTML personalizada para crear un elemento (el ) eso crea un elemento (el
Pero yo divago.
Agregar un script “lo más arriba posible”
Esto está de alguna manera relacionado con el escenario anterior, pero merece su propio tratamiento debido a la frecuencia con la que surge el escenario.
A veces, un proveedor le indica que “Coloca nuestro guión en lo más alto as potential”.
That is instructed as a result of the seller needs their script to fireplace as quickly as potential on the web page. The upper a component in , the earlier the browser parses it as a part of the web page render.
Nonetheless, this profit is basically misplaced when utilizing Google Tag Supervisor. When the Google Tag Supervisor library has loaded, it’s typical that the parsing of has already completed, and the browser is nicely into rendering the . Due to this, making an attempt to inject a script as excessive up in as potential doesn’t make any sense, and is definitely detrimental to the supposed finish consequence.
Why? As a result of while you create a Customized HTML tag that then creates a component and injects it into , the browser first must inject the Customized HTML tag (efficiency hit), after which it must create the brand new component (one other efficiency hit), and at last it must inject the brand new component into (efficiency hit).
En su lugar, todo lo que necesitas hacer es agregar el directamente a la etiqueta HTML personalizada. De esta manera se insertará al remaining de , and the browser will execute it as quickly as potential.
Load vendor JavaScript
In truth, let’s proceed the thought experiment from the earlier situation. Let’s say you do have a vendor whose JavaScript you need to load on the location, and also you’ve established that every one it’s essential to do is add the elemento a la página con una etiqueta HTML personalizada.
Mi amigo. No utilice ninguna etiqueta HTML personalizada.
En lugar de eso, crea un plantilla de etiqueta personalizada que utiliza el injectScript API para cargar la biblioteca.
Las plantillas personalizadas están optimizadas para inyectar y cargar JavaScript, e introducen una permisos y políticas Modelo para una inyección más segura.
De ahora en adelante, esta será la mejor manera de proceder. inyección. No te ayudará con algunos de los otros escenarios, ya que el entorno limitado de plantillas de JavaScript es extremadamente restrictivo. Por lo tanto, si quieres agregar oyentes de eventos personalizadosPor ejemplo, todavía necesitarás la antigua etiqueta HTML personalizada.
Modificar la experiencia del usuario
Una de las cosas que podría verse tentado a hacer con las etiquetas HTML personalizadas de Google Tag Supervisor es modificar la experiencia del usuarioEsto podría ser agregar algo como un Banner de cookieso tal vez editar el estilos en la página, o quizás agregando un que carga algún widget sofisticado en su sitio de comercio electrónico.
Me gustaría advertirle sobre los peligros de hacer estas cosas con Google Tag Supervisor.
En primer lugar, Administrador de etiquetas de Google puede ser bloqueado por los navegadores (por ejemplo Corajudo) y por bloqueadores de anuncios y contenido. Esta es una tendencia en aumento (con los navegadores Protecciones de seguimiento reduciendo la necesidad de utilizar bloqueadores de anuncios independientes).
La segunda razón es que estás separando la funcionalidad y/o experiencia del sitio en sí. Lo más possible es que dependas del posicionamiento y la selección de elementos HTML específicos para anclar tu código personalizado. Sin embargo, Google Tag Supervisor es desacoplado de las compilaciones de su sitio, y es extremadamente peligroso asumir que el sitio permanecerá sin cambios.
Por lo tanto, si incluso un solo selector en su querySelector() Si se cambian los argumentos en el sitio, el código personalizado puede dejar de funcionar o, peor aún, dañar algo más en el sitio.
Además de estos, están los motivos relacionados con el rendimiento que he mencionado anteriormente en este artículo. Cada inyección de elementos dinámicos degradará exponencialmente el rendimiento de la página, lo que provocará problemas molestos, como que los elementos personalizados aparezcan y desaparezcan intermitentemente, una calidad de datos degradada (cuando un iframe que modificas dinámicamente tiene tiempo de cargarse antes de que realices los cambios), y hasta una lentitud que afecta negativamente a la experiencia del usuario, especialmente en aplicaciones de una sola página.
Así que, por favor, considere no utilizando Google Tag Supervisor como sistema de gestión de contenidos.
Resumen
Esta fue una breve incursión en el mundo mágico de las etiquetas HTML personalizadas.
Si pudiera hablar con el yo de 2012, le diría que empiece a considerar las desventajas de las etiquetas HTML personalizadas antes, que deje de emborracharse con la capacidad infinita de Google Tag Supervisor para la inyección de secuencias de comandos y que, en cambio, piense en toda la organización, todo el sitio y todo el contexto del entorno donde se ejecuta GTM antes de tomar decisiones arriesgadas. simplemente porque.
Dicho esto, las etiquetas HTML personalizadas tienen sus casos de uso en la actualidad. De hecho, crear un detector de clics con una etiqueta HTML personalizada (doc.addEventListener()) en realidad puede ser mejor que disparar algún código personalizado con los activadores de clic de Google Tag Supervisor.
Esto se debe a que un disparador de clic activaría la etiqueta una y otra vez (inyectándola una y otra vez) cada vez que el disparador de clic tenga éxito. Mientras que si crea su propio pequeño detector de clic en una etiqueta HTML personalizada y maneja la tarea repetitiva en la devolución de llamada, evitará el caos de la inyección.
También avalo firmemente la utilidad de las etiquetas HTML personalizadas para crear pruebas de concepto. Puedes probar rápidamente diferentes experiencias y diseños, y puedes publicar los cambios para una muestra de tus visitantes. Si estás satisfecho con los resultados, puedes proponer que se agreguen estos cambios al código del sitio.
Sin embargo, quizás algún día, espero, Plantillas personalizadas Hará que las etiquetas HTML personalizadas queden obsoletas.
Como palabras de despedida, al utilizar etiquetas HTML personalizadas especialmente Para inyectar código que has encontrado on-line, no está de más un famoso proverbio ruso:
Confiar pero verificar.
Si no entiende lo que hace el código, consulte a su amable desarrollador net native y pregúntele.