Como agregar eventos de Analytics a enlaces en Joomla

Te mostrare 2 formas diferentes de medir esos clicks partiendo de la base de que tienes conocimientos básicos de Google Analytics.

Primero te explicaré como crear el objetivo dentro de Analytics, para eso nos dirigimos a https://analytics.google.com y entrando a nuestra cuenta ingresamos a Administrar y seleccionamos el sitio en el que vamos a crear los objetivos.

En este ejemplo te mostrare como crear un objetivo para los eventos de click en el teléfono del sitio suponiendo que dicho teléfono lo tenemos agregado en un modulo Personalizado (custom).

Damos click en Cuenta -> Propiedad -> Vista -> Objetivos



Después deberemos ver una tabla como la siguiente:


y deberemos dar click en el botón rojo + NUEVO OBJETIVO, en la siguiente ventana crearemos nuestro objetivo, en el paso 1 Configuración del objetivo seleccionamos Personalizar y damos click en Continuar.




En el paso 2 Descripción del objetivo le asignamos un nombre a nuestro objetivo y en Tipo seleccionamos Evento y damos click en Continuar



En el siguiente paso, el 3 Información del objetivo configuramos la información que después le enviaremos para marcar el objetivo, en nuestro ejemplo pondré los siguientes:

Categoria: telefono
Acción: click
Etiqueta: llamada
El campo Valor lo dejamos vacio.

En todos los casos dejamos seleccionada la opción de Igual a.

Los demás datos los dejamos como están.



Y damos click en Guardar y listo, con eso creamos en Analytics el objetivo, ahora sigue enviarle la información del evento para ese objetivo.

Ahora configuremos nuestro Joomla

Para esto te mostraré 2 formas de hacerlo con nuestro sitio en Joomla, la primera será modificando el plugin del editor TinyMCE y la segunda usando jQuery.


Metodo 1: Modificando el editor TinyMCE.
Para esto dentro de Joomla nos dirigimos a Extensiones -> Plugins y buscamos la opción que dice Editor - Tiny MCE y damos click en el.



Aquí será importante de asegurarnos de seleccionar la opción que corresponde al usuario Joomla que utilicemos, si estás usando el usuario Super admin y no has modificado nada de los datos por default entonces selecciona la opción que dice Conjunto 0 como se muestra a continuación:



Cuando hagas click en Conjunto 0 se cambiarán las opciones para los usuarios que se indican en Asignar este conjunto a en el recuadro más abajo.

Después de seleccionar el conjunto correcto nos dirigimos abajo a la opción Elementos válidos extendidos y escribimos a[*] y damos click en Guardar y cerrar.

Con esto ya podremos agregar eventos javascript dentro de nuestros enlaces en cualquier parte que se utilice el editor TinyMCE (módulos, componentes, etc.).

En nuestro ejemplo supondré que tienes un modulo con el texto tipo: Teléfono: (xx) xxxx xxxx, te recomiendo que lo cambies por un link del tipo tel, para esto, dentro del modulo haz click en Cambiar editor (abajo del editor) para ver el código html del modulo y cambiamos el teléfono por algo como esto:

<a href="tel:xxxxxxxxx">(xx) xxxx xxxx</a>

Esto lo que hará será transformar el teléfono simple en un link que al dar click en el desde un dispositivo compatible nos intentará marcar a dicho número. Ahora, para crear el evento en el link lo cambiamos por algo así:

Si usamos la versión de Google Analytics ga.js

<a href="tel:xxxxxxxxx" onclick="ga('send','event','telefono','click','llamada');">(xx)xxxx xxxx</a>

Si usamos la nueva forma Gtag deberá quedar así:

<a href="tel:xxxxxxxxx" onclick="gtag('event', 'click', {'event_category': 'telefono','event_label': 'llamada'});">(xx)xxxx xxxx</a>

y listo, con esto ya estaremos generando el evento al dar click en el teléfono.


