Saltar al contenido principal
Iniciar sesión

¿Para qué sirve la configuración de Javascript personalizado? ¿Cómo enviar eventos específicos a Google Analytics?

  • Actualización

En diferentes páginas de Wormhole Campus se disparan eventos que pueden ser capturados mediante javascript y enviados a algún sistema externo. A continuación se detallan los eventos e información disponible en diferentes páginas del Campus, y se muestran ejemplos de utilización.

En este artículo veremos las ventajas y posibilidades que nos da la configuración de Javascript personalizado. Esto nos permite rastrear información valiosa, cómo también acceder a campos que nos van a dar contenidos valiosas para nuestro Campus. 

Variables globales y eventos en el javascript del campus

Variables globales

Variables del usuario

Se puede acceder de manera global a los campos extendidos del usuario como tambien algunos atributos del usuario.
Los campos accesibles son:

  • organization
  • area
  • department
  • position
  • region
  • extra1
  • extra2
  • tags
  • identifier
  • firstName
  • lastName
  • roleMode

A modo ejemplo en la seccion del js personalizado podria poner algo asi:

ImagenActualizada.png

Eventos en Javascript

Eventos en las Landing pages de los cursos

Cuando un usuario hace click sobre el botón "inscribirme" se dispara el evento EnrollEvent. Esto solamente representa la intención respecto de la inscripción de un usuario al curso. Luego de hacer click en ese botón el usuario deberá loguearse o registrarse.


Una vez logueado al campus:

  1. Si el curso es pago, se mostrará el precio y la posibilidad de ingresar un código de descuento. El usuario deberá elegir el método de pago para poder continuar. Al elegirlo, se habilitará el botón (ir a Paypal por ej). Al hacer click sobre este botón, se dispara el evento CheckOutEvent. En este caso, este evento solo representa que el usuario se va hacía el sitio del medio de pago. No confirma efectivamente la compra, ya que puede fallar en Paypal o MercadoPago.
  2. Si el curso es gratis, se dispara el evento CheckOutEvent y luego el usuario es redirigido al curso mismo (a la portada del mismo). En este caso el evento si representa una inscripción exitosa y se puede verificar con el evento FirstAccessToEvent explicado a continuación.

Variables disponibles para obtener información del curso en cuestión:

También se dispone de las siguientes variables que exponen información relacionada a un curso, siempre y cuando estemos en la landing page de un curso. No estan disponibles dentro de los cursos.

  • Precio del evento/curso
    priceFormatted = "100,00"

  • Moneda:
    currencySymbol = "ARS"

  • Es un evento/curso gratuito?
    isFreeLiveEvent = false

  • Número único de identificación del evento/curso
    liveEventId = "81630"

Variables disponibles para obtener información del usuario logueado en cuestión:

Se dispone de las siguientes variables que exponen información del usuario en cuestión.

  • Email del usuario logueado. En caso de que no haya un usuario logueado, el valor será undefined.
    userEmail = "usuario@mail.com"

Nota: Estas variables solo están disponibles en las landing pages de los cursos. No se encuentran disponibles dentro de los cursos.

Eventos en la página del curso (HOME)

Cuando un usuario accede a la página del curso por primera vez, al terminar de cargar esta página, es disparado el evento FirstAccessToEvent . Esto nos indica que un participante accedió por primera vez al evento/curso en cuestión. Si no es la primera vez que se accede, cada vez que el usuario acceda se disparará AccessToEvent.

Cuando un participante completa un curso/evento, se dispara el evento CompletedEvent. Este evento puede dispararse cuando un usuario termina de ver todos los contenidos del curso, o inmediatamente después que aprobó un examen y este examen era el último contenido del curso.

Nota importante: Este evento se va a disparar sólo una vez, ya que es una acción única. Si el estudiante continúa accediendo al curso, luego de haberlo completado, sólo el evento AccessToEvent va a ser disparado.

Variables disponibles para obtener información del curso en cuestión :

Se dispone de las siguientes variables que exponen información del curso en cuestión:

  • Número único de identificación del evento/curso
    idLiveEvent = "81630"

  • Javascripts de ejemplo
    Para suscribirse a los eventos descritos previamente pueden agregar el siguiente código (modificando según sus necesidades particulares) al Campus mediante la opción javascript personalizado en la Configuración General.

  • Para enviar eventos al tracking de Google Analytics

<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','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-12345678-90', 'auto');
  ga('send', 'pageview');

$(document).on('EnrollEvent',function(){
// ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);
ga('send', 'event', 'Inscription', 'Start', 'InscriptionStarted', liveEventId]);
});
$(document).on('CheckOutEvent',function(){
// ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);
// ga('send', 'event', 'Inscription', 'Payment', 'InscriptionPayment', 'priceFormatted', [fieldsObject]);
});

$(document).on('FirstAccessToEvent',function(){
// ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);
// ga('send', 'event', 'UML', 'FIRST_ACCESS');
});
</script>
  • Si el Evento es pago, devuelve precio y moneda en la consola
<script>

$(document).on('EnrollEvent',function(){
console.log("Se disparó ErrollEvent"); // confirma si se disparó correctamente ErrollEvent
console.log("LiveEvent Id",liveEventId);//Devuelve el id del evento
console.log("Es Gratuito?",isFreeLiveEvent); // Devuelve false o true si el evento es gratuito o no

if(isFreeLiveEvent==false){ //Pregunta si el Live Event no es gratis, en caso de no serlo devuelve el precio y moneda
console.log("PriceFormatted",priceFormatted); 
console.log("Monedad",currencySymbol);
}


});
</script>

