Última actualización: 9 de octubre de 2020:
customTaskactualizado a una versión más estable.
El Etiqueta HTML personalizada en Administrador de etiquetas de Google Es espléndido. Es la herramienta a la que recurres cuando necesitas ejecutar JavaScript arbitrario en la página net. Algunos incluso pueden usarlo para agregar elementos HTML a la página, pero estoy dispuesto a apostar a que ejecutar JavaScript es su uso más común.
Sin embargo, las etiquetas HTML personalizadas tienen una desventaja, que solo se hace más evidente en las aplicaciones de una sola página que no borran la página completa al pasar de un estado a otro. Las etiquetas HTML personalizadas son inyectado hasta el remaining de , which implies you may find yourself with a lot of litter in your Doc Object Mannequin.
On this article, I’ll present you a fairly neat trick. We’ll use customTask ejecutar una etiqueta de Common Analytics “ficticia”, cuyo único propósito es ejecutar el código JavaScript cuando se activa la etiqueta. De esta manera, no se inyecta nada en el DOM y la única sobrecarga que se ejecutará será el esfuerzo inicial de crear el rastreador de Google Analytics.
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!
Consejo 94: Activar JavaScript personalizado sin utilizar una etiqueta HTML personalizada
La forma en que funciona es bastante easy si entiendes cómo customTask Funciona. Así es como podría verse una función de muestra:
perform() {
return perform(mannequin) {
// Stop hit from being despatched
mannequin.set('sendHitTask', null);
// The code you wish to execute
var xhr = new XMLHttpRequest();
xhr.open('POST', '/endpoint', true);
xhr.setRequestHeader('Content material-Sort', 'utility/json');
xhr.ship(JSON.stringify({'key': 'abc12345'}));
}
}
Las primeras líneas del cierre simplemente impiden que la etiqueta haga algo. null cada valor particular person almacenado en el objeto modelo, incluidos todos los tareasDe esta manera una vez que el customTask Una vez que finaliza, el generador de hits ya no hará nada más (como generar y enviar el hit). Por eso lo llamo etiqueta “ficticia”.
Después // The code you wish to execute Es donde agregarás el código JavaScript que deseas ejecutar. En este ejemplo, estoy enviando una solicitud HTTP POST easy a un punto remaining en mi servidor.
La etiqueta en sí puede ser cualquier etiqueta de Common Analytics. Todo lo que necesita es el ID de seguimiento (puede ser lo que desee, ya que el hit nunca se enviará) y el customTask en su campo, así:
Como puede ver, la etiqueta es extremadamente easy. Su único propósito es ejecutar el JavaScript en el customTask variable.
La otra cosa crítica es la desencadenarUtilice el disparador para establecer cuándo se debe ejecutar JavaScript. En el ejemplo anterior, cuando el nonIdle El evento se introduce en dataLayerla etiqueta ejecutará el código dentro {{JS – función – Aumentar contador}}.
A resumireste método busca abordar la siguiente enfermedad:
Además de verse horrible, cada elemento insertado dinámicamente en el DOM obliga a una reflujo de la página, que se vuelve cada vez más cara cuanto más elementos se añaden.
Al evitar la inyección DOM, la función de JavaScript se ejecuta dentro de las entrañas del contenedor de Google Tag Supervisor (donde se compila en una función) y analytics.js (que crea la visita).
De esta manera, esencialmente has creado un Etiqueta de función de JavaScriptcuyo único propósito es activar la ejecución del código JavaScript.
customTask ¡Ataca de nuevo! ¿Crees que un truco como este te resultará útil? Cuéntamelo en los comentarios.