En esta publicación, lo guiaré a través de un tutorial sobre cómo crear un Administrador de etiquetas de Google extensión. Esta extensión será una nuevo oyentecuyo único trabajo es escuchar los cambios en el marcado HTML y CSS de la página.
La razón por la que te estoy enseñando cómo crear un oyente DOM es easy. Muy a menudo me encuentro con personas que piden ayuda, pero no pueden tocar el código de la página. Generalmente el problema se magnifica con manejadores de formulariosya que los desarrolladores podrían haber instalado algún administrador de formularios jQuery personalizado, por ejemplo, que simplemente se niega a cooperar con los detectores de formularios de GTM. Es por eso que es posible que desee activar un evento GTM cuando aparezca un determinado mensaje en la pantalla, por ejemplo.
Con un oyente DOM, puedes activar un evento GTM cada vez que algo cambia en la página. Bueno, no cada vez. En realidad, en este ejemplo está restringido a la inserción de elementos y cambios de atributos. Un caso de uso funcional podría ser la validación de formularios: si desea realizar un seguimiento de los formularios no válidos, tal vez enviando el contenido del mensaje de error de validación con un evento, también podría crear un detector DOM. Este oyente se activará cuando aparezca un mensaje de error en la página.
DESCARGO DE RESPONSABILIDAD: Para ser sincero, creo firmemente en el uso de trucos como este para corregir un marcado defectuoso o una implementación de etiqueta de mala calidad. La thought principal detrás de esta publicación es presentar una característica de JavaScript que puede aliviar algunos de los problemas de administración de etiquetas. Sin embargo, si descubre que necesita trucos como el detector DOM para evitar problemas de desarrollo en su sitio internet, le sugiero encarecidamente que hable con sus desarrolladores e intente encontrar una solución que funcione con las características estándar de GTM.
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.
la premisa
Para crear el oyente DOM, aprovecharé una API conocida como Observador de mutaciones. Esta pequeña pieza de magia creará un objeto observador, que se activa cada vez que un mutación tiene lugar. Esta mutación puede tener diferentes tamaños y formas, pero para los fines de esta guía, escucharé dos tipos de mutaciones, para dos tipos de casos de uso:
-
Inserción de nodo – cuando un nuevo
se inyecta en el DOM -
Cambio de estilo CSS: cuando está previamente oculto
se muestra
Entonces, el primer caso de uso es cuando su formulario inyecta un nuevo elemento SPAN en el DOM tras un error. El script verificará si el nodo inyectado es realmente el mensaje de error y, si lo es, enviará un evento dataLayer con el contenido del SPAN (el mensaje en sí).
El segundo caso de uso es cuando un formulario no válido hace que aparezca un SPAN oculto, con el mensaje de error dentro.
Escuchar la inserción de un nodo es un poco diferente a escuchar un cambio de atributo. Un detector de inserción de nodos se puede preparar en cualquier nodo del DOM, lo que significa que tiene mucho más con qué trabajar en términos de flexibilidad. Escuchar cambios de atributos requiere que usted identifique exactamente qué nodo desea observar, y el cambio de atributo se informará solo para ese nodo.
Preparativos
Aquí están los ingredientes:
-
Una página donde un
se inserta o se revela con un cambio de estilo CSS -
Etiquetas HTML personalizadas
El código de mi página de prueba se ve así (aquí combiné ambos casos de uso en uno):
<script>
perform addHTML() {
var myDiv = doc.getElementById("contents");
var newSpan = doc.createElement("span");
newSpan.className = "error";
newSpan.innerHTML = "This type contained errors";
myDiv.appendChild(newSpan);
}
perform changeCSS() {
var mySpan = doc.getElementsByClassName("error")(0);
mySpan.fashion.show = "block";
}
script>
<a href="#" onClick="addHTML();">Add span with .innerHTMLa>
<a href="#" onClick="changeCSS();">Add span with CSSa>
<div id="contents">
<span class="error" fashion="show: none;">This type contained errorsspan>
div>Repasemos rápidamente esta página.
Primero, tienes dos funciones. la funcion agregarHTML() insertará lo siguiente en el contenido DIV# a continuación:
This type contained errors
La inserción se realiza al hacer clic en un enlace cuyo texto es “Agregar intervalo con .innerHTML”.
En la segunda función, el error SPAN ya está en el DOM, pero se ha ocultado con un pantalla: ninguna Comando CSS. Cuando se hace clic en el enlace denominado “Agregar intervalo con CSS”, esta directiva de estilo se cambiará a pantalla: bloque.
Esta es sólo mi página de prueba. Obviamente, necesitará navegar por su implementación precise para que todo funcione.
Finalmente, necesitarás tu magia HTML personalizada. Los próximos dos capítulos repasarán las etiquetas y el código que deberá escribir para ellas.
Caso 1: inserción de nodos
En este caso de uso, un nuevo nodo () se inserta en un DIV de la página. El marcado en la página se parece a esto:
<script>
perform addHTML() {
var myDiv = doc.getElementById("contents");
var newSpan = doc.createElement("span");
newSpan.className = "error";
newSpan.innerHTML = "This type contained errors";
myDiv.appendChild(newSpan);
}
script>
<a href="#" onClick="addHTML();">Add span with .innerHTMLa>
<div id="contents">
div>Como puede ver, hay un DIV vacío (#contents), al que luego se le añade un nuevo SPAN, creado por la función addHTML() que, a su vez, espera un evento de clic en el enlace de la página.
Ahora, el siguiente paso es crear el propio oyente. Deberá utilizar la API MutationObserver para escuchar cualquier nodo que se inserte en el objetivo observado. El nodo en sí puede estar en cualquier nivel de la jerarquía DOM, pero elegí el contenido DIV# para simplificar las cosas. Cuando se inserta un nodo, se realiza una inserción de capa de datos con un nuevo evento GTM y el contenido de texto del SPAN.
Así es como debería verse su etiqueta HTML personalizada:
<script>
var contentDiv = doc.querySelector("#contents");
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
var observer = new MutationObserver(perform(mutations) {
mutations.forEach(perform(mutation) {
if(mutation.kind==="childList" && mutation.addedNodes(0).className==="error") {
dataLayer.push({'occasion': 'newErrorSpan', 'spanErrorMessage': mutation.addedNodes(0).innerHTML});
observer.disconnect();
}
});
});
var config = { attributes: true, childList: true, characterData: true }
observer.observe(contentDiv, config);
script>Vale, vale, están pasando muchas cosas aquí. Repasemos el guión y veamos qué hace. Primero, crea una referencia al DIV que escuchará. estoy usando el selector de consulta() función, porque es una buena manera de combinar selectores CSS y JavaScript.
A continuación, crea el propio MutationObserver abordando primero un problema conocido entre navegadores con los navegadores WebKit. El observador escucha mutaciones de tipo lista de niños (se inserta un nuevo nodo secundario) y verifica si el primer nodo agregado tiene un “error” de clase CSS. Tendrás que modificar este código si el SPAN con el error no es el primer nodo que tu script inserta en el DOM.
Si se detecta dicha mutación, se envía un evento GTM a dataLayer (nuevoErrorSpan), y el contenido del mensaje de error también se envía como una variable de capa de datos. Tenga en cuenta que uso HTML interno para obtener el contenido del SPAN. Si su SPAN tiene formato HTML, es posible que desee utilizar texto interno en cambio.
La desconexión significa que después de que se produce esta mutación explicit, no se escuchan más mutaciones. Entonces, si alguien sigue presionando el botón “enviar”, el observador se cerrará después del primer error. Es posible que desee eliminar esta línea si desea realizar un seguimiento de TODOS los errores potenciales que su visitante propaga en el formulario.
Por último, creo una configuración para MutationObserver y la preparo en el DIV.
Y eso es todo para la inserción de nodos. Si configura este nuevo oyente para que se energetic en páginas donde el SPAN con clase “error” se crea en un DIV con ID “contenido”, se realizará un dataLayer.push() cada vez que el SPAN se inserte en el DOM. ¡Pruébalo tú mismo!
Caso 2: cambio de CSS
En este caso, tiene un SPAN oculto con el mensaje de error, que luego se revela cuando falla la validación del formulario. Así es como podría verse el HTML:
<script>
perform changeCSS() {
var mySpan = doc.querySelector(".error");
mySpan.fashion.show = "block";
}
script>
<a href="#" onClick="changeCSS();">Add span with CSSa>
<div id="contents">
<span class="error" fashion="show: none;">This type contained errorsspan>
div>Entonces tengo un SPAN easy dentro de un DIV con el mensaje de error. Esto inicialmente está configurado en pantalla: ningunapero cuando se hace clic en el enlace, el estado de visualización cambia a bloquear.
En cuanto a su etiqueta HTML personalizada, necesitará algo como esto:
<script>
var spanError = doc.querySelector('.error');
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
var observer = new MutationObserver(perform(mutations) {
mutations.forEach(perform(mutation) {
if (mutation.kind==="attributes" && mutation.goal.fashion.show==="block") {
dataLayer.push({'error': 'modErrorSpan', 'spanErrorMessage': mutation.goal.innerHTML});
observer.disconnect();
}
});
});
var config = { attributes: true, childList: true, characterData: true }
observer.observe(spanError, config);
script>Es bastante related al anterior pero con uno o dos pequeños cambios. Primero, no estás escuchando el DIV, estás escuchando el nodo actual que sabes que será el objetivo del cambio de estilo. Esto es importante y significa que debe saber exactamente cuál será el objetivo al crear este script.
A continuación, en el propio observador, deberá especificar cuál fue el cambio de estilo. Usé simplemente un cambio de pantalla: ninguna a pantalla: bloquepero es posible que tengas algo diferente en tu código. Así que no olvide cambiar el contenido de la cláusula if para que coincida con el nuevo estilo.
El beneficio aquí es que estás escuchando un solo nodo, por lo que hay un aumento en el rendimiento. tengo el observador.desconectar(); nuevamente, pero es posible que desee eliminarlo si desea enviar eventos perpetuamente por cada clic no válido en el botón Enviar.
No olvides hacer la prueba.
Conclusiones
Esto puede parecerle un truco genial. Después de todo, estás escuchando los cambios en la página sin que se produzca ninguna actualización de la página. Además, estás ampliando los oyentes predeterminados de GTM para que seas como un ingeniero de Google, ¿verdad?
Bueno, recuerda lo que dije en el descargo de responsabilidad de este texto. Esto es un truco, una elusión, una curitadiseñado para superar problemas con su marcado o su JavaScript. Tener un controlador de formulario personalizado que no propaga un evento de envío de formulario adecuado (que es requerido por el detector de envío de formulario predeterminado de GTM) es un poco sospechoso y apesta a malas prácticas. Entonces, antes de recurrir a este oyente DOM, asegúrese de agotar todas las demás posibilidades más ortodoxas con sus desarrolladores.
Por otra parte, es posible que no necesite esto para superar ningún problema de desarrollo, sino más bien para complementar su configuración de etiquetas precise. En ese caso, ¡vuélvete loco! Es una excelente manera de agregar más flexibilidad a sus etiquetas. Tenga en cuenta el soporte entre navegadoressin embargo. El soporte no es lo suficientemente completo como para justificar el uso de este oyente como regla de activación para alguna etiqueta crítica para el negocio.