Wed. Nov 6th, 2024

Seguimiento de interacciones en Shadow DOM mediante Google Tag Supervisor


Cuando realmente aterrizó en el elemento inside #shadow-rootDe manera related, debido a que el contenido del DOM de sombra está oculto a la estructura principal, coincide con el selector CSS No se puede usar el predicado para ver qué hay dentro del elemento en el que se hizo clic.

¡Podemos solucionar este problema! No podemos usar los activadores integrados de GTM porque no nos permiten acceder a los occasion objeto en sí. Pero podemos utilizar un detector de eventos personalizado.

Para obtener más detalles sobre cómo funciona el manejo de eventos dentro del shadow DOM, eche un vistazo a Este excelente artículo sobre el tema..


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!

Cómo funciona el manejo de eventos con el shadow DOM

Los detectores de eventos dentro del shadow DOM funcionan igual que los detectores de eventos en las estructuras DOM normales. Se registra un evento y llena una ruta a través de las capas del sitio durante el seize y bubble etapas.

Algunos eventos suben hacia la parte superior del árbol DOM, otros permanecen en el nodo donde se registró el evento.

La principal diferencia con el shadow DOM es que los eventos que comienzan a ascender solo cruzan el límite del shadow DOM si tienen la propiedad composed ajustado a true.

La mayoría de los eventos tienen composed ajustado a truePor lo basic, las excepciones son eventos que no se basan en interacciones de la interfaz de usuario, como estos:

Para eventos que tengan composed ajustado a truepodemos adjuntar un detector de eventos personalizado en el doc nodo, por ejemplo, y los eventos que tienen lugar dentro del DOM de sombra se propagarán a nuestro oyente (asumiendo que también burbujao el oyente ha sido configurado para detectar el captura fase en su lugar).

Sin embargo, todavía nos enfrentamos al problema presentado al principio de este artículo. Todos los eventos que tienen lugar en el shadow DOM se delegan automáticamente al padre del #shadow-rootEsto no es muy útil. El DOM de sombra podría ser algo enorme y extenso, por lo que necesitamos precisión.

Por suerte, podemos utilizar el Occasion.composedPath() método para obtener una matriz que representa el camino El evento se produjo a medida que surgía. El primer miembro de la matriz es el elemento que se de hecho hecho clic (a menos que el DOM de sombra estuviera closedpero volveremos a eso en un minuto).

Podemos utilizar esta información para construir nuestro oyente.

El oyente

En Google Tag Supervisor, crea un Etiqueta HTML personalizaday escriba o copie y pegue el siguiente código.

<script>
  (perform() {
    // Set to the occasion you need to monitor
    var eventName = 'click on',
    // Set to false should you do not need to use seize section
        useCapture = true,
    // Set to false if you wish to monitor all occasions and never simply these in shadow DOM
        trackOnlyShadowDom = true;

    var callback = perform(occasion) {
      if ('composed' in occasion && typeof occasion.composedPath === 'perform') {
        // Get the trail of components the occasion climbed via, e.g.
        // (span, div, div, part, physique)
        var path = occasion.composedPath();
        
        // Fetch reference to the aspect that was really clicked
        var targetElement = path(0);
        
        // Verify if the aspect is WITHIN the shadow DOM (ignoring the basis)
        var shadowFound = path.size ? path.filter(perform(i) {
          return !targetElement.shadowRoot && !!i.shadowRoot;
        }).size > 0 : false;
        
        // If solely shadow DOM occasions ought to be tracked and the aspect just isn't inside one, return
        if (trackOnlyShadowDom && !shadowFound) return;
        
        // Push to dataLayer
        window.dataLayer.push({
          occasion: 'custom_event_' + occasion.kind,
          custom_event:  '',
            elementUrl: targetElement.href 
        });
      }
    };
    
    doc.addEventListener(eventName, callback, useCapture);
  })();
script>

Puedes adjuntar un Vista de pagina Activador de esta etiqueta. Después de eso, cada clic en las páginas donde el detector está activo se enviará a dataLayer con un contenido de objeto que se parece a esto:

En este caso, el clic recayó en un

with only a few attributes, however which was contained within the shadow Dom (as isShadowDom es true).

Luego puede crear un disparador de evento personalizado para custom_event_click:

También puedes crear variables de capa de datos para los elementos individuales en el objeto enviado de esta manera:

Al cambiar eventName decir, submiten su lugar, puedes escuchar los envíos de formularios.

Si desea evitar que el script envíe un mensaje con cada instancia de evento particular personpuedes agregar controles dentro de la devolución de llamada que verifiquen que el objetivo del evento period un tipo específico de elemento. Por ejemplo, para enviar a dataLayer solo si el clic aterrizó en un enlace, puedes hacer algo como esto:

var callback = perform(occasion) {
  ...
  var targetElement = path(0);
  if (targetElement.matches('a, a *')) {
    // Run the dataLayer.push() right here
  }
  ...
...

¡Nota! Aunque se trata solo de un ejemplo, debes tener en cuenta que .matches() No funcionará en IE y necesitarás usar .msMatchesSelector().

¿Qué pasa con los eventos no compuestos?

¿Qué sucede si desea realizar un seguimiento de eventos que no tienen el composed bandera puesta a true? Si recuerdas, esos eventos no se propagarán más allá de los límites del shadow DOM. De manera related, si usas el script anterior, también tendrán el inShadowDom bandera puesta a falseya que prácticamente no se dan cuenta del hecho de que están en un DOM sombra (estilo Matrix).

Por lo tanto, deberás realizar el manejo de eventos sin el poder de la delegación. En otras palabras, deberás agregar los oyentes directamente a los elementos.

Por ejemplo, si quisieras rastrear un load evento para un

Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *