223 anunciantes en línea
223 anunciantes en línea
Aquí encontraras toda la información necesaria sobre la implementación de tus códigos de seguimiento en Google Analytics. ¡Pregunta a nuestros expertos todas tus dudas!
Guiame
favorite_border
Responder

SEGUIMIENTO DE EVENTOS

Novato ✭ ✭
# 1
Novato ✭ ✭

Buenas tardes. 

 

Tengo un problema, resulta que estoy creando eventos para la página WEB de la compañía en la que trabajo. Ya tengo el código ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]); y sé que poner en cada uno, pero lo que aún no sé, es dónde implementarlo. Por ejemplo quiero saber las veces que le dan click al botón de descarga del portafolio y click al botón para conocer más información de uno de nuestros productos. Cómo hago para especificar cada botón, es decir como le digo a analytics que mida los clicks del botón de portafolio y los clicks del botón de información de producto. Y ese código dónde lo incluyo.

Gracias, quedo atento a la respuesta.  


Soluciones aceptadas
Marcado como solución aceptada.
Solución
Aceptado por el autor del tema Comercial VECTOR ITC C
junio

Re: SEGUIMIENTO DE EVENTOS

[ Editado ]
Estudiante ✭ ✭ ✭
# 2
Estudiante ✭ ✭ ✭

Hola @Comercial VECTOR ITC C,

 

Como respondí en este otro post, necesitas saber un poquito de javascript, y entender las bases de como funciona un evento en analytics.

 

Primero, viendo lo que vos pusiste, tené en cuenta que segun la documentación, lo que pusiste en corchetes son valores de tipo texto, y en javascript van entre comillas como están send y event.

De modo que en vez de:

ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);

 

te quedaria:

ga('send', 'event', 'eventCategory', 'eventAction', 'eventLabel', 'eventValue', 'fieldsObject');

 

En realidad, el parametro fieldsObject es un "objeto" en javascript que se puede enviar conteniendo todos los valores anteriores (es como una opción más avanzada, no viene al caso complicarnos ahora), por lo tanto lo removemos:

ga('send', 'event', 'eventCategory', 'eventAction', 'eventLabel', 'eventValue');

 

Además, para el escenario que planteas no necesitas eventValue (que sería util si estas tomando dinamicamente un valor cambiante como la suma del checkout de un e-commerce). Me refiero a que en tu escenario, la descarga de un portafolio no tiene un valor como evento sino como goal (y cuando configures un goal basado en uno de estos eventos, ahí vas a poder asignarle el valor). Así pues lo removemos también:

ga('send', 'event', 'eventCategory', 'eventAction', 'eventLabel');

 

Esta es la estructura de un evento suficientemente simple para lo que necesitas!

 

Ahora, según lo poquito que describís, se me ocurre que basta con una categoría y acción en común, y que el diferencial esta en el label. Yo llamaría a tu categoría "Botones" y a la acción "Click":

ga('send', 'event', 'Botones', 'Click', 'eventLabel');

 

Solo te falta llenar el eventLabel que en cada caso representará al elemento clickeado ('Descarga de XX portafolio' o 'Mas info de XX producto'). A mi me gustan los labels bien legibles (si, no hay problema que pongas una frase con espacios entre las comillas ya que es una cadena te texto) de este modo en tus reportes se ve todo más legible.

 

 

Antes de completar label entender la función ga():

Una función en javascript es algo que se ejecuta y realiza una acción, ¿Cómo se ejecuta? Bueno, basta con que esté ahi en tu html dentro de un bloque de tipo "script":

<script>
    ga('send', 'event', 'Botones', 'Click', 'eventLabel');
</script>

 

El problema con eso es que cada vez que se carga tu pagina se estaría enviando ese evento, porque como vimos recién solo basta que esté ahi para que el navegador la lea y la ejecute. Obviamente no es lo que queremos. Solo queremos que se ejecute ante una condición, la cual es, el click de un link.

 

Esto significa que tenemos que poner ese evento, adentro del suceso de otro evento (el evento "click" en javascript).

 

Para no hacer esta explicación más larga de lo que ya es, te quedaría algo así:

<a class="eventSender" data-event-label="Descarga de XX (portafolio)" href="/link-al-portafoli.pdf">Descargate el portafolio XX</a>

Tenes por un lado un elemento <a> (un link en HTML), el cual además de su atributo href que tiene el link a donde dirigir, tiene una clase CSS y un custom data attribute.

 

La clase CSS además de que sirve para dar estilos, en este caso la usamos como selector común a todos los links que queremos que funcionen con el evento.

 

Luego el data attribute es individual para cada portafolio/producto.

 

Ahora, el siguiente bloque de tipo script, debería ser pegado al final de tu pagina antes de que cierre el body (</body>).

