#GTMTips: Escuchas de eventos personalizadas y sencillas con Google Tag Supervisor

En primer lugar, echa un vistazo Este artículo para obtener una descripción normal de cómo funcionan los escuchas de eventos personalizados en Administrador de etiquetas de GoogleLa razón por la que escribo esto #ConsejosGTMT El artículo es que quiero actualizar un poco la solución y quiero volver a ponerla en el centro de atención. ¿Por qué? Porque sigue siendo una de las formas más efectivas de personalizar la implementación de Google Tag Supervisor.

A detector de eventos personalizado es un controlador que se escribe con JavaScript y que permite manejar cualquier Eventos DOM de JavaScriptcomo hacer clic, enviar formulario, pasar el mouse, arrastrar, tocar, error, cargar y descargar página y muchos más. También le permite aprovechar la useCapture parámetro que resultará muy útil si tienes otros JavaScript en el sitio que interfieren con el evento predeterminado de GTM desencadenantes.

incógnita

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 69: Cree fácilmente detectores de eventos personalizados

La solución comprende los siguientes elementos: a Etiqueta HTML personalizada disparando con la carga de la página, y un Variable de JavaScript personalizada Proporcionar la devolución de llamada. También necesitarás un montón de Variables de la capa de datos para recuperar los valores introducidos dataLayer por la devolución de llamada.

La concept es que cuando se carga la página, adjuntas tu detector personalizado a cualquier elemento que quieras rastrear para el evento dado. Luego, cuando el navegador registra esta interacción, el código inserta un objeto en dataLayer que luego puedes usar para completar tus etiquetas.

La etiqueta HTML personalizada

Así es como se vería la etiqueta HTML personalizada.

<script>
  (perform() {
    // Use occasions from https://developer.mozilla.org/en-US/docs/Net/Occasions
    var eventName = 'dragstart';
    
    // Connect listener on to aspect or doc if aspect not discovered
    var el = doc.querySelector('img#obtain') || doc;
    
    // Go away useCapture to true if you wish to keep away from propagation points.
    var useCapture = true;
    
    el.addEventListener(eventName, {{JS - Generic Occasion callback}}, useCapture);
  })();
script>

Dispara esto en un Vista de página gatillo si se conecta directamente al doc nodo, o un DOM listo disparador si se conecta directamente a un elemento y el elemento está en el Fuente HTMLo un Ventana cargada Se activa si se adjunta directamente a un elemento que se agrega dinámicamente a la página durante la carga de la página.

Asegúrese de cambiar el eventName Valor para reflejar qué evento desea rastrear. Si desea rastrear clics, cámbielo a click onSi desea realizar un seguimiento de los usuarios que pasan el cursor sobre el elemento, cámbielo a mouseoveretcétera.

Puede elegir agregar el oyente directamente a un elemento utilizando el comando apropiado. Selector CSS como parámetro de doc.querySelector()Alternativamente, puede agregar el oyente directamente en el doc nodo.

Por último, puedes configurar useCapture a false Si desea utilizar la fase de burbuja en lugar de la fase de captura con su controlador de eventos, ya que simplemente está rastreando interacciones y no está creando ningún efecto secundario, le recomiendo que deje esto como está. true.

Esto es importante, especialmente si tienes otro JavaScript en el sitio que interfiere con la propagación de eventos. Un síntoma típico de esto es que tu Formulario y enlaces justos desencadenantes negarse a trabajar. Entonces, al usar el seize fase, estás evadiendo JavaScript que detiene la propagación y es posible que puedas rastrear estos eventos cuando los activadores predeterminados de GTM no puedan hacerlo.

La última línea en realidad agrega el oyente, proporcionando una variable de JavaScript personalizada como devolución de llamada.

La variable personalizada de JavaScript

Esto es lo que {{JS – Devolución de llamada de evento genérico}} Debería verse así:

perform() {
  return perform(occasion) {
    window.dataLayer.push( '',
      'customized.gtm.elementTarget': occasion.goal.goal );
  };
}

Esta devolución de llamada envía un montón de información sobre el evento a dataLayerespaciando todo con el nombre customized.gtm. prefijo. El nombre del evento en sí será customized.occasion.p.ej customized.occasion.click on para un evento de clic o customized.occasion.dragstart al rastrear la acción de arrastre.