Para enviar eventos al tracking de Facebook

<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '1234567890123456789'); // Insert your pixel ID here.
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=1234567890123456789&ev=PageView&noscript=1"
/>
<!-- DO NOT MODIFY -->
<!-- End Facebook Pixel Code -->
<!-- Start event tracking -->

$(document).on('EnrollEvent',function(){
	/*
	fbq('track', '<EVENT_NAME>', {
	<parameter_key>: <parameter_value>,
	<parameter_key>: '<parameter_value>',
	<parameter_key>: '<parameter_value>'
	});
	*/
	if (isFreeLiveEvent==true) {
			fbq('track', 'InscriptionToFreeCourse', {
			course: 'liveEventId',
			});
		} else {
			fbq('track', 'InscriptionToPaidCourse', {
			course: 'liveEventId',
			price: 'priceFormatted'
			});
		}
});
$(document).on('CheckOutEvent',function(){
	fbq('track', 'InitiateCheckout');
});
<!-- End event tracking -->
</noscript>

Eventos en la biblioteca

En la biblioteca del estudiante se envían eventos para capturarlos y manipularlos desde el js personalizado. Los eventos que enviamos son:

  1. Cuando un estudiante entra a la biblioteca
  2. Cuando un estudiante ve un documento de la biblioteca
  3. Cuando un estudiante descarga un documento de la biblioteca

Para el caso 1 se envía el evento ViewStudentLibrary en el cual se envían datos en formato json, los cuales son los ids de la suscripción y del usuario que visito la biblioteca.

{ idSubscription: idSubscription, idUser: userId }

Para capturar el evento se tiene que hacer
$(document).on("ViewStudentLibrary", function(event, data){ });

Para el caso 2 se envia ViewDocumentInStudentLibrary y los datos que se envia son el id de la suscripción, el id de usuario que lo está viendo y el id del documento que vio.

{ idSubscription: idSubscription, idUser: idUser, idLibraryDocument: idLibraryDocument }

Para captura el evento se tiene que hacer
$(document).on("ViewDocumentInStudentLibrary", function(event, data){ });

Para el caso 3 se envia DownloadDocumentInStudentLibrary y los datos que se envía son el id de la suscripción, el id de usuario que lo esta descargando y el id del documento que descargo.

{ idSubscription: idSubscription, idUser: idUser, idLibraryDocument: idLibraryDocument }.

Para capturar el evento se tiene que hacer
$(document).on("DownloadDocumentInStudentLibrary", function(event, data){ });

Capturar los eventos de la biblioteca y mandarlos a analytics
Para capturar los eventos desde el js personalizado deberían hacer esto
JS personalizado ejemplo usando ga.js

<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','https://www.google-analytics.com/analytics.js','ga');
 
  ga('create', 'UA-12345678-9', 'auto');

  var gaID =  'UA-123345678-9'; // poner el id de su analytics
  ga('create', gaID, 'auto');
  ga('send', 'pageview');
  
$(document).on("ViewStudentLibrary", function(event, data){
  ga('send', { 
    hitType: 'event',  
    eventCategory: 'StudentLibrary',
    eventAction: 'Visit',
    eventLabel: 'Usuario: '+ data.idUser,
    eventValue: data.idSubscription,
   });
});

$(document).on("ViewDocumentInStudentLibrary", function(event, data){
 var idSubscription = 'SubscriptionId: ' + data.idSubscription;
 ga('send', {
  hitType: 'event',
  eventCategory: 'StudentLibrary',
  eventAction: 'DocumentView',
  eventLabel: idSubscription, // Es para poder filtrar por suscripcion
  eventValue: data.idLibraryDocument; // Para saber como contabiliza 
  });
});

$(document).on("DownloadDocumentInStudentLibrary", function(event, data){
 var documentId = 'Document-' + data.idLibraryDocument;
   ga('send', {
    hitType: 'event',
    eventCategory: 'StudentLibrary',
    eventAction: 'DocumentDownload',
    eventLabel: documentId, // Es para poder filtrar por documento
    eventValue: data.idSubscription, // Para saber como contabiliza
   });
 });
</script>
Explicacion de campos de Google Analytics (GA)

   ga('send', {
    hitType: 'event',
    eventCategory: 'StudentLibrary',
    eventAction: 'DocumentDownload',
    eventLabel: documentId,
    eventValue: idSubscription,
   });

 

eventCategory : Especifica la categoría de evento y no puede estar vacío. (link).
El valor tiene que ser texto.
En nuestro caso pusimos StudentLibrary para saber que es un evento que viene desde la biblioteca del estudiante

eventAction: Especifica la acción del evento. No puede estar vacío. (link)
El valor tiene que ser texto.
En nuestro caso pusimos la accion 'DocumentDownload', es la acción que realiza el usuario en la biblioteca con un documento.

eventLabel: Especifica la etiqueta del evento. (link)
El valor tiene que ser texto.
En nuestro caso este lo usamos como un identificador para poder filtrarlo, el valor usamos es el id del document “Document: 1345”, así a la hora de generar los reportes se puede saber que paso con ese documento.

eventValue: Especifica el valor del evento y no puede ser un valor negativo. (link)
El valor tiene que ser un entero.
En nuestro caso le pusimos como valor el Id de la suscripción, lo usamos para contabilizar que suscripcion tocó este documento.

 

 

 

Comentarios

0 comentarios

Inicie sesión para dejar un comentario.