<script>
    document.addEventListener('DOMContentLoaded', function () {
        jQuery('.eventSender').on('click', function(e){
              e.preventDefault();

             var link = jQuery(this);

            ga('send', 'event', 'Botones', 'Click', link.data('event-label'));

            window.open(this.href);
        });
    });
</script> 

La function de javascript lo que esta haciendo es:

  1. Escuchar cuando alguien clickea algún link con la clase eventSender (si vas a cambiar esa clase, asegurate de cambiarla tambien en esta función dejando el punto al inicio: .miNuevaClase
  2. Frenar momentáneamente la acción de seguir ese link
  3. Tomar el valor del data attribute e insertarlo como el valor del label del evento de analytics. Enviar dicho evento y
  4. Continuar siguiendo el link

 

Para esa función estoy usando jQuery, asegurate de que lo tengas en tu pagina (lo mas probable es que sí). Podes pasarnos la URL de tu sitio y te lo confirmo.

 

Si esta larguiiiiisima respuesta te sirvió, por favor marcala como solución del thread así queda cerrado este tema.

 

Éxitos!

Emiliano

 

 

 

 

 

 

Ver la solución en mensaje original publicado


Todas las respuestas
Marcado como solución aceptada.
Solución
Aceptado por el autor del tema Comercial VECTOR ITC C
junio

Re: SEGUIMIENTO DE EVENTOS

[ Editado ]
Estudiante ✭ ✭ ✭
# 2
Estudiante ✭ ✭ ✭

Hola @Comercial VECTOR ITC C,

 

Como respondí en este otro post, necesitas saber un poquito de javascript, y entender las bases de como funciona un evento en analytics.

 

Primero, viendo lo que vos pusiste, tené en cuenta que segun la documentación, lo que pusiste en corchetes son valores de tipo texto, y en javascript van entre comillas como están send y event.

De modo que en vez de:

ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);

 

te quedaria:

ga('send', 'event', 'eventCategory', 'eventAction', 'eventLabel', 'eventValue', 'fieldsObject');

 

En realidad, el parametro fieldsObject es un "objeto" en javascript que se puede enviar conteniendo todos los valores anteriores (es como una opción más avanzada, no viene al caso complicarnos ahora), por lo tanto lo removemos:

ga('send', 'event', 'eventCategory', 'eventAction', 'eventLabel', 'eventValue');

 

Además, para el escenario que planteas no necesitas eventValue (que sería util si estas tomando dinamicamente un valor cambiante como la suma del checkout de un e-commerce). Me refiero a que en tu escenario, la descarga de un portafolio no tiene un valor como evento sino como goal (y cuando configures un goal basado en uno de estos eventos, ahí vas a poder asignarle el valor). Así pues lo removemos también:

ga('send', 'event', 'eventCategory', 'eventAction', 'eventLabel');

 

Esta es la estructura de un evento suficientemente simple para lo que necesitas!

 

Ahora, según lo poquito que describís, se me ocurre que basta con una categoría y acción en común, y que el diferencial esta en el label. Yo llamaría a tu categoría "Botones" y a la acción "Click":

ga('send', 'event', 'Botones', 'Click', 'eventLabel');

 

Solo te falta llenar el eventLabel que en cada caso representará al elemento clickeado ('Descarga de XX portafolio' o 'Mas info de XX producto'). A mi me gustan los labels bien legibles (si, no hay problema que pongas una frase con espacios entre las comillas ya que es una cadena te texto) de este modo en tus reportes se ve todo más legible.

 

 

Antes de completar label entender la función ga():

Una función en javascript es algo que se ejecuta y realiza una acción, ¿Cómo se ejecuta? Bueno, basta con que esté ahi en tu html dentro de un bloque de tipo "script":

<script>
    ga('send', 'event', 'Botones', 'Click', 'eventLabel');
</script>

 

El problema con eso es que cada vez que se carga tu pagina se estaría enviando ese evento, porque como vimos recién solo basta que esté ahi para que el navegador la lea y la ejecute. Obviamente no es lo que queremos. Solo queremos que se ejecute ante una condición, la cual es, el click de un link.

 

Esto significa que tenemos que poner ese evento, adentro del suceso de otro evento (el evento "click" en javascript).

 

Para no hacer esta explicación más larga de lo que ya es, te quedaría algo así:

<a class="eventSender" data-event-label="Descarga de XX (portafolio)" href="/link-al-portafoli.pdf">Descargate el portafolio XX</a>

Tenes por un lado un elemento <a> (un link en HTML), el cual además de su atributo href que tiene el link a donde dirigir, tiene una clase CSS y un custom data attribute.

 

La clase CSS además de que sirve para dar estilos, en este caso la usamos como selector común a todos los links que queremos que funcionen con el evento.

 

Luego el data attribute es individual para cada portafolio/producto.

 