Metodo 2: Utilizando jQuery
Para generar los eventos usando jQuery en los enlaces y no tener que modificar el editor TinyMCE como en el método anterior entonces podemos agregarle una clase a los links tipo:

<a href="tel:xxxxxxxxxx" class="link-phone">(xx)xxxx xxxx</a>

y en nuestro archivo de JS agregamos el siguiente código:

$("a.link-phone").on("click",function(){
	// Si usamos el codigo GA
	ga('send','event','telefono','click','llamada');
	// Si usamos el codigo nuevo GTAG
	gtag('event', 'click', {'event_category': 'telefono','event_label': 'llamada'});
});

y listo, hemos visto 2 opciones para agregar los eventos, pero quizá tengas algunas preguntas como:

¿Como se, cual código de Google Analytics tengo?
Existen en realidad 3 tipos de códigos, estos han ido cambiando con el paso del tiempo, el primero fue el código _gaq que hace mucho tiempo dejo de usarse, después le siguió el código ga que ahora sea quizá el más extendido y existe también el nuevo, el gtag, pero como saber cual usar?

El código _gaq es del tipo:

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

El código GA es del tipo:

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXX-X', 'auto');
  ga('send', 'pageview');

</script>

Y el nuevo, el Gtag es del tipo:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-285512-20"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXXX-X');
</script>

Tendrás que revisar el código fuente de tu sitio para saber cual método utilizar.

En Analytics la forma de crear los objetivos no cambia en base al código que usas, lo que cambia es la forma de enviarle la información de los eventos desde nuestro sitio.

Y ahora ¿Que sigue?

Hasta ahora ya hemos creado el objetivo y el envío de los eventos en nuestro sitio pero pues y ahora ¿que sigue?, ver esa información en nuestro Google Analytics, para nuestro evento configurado podemos irnos a nuestro panel de Analytics y nos dirigimos a EN TIEMPO REAL -> Eventos y cada que alguien haga click en nuestro teléfono se generará un evento cumplido.

Con esto, podremos medir mejor las acciones que los visitantes hagan en nuestro sitio, puedes crear eventos para los clicks en emails, llenado de formularios, tiempo en el sitio, etc. cualquier cosa que pueda generar un evento de los visitantes.

Un tema extra sería, ¿cual sería la importancia de medir este tipo de eventos?.... cuando creas campañas de publicidad inviertes dinero, es importante medir que tan redituable es esa inversión, entonces por eso es bueno (vital) medir los resultados, existen acciones que se realizan en un sitio que si no se miden pueden hacer creer a tu cliente que esta haciendo una mala inversión. Muchas veces, en un sitio el visitante puede no llenar un formulario, quizá prefiera llamar directo a la tienda para continuar con su compra o resolver sus dudas... el medir los clicks en el teléfono puede servir para tu reporte de rendimiento de campañas mostrándole al cliente cuanta gente llamó después (o durante) de visitar el sitio.

Si bien, no toda la gente que llame a la tienda lo hará dando click en el teléfono esto te servirá para estar más cerca de los resultados reales de la campaña, es decir, puede haber visitantes que entren al sitio desde una pc y viendo el teléfono marquen de manera directa sin haber hecho el click en el link, para estos casos podrías hacer que el teléfono esté oculto y que se deba hacer click para mostrarlo, cosa que no recomiendo mucho, salvo que te sea vital ser más exacto en las mediciones, algunas veces aclarandole el punto al cliente será para el entendible la generación de leads no medibles.

Otro evento muchas veces no medible puede ser que el visitante vea la ubicación desde el sitio y genere una visita física a la tienda, Google esta realizando ajustes para que por medio de ubicaciones GPS pueda verificar si un usuario entro a un sitio y después realizo una visita física a la tienda de dicho sitio.

Este post es solo para mostrar como generar un evento medible, lo demás dependerá de cada quien.

Si te gusto este post por favor compártelo y comenta.