¿Qué mejor manera de celebrar el 50 #GMTConsejos artículo que, bueno, un realmente útil Administrador de etiquetas de Google consejo?! Este consejo es muy útil y sencillo; resume todo lo que tenía en mente al comenzar esta serie. El consejo es sobre alcance restringido de etiquetas HTML personalizadas. Este es un concepto importante, porque es posible que estés llenando el espacio de nombres JavaScript international de tu página con todo tipo de basura y, por lo tanto, causando conflictos sin darte cuenta.
incógnita
El boletín a fuego lento
Suscríbete al Boletín a fuego lento para recibir las últimas noticias y contenido de Simo Ahava en su bandeja de entrada de correo electrónico.
Consejo 50: restringir el alcance de la etiqueta HTML personalizada
El consejo es muy sencillo. Siempre que agregue código JavaScript en una etiqueta HTML personalizada entre y tags, add the next code round no matter you’ve written:
(operate() {
// Your JavaScript right here
})();
Lo que estás haciendo es crear un expresión de función inmediatamente invocadao IIFE para abreviar. Al envolver el operate() {...} entre paréntesis, le está indicando al navegador que trate el código que contiene como un expresión en lugar de un declaración. En otras palabras, le está indicando al navegador que invoque la función, haciéndola sintácticamente válida agregando paréntesis vacíos al last (para que el navegador sepa que es una expresión de función). Esto ejecuta cualquier código que esté dentro del bloquear.
Entonces, si hace exactamente lo que haría incluso sin el IIFE, ¿por qué hacerlo?
Bueno, JavaScript aplica las variables a su contexto de ejecución. Esto significa que si las variables se declaran dentro de una función, son solo accesible dentro de esa función. Además, JavaScript tiene un espacio de nombres international que en el navegador net está definido por el window objeto. Si usted no Si tiene el IIFE alrededor de su código, entonces cualquier variable que haya declarado se elevará al nivel international. window espacio de nombres, creando así potencial para conflictos.
Eche un vistazo a este ejemplo:
<script>
// No IIFE
var ga = "My secret 'ga' code";
console.log(ga);
// Leads to an error
window.ga('ship', 'pageview');
script>Al sobrescribir ga Con tu ingeniosa cuerda, acabas de romper Common Analytics. Felicidades.
Mientras que si hicieras esto:
<script>
(operate() {
// IIFE
var ga = "My secret 'ga' code";
console.log(ga);
})();
// Works
window.ga('ship', 'pageview');
script>Esta vez estás protegiendo a tu pequeño ga variable y, lo que es más importante, estás protegiendo la international ga funcione declarando su variable en un IIFE.
Sólo recuerda los siguientes consejos adicionales:
-
Siempre declare variables en GTM usando el
varpalabra clave. De esta manera quedarán restringidos al ámbito precise. Si omite esta palabra clave, JavaScript la agrega automáticamente al internationalwindowespacio de nombres. ¡NOTA! ¡Esto también se aplica a las variables JavaScript personalizadas, no solo a las etiquetas HTML personalizadas! -
Consulte siempre las variables globales utilizando el
window.prefijo. Eso hará que su código sea más legible y evitará que trigger conflictos por accidente.
¡Y eso es todo!