Implementación de eventos con jquery y google tag manager

Trucos con Google Tag Manager: Eventos y páginas virtuales con jquery

Tras la introducción por parte de google de la herramienta Tag Manager, todos los profesionales que nos dedicamos al sector vimos como nuestras gestiones con los departamentos de IT y desarrolladores se veían reducidas a la implementación de un simple fragmento de código.

Una de las características que faltan en esta gran herramienta para ser la herramienta definitiva es la implementación de eventos dinámicos. Si que es verdad que gracias a las macros podemos aplicar variables a un conjunto de tags pero en el caso de que queramos capturar eventos como un clic o un envío de un formulario necesitamos utilizar jquery.

En este post vamos a ver un ejemplo de como capturar el envío de un formulario de comentario en wordpress.

Código de google tag manager

El primer paso es enviar a nuestro departamento de IT o desarrollo el código de GTM y la cabecera de jquery en el caso que nuestro site no use esta tecnología.

En el caso del código de GTM tras distintas pruebas teniendo problemas a la hora de cargar el código de analytics la mejor opción es hacer la llamada al array _gaq antes del código de GTM.

<script type="text/javascript">var _gaq = _gaq || [];</script>
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->

GTM comprime todos los tags que tengamos en un solo archivo y los lanza, de la misma manera que un compilador, renombrando variables y parámetros. Por ahora es la solución que mejor nos funciona para evitar errores de javascript al cargar el código de analytics (si encontráis otra solución, comentadla 😉 )

Tras tener el código y la cabecera de jquery implementadas, lo primero será crear el tag con el código de google analytics:

<script type="text/javascript">var _gaq = _gaq || [];</script>
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->

En nuestro caso la declaración de _gaq se ha eliminado del código de analytics tradicional ya que como hemos visto antes la hemos declarado desde fuera

  var _gaq = _gaq || [];

Le aplicamos la regla para que se muestre en todas las páginas de nuestro site y lo publicamos.

Eventos y páginas virtuales

En nuestro caso queremos medir el número de comentarios que cada post genera, pero podría servir para medir las descargas de un pdf, likes y retweets, etc…

La manera tradicional sería mandar una línea al departamento de IT con el evento que se debe lanzar en el submit del formulario, pero ahora con google tag manager podemos hacerlo mucho más rápido aunque necesitemos un cierto conocimiento de jquery.

<script>
$(document).ready(function(){
  $('#commentform').submit(function() {
    var nombre = "'" + $('h1').text() + "'";
    _gaq.push(['_trackEvent', 'Post', 'Comentarios', nombre]);
  });
});
</script>

Ese sería el tag para recoger un evento al enviar un comentario a un post. En el podemos ver que necesitamos la clase o el id del formulario (#commentform) para recoger el evento submit (podemos recoger cualquier evento con jquery).

Además queremos recoger el nombre del post para ver que posts generan más conversación, en una página de blog el h1 suele ser el título del post por ello recogemos el h1 y lo pasamos como etiqueta del evento. En otros casos necesitaras el id del elemento o la clase.

En este caso podemos utilizar la misma regla que en el código de analytics y mandarlo a todas las páginas.

Solo queda esperar y verificar con analytics que los datos se recogen correctamente.

evento jquery Google Tag ManagerConclusión

Una de las grandes características de GTM es que si cometemos un error de código la propia herramienta nos dará un warning y no publicará la versión errónea.

De la misma manera podemos utilizar la función trackPageview() para lanzar páginas virtuales, como accesos a las pasarelas de pago.

Con este ejemplo podemos ver que con conocimientos de jquery e imaginación podemos recoger casi cualquier cosas que se nos ocurra sin pasar por los desarrolladores que, rompiendo una lanza a su favor, muchas veces suficiente tienen con el mantenimiento del site en cuestión.

Leave a Comment

doce − dos =