Diversión con Google Tag Supervisor: Parte 1

Es hora de buscar en mi biblioteca de consejos algunas cosas interesantes que puedes hacer con Administrador de etiquetas de Google para mejorar el etiquetado de su sitio. Algunos de estos son magia macro De principio a fin, algunas de estas son las mejores prácticas y otras son cosas que le harán la vida más fácil mientras gerente una solución de gestión de etiquetas.

He dividido esta publicación en dos partes para que sea más Hobbit y menos El Señor de los Anillos a lo largo.

Esto es lo que encontrarás en esta primera parte:

1. Desvincular jQuery

2. Los campos no definidos no se envían a GA

3. Seguimiento de evento de copia

4. Errores como eventos

Mantén los ojos bien abiertos para la segunda parte.

Lo sé, la anticipación probablemente te esté matando.

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.

1. Desvincular jQuery

No soy un gran admirador de jQuery. Quiero decir, definitivamente es útil, ya que simplifica gran parte de la sintaxis difícil y propensa a errores que implica el complejo JavaScript. Al mismo tiempo, disfruto de los desafíos complejos y aprender de la manera más difícil definitivamente me ha convertido en un mejor desarrollador.

En mi experiencia, y esto es definitivamente un muy vista marginal, jQuery introduce un cierto grado de, erm, descuido. Sé que el argumento de “es demasiado fácil” es infantil, pero en algunos casos la falta de transparencia sobre lo que realmente sucede en el código puede provocar un trabajo de desarrollo bastante pobre. En cierto modo, jQuery se trata más de leyendo un guide que crear código, y eso apesta. Especialmente con los controladores de eventos, algunas decisiones de desarrollo están claramente influenciadas por lo fácil que es vincular los controladores a los elementos.

Para Google Tag Supervisor, esto es muy acquainted. Un inofensivo return false; o e.stopPropagation() evitará que sus oyentes de GTM recuperen el evento DOM. A menudo, la única razón por la que la propagación se cancela de esta manera es el hecho de que el código se copió y pegó de alguna discusión de Stack Overflow que no tiene ninguna relación con el marcado de su sitio internet.

Vale, perdón por la queja. Esto es lo que sugiero. Siempre que su oyente GTM no se lively cuando debería, abra la consola de JavaScript y escriba la siguiente línea de código allí…

if(typeof(jQuery)!=='undefined'){jQuery('physique').discover('*').off();}

…y presiona enter. Luego intente hacer clic o enviar el formulario nuevamente.

Lo que hace esta easy línea es desvincular todo Controladores de eventos jQuery de todos los elementos HTML en el cuerpo del documento. Si su oyente GTM funciona después de esto, significa que hay algún script jQuery que interfiere. El siguiente paso es encontrar el script problemático y pedirle a su desarrollador que lo solucione para no impedir la propagación.

(Asegúrate de revisar mi Extensión de Chromedonde esta función está cómodamente a solo un clic de distancia).

O puedes elegir la ruta del hacker. Si encuentra el script que interfiere y encuentra la función que capta sus clics o envíos e impide la propagación, puede usar una etiqueta HTML personalizada para solucionarlo.

¡NOTA! Este es un cortar. Asegúrese de probar, probar y PROBAR antes de publicar un contenedor donde desvincula jQuery. Además, no estaría de más consultar con alguien que comprenda qué controladores de eventos se utilizan en el sitio.

Supongamos que tiene un botón Volver al principio que no envía clics a los oyentes de GTM. Encontrará el código en uno de los recursos de la página y se parece a esto:

jQuery('.top-of-page, a(href="#high")').click on(operate () {
  jQuery('html, physique').animate({
    scrollTop: 0
  }, 400);
  return false;
});

Como puedes ver, el temido return false; está ahí. Eso es lo que impide que los eventos trepen por el árbol DOM.

Para solucionar este problema, cree una nueva etiqueta HTML personalizada con el siguiente código dentro:

<script>
  jQuery('.top-of-page, a(href="#high")').off('click on');
  jQuery('.top-of-page, a(href="#high")').click on(operate(e) {
    e.preventDefault();
    jQuery('html, physique').animate({
      scrollTop: 0
    }, 400);
  });
script>

Si jQuery y el script problemático están cargados en el of your template, you possibly can have this tag fireplace on {{url}} matches RegEx .*. In the event that they’re loaded elsewhere (like within the footer of your web page), you may want another occasion rule comparable to {{occasion}} equals gtm.load.

operate() {
  var t;
  var y = "";
  return t; // returns undefined kind
  return; // returns undefined kind
  return undefined; // returns undefined kind
  return false; // returns boolean kind
  return y; // returns string kind
  return x; // throws ReferenceError
}

<script>
  var dataLayer = ({'blog-author': 'Simo Ahava'}); // Weblog creator declared, dimension will get despatched
script>
...
<script>
  var dataLayer = (); // Weblog creator not declared, dimension is not going to get despatched
script>

<script>
  var c = doc.getElementById("entry-content");
  if(typeof(c)!=='undefined') {
    c.addEventListener('copy', operate(evt) {
      dataLayer.push({'occasion': 'copy'});
    });
  }
script>

...
dataLayer.push({'occasion': 'copy', 'copy-id': evt.goal.id, 'copy-content': evt.goal.innerHTML});
...

var myText = "Hi there!";
alert(myTxt); // Unchecked ReferenceError, will fireplace GTM's error listener

// Exception caught, is not going to fireplace GTM's error listener
strive {
  alert(myTxt);
} catch(e) {
  console.log(e.message);
}

1. {{Error - Message}}, the place variable identify is gtm.errorMessage

2. {{Error - Line}}, the place variable identify is gtm.errorLineNumber

3. {{Error - URL}}, the place variable identify is gtm.errorUrl