Ahora, el siguiente bloque de tipo script, debería ser pegado al final de tu pagina antes de que cierre el body (</body>).

<script>
    document.addEventListener('DOMContentLoaded', function () {
        jQuery('.eventSender').on('click', function(e){
              e.preventDefault();

             var link = jQuery(this);

            ga('send', 'event', 'Botones', 'Click', link.data('event-label'));

            window.open(this.href);
        });
    });
</script> 

La function de javascript lo que esta haciendo es:

  1. Escuchar cuando alguien clickea algún link con la clase eventSender (si vas a cambiar esa clase, asegurate de cambiarla tambien en esta función dejando el punto al inicio: .miNuevaClase
  2. Frenar momentáneamente la acción de seguir ese link
  3. Tomar el valor del data attribute e insertarlo como el valor del label del evento de analytics. Enviar dicho evento y
  4. Continuar siguiendo el link

 

Para esa función estoy usando jQuery, asegurate de que lo tengas en tu pagina (lo mas probable es que sí). Podes pasarnos la URL de tu sitio y te lo confirmo.

 

Si esta larguiiiiisima respuesta te sirvió, por favor marcala como solución del thread así queda cerrado este tema.

 

Éxitos!

Emiliano

 

 

 

 

 

 

SEGUIMIENTO DE EVENTOS

[ Editado ]
Novato ✭ ✭
# 3
Novato ✭ ✭

Buenos días, muy buena respuesta y si me sirvió, solo queda una duda:

 

1. sobre el uso del jQuery así que cómo me lo sugieres te dejo el link de nuestra página. http://proyectos-compartidos.com/

 

SEGUIMIENTO DE EVENTOS

Estudiante ✭ ✭ ✭
# 4
Estudiante ✭ ✭ ✭

@Comercial VECTOR ITC C,

Si, tenes jQuery así que podes pegar el código del ejemplo. Veo que pusiste analytics justo antes de cerrar el body (antes de </body>). Si bien eso funciona, es recomendable que analytics se cargue al inicio (después de abrir <body>) ya que así te aseguras de medir cuanto antes los rebotes.

 

Si dejas analytics donde está, asegurate de pegar el codigo de la conversión DEBAJO de analytics sino no tendrás disponible la función ga() en absoluto.

 

Saludos

Emiliano

SEGUIMIENTO DE EVENTOS

Novato ✭ ✭
# 5
Novato ✭ ✭

¿Te refieres a antes del </script> de analytics o despues del </script> ? 

SEGUIMIENTO DE EVENTOS

Estudiante ✭ ✭ ✭
# 6
Estudiante ✭ ✭ ✭

@Comercial VECTOR ITC C

 

Claro, DEBAJO del script de analytics (después de </script>

SEGUIMIENTO DE EVENTOS

Novato ✭ ✭
# 7
Novato ✭ ✭

Ya queda claro. 

Gracias por tu tiempo. 

SEGUIMIENTO DE EVENTOS

Novato ✭ ✭
# 8
Novato ✭ ✭

Emiliano ya estoy cerca a terminar de generar los eventos con ayuda de tus respuestas, pero me surge la duda si por cada botón debo generar un script.

 

Por ejemplo quiero que dentro de la landing page me mida los clics del botón del portafolio digital y también que me mida los clics del botón de información de un producto "X"  

 

para el primero quedaría un script así : 

 

<script>
document.addEventListener("DOMContentLoaded", fuction () {
jQuery('.eventSender').on('click', function(e){
e.preventDefault();
var link = jQuery(this);
ga("send","event", "botones", "clic" , " descarga del portafolio digital" )
window.open(this.href); });
});

</scrip>

 

¿Tengo que generar un script diferente para el otro botón? 

 

Quedo atento a tu respuesta, gracias. 

Re: SEGUIMIENTO DE EVENTOS

[ Editado ]
Estudiante ✭ ✭ ✭
# 9
Estudiante ✭ ✭ ✭

@Comercial VECTOR ITC C,

No, siempre y cuando utilices una clase CSS eventSender

 

Recuerda que esta linea:

 

jQuery('.eventSender').on('click', function(e){

esta "escuchando" cuando un evento on click suceda sobre un elemento con clase eventSender. CUALQUIER ELEMENTO CON ESA CLASE SIN IMPORTAR CUANTOS.

 

 

Cuando ya lo tengas, puedes probar a hacer clic y ver en tu Analytics, opcion de la izquierda llamada Tiempo Real (Real Time) > Eventos. Allí por cada click deberia aparecer tu evento.

 

PD:

Sin relación a lo anterior, he mirado tu código y veo que a lo ultimo luego de cerrar HTML tienes:

<link rel="stylesheet" href="./css/animate.min.css">

 

Eso no debe ir alli sino dentro de <head></head>. (Obviamente es un accidente?)