Las variables introducidas dataLayer reflejan los utilizados por los activadores predeterminados de GTM, con la excepción de customized.gtm.originalEvent que contendrá una referencia al evento authentic que invocó la devolución de llamada. Esto es importante si necesita información de este objeto de evento, como qué botón del mouse se presionó cuando se registró un clic. Esto (actualmente) falta en la funcionalidad de activación predeterminada de GTM.

Variables de la capa de datos

Debe crear una variable de capa de datos para cada una de las claves ingresadas dataLayerPara imitar el esquema de nombres de Google Tag Supervisor para las variables integradas, puedes usar algo como esto:

El disparador de evento personalizado

Para activar sus etiquetas cuando se registra un evento personalizado, necesitará un activador de evento personalizado configurado en el nombre del evento ingresado. dataLayer en la devolución de llamada de la variable de JavaScript personalizada. Por lo tanto, para seguir el ejemplo de la dragstart evento (registrado cuando el usuario comienza a arrastrar el elemento dado en el navegador), el disparador se vería así:

Ejemplo de trabajo

Abordemos un problema que podría tener en su sitio. Quiere realizar un seguimiento de un elemento de formulario con ID contactUspero no importa lo que hagas, el disparador de formulario de GTM se niega a activarse. Has mirado a tu alrededor, has leído Mis articulosy llega a la conclusión de que el problema es que otro código JavaScript en el sitio impide la propagación del evento de envío del formulario. Su amable desarrollador native le cube que, debido a la naturaleza del complemento que utiliza, es imposible cambiar este comportamiento.

¡Los detectores de eventos personalizados vienen al rescate! Puede confiar en useCapture bandera para rastrear el envío del formulario incluso si se ha detenido la propagación. Esto es lo que Etiqueta HTML personalizada Se vería así:

<script>
  (perform() {
    // Use occasions from https://developer.mozilla.org/en-US/docs/Net/Occasions
    var eventName = 'submit';
	
    // Connect listener on to aspect or doc if aspect not discovered
    var el = doc.querySelector('type#contactUs') || doc;
	
    // Go away useCapture to true if you wish to keep away from propagation points.
    var useCapture = true;
	
    el.addEventListener(eventName, {{JS - Generic Occasion callback}}, useCapture);
  })();
script>

Agregar un DOM listo disparador de esta etiqueta, configurado para activarse en páginas que tienen este formulario specific en la fuente HTML.

Ahora, cada vez que se detecte el envío de un formulario, su etiqueta HTML personalizada se activará y enviará el siguiente objeto a dataLayer:

{
    'occasion': 'customized.occasion.submit',
    'customized.gtm.aspect': type#contactUs,
    'customized.gtm.elementClasses': '',
    'customized.gtm.elementId': 'contactUs',
    'customized.gtm.elementTarget': '',
    'customized.gtm.elementUrl': 'https://www.area.com/my-form-handler/',
    'customized.gtm.originalEvent': submitEvent
}

Y puedes seleccionarlos con las variables de la capa de datos que creaste anteriormente.

Solo necesitarás un Activador de evento personalizadodonde el Nombre del evento El campo tiene el valor customized.occasion.submit.

Una vez que adjunte ese disparador a su etiqueta, puede usar las variables de la capa de datos para completar todos los campos relevantes.

Resumen

Siempre que hablo de GTM con alguien, y es muy a menudo, siempre termino hablando de las muchas formas en que podemos personalizar Google Tag Supervisor para que funcione de forma aún más eficiente en nuestros sitios internet. Los detectores de eventos personalizados siguen siendo, después de todos estos años, mi forma favorita de personalizar una configuración de GTM.

Te dan mucho poder para rastrear las interacciones de los usuarios en el sitio.

Como siempre, espero que GTM siga lanzando nuevos activadores predeterminados para nosotros. Hace tiempo que sueño con un activador de evento “en blanco”, donde simplemente hay que añadir el nombre del evento DOM y también tendría una casilla de verificación para indicar si se desea utilizar seize Modo o no. Haría que esta solución personalizada fuera redundante, pero eso es algo bueno sólo en mi opinión.

¿Ha creado algún oyente de eventos personalizado y creativo en sus configuraciones de GTM?