Google Analytics Ionic | Aprende a usarlo cómo un pro

¿Pensando en realizar un seguimiento de los usuarios en tu app? O quizás ya sabes lo que es Google Analytics, y su componente Google Analytics Ionic para Ionic pero te falta algún detallito para hacerlo funcionar cómo quieres ¿verdad?

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo vas a aprender a realizar un seguimiento de tus usuarios a través de Google Analytics en tu aplicación de Ionic.

Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde tu vas a aprender a hacer apps y a ganar dinero con ellas junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.

Requisitos previos para usar Google Analytics

Nunca lo comento, porque no lo veo necesario, pero para este artículo si lo es. Por eso, estos son los requisitos previos para poder usar el módulo.

• El proyecto tiene que tener una versión superior de Cordova 3.0 tanto para Android cómo para iOS.
• Es necesario crear una propiedad dentro de nuestra consola de Google Analytics. Si no tienes cuenta te la puedes hacer aquí: https://analytics.google.com
• En Android es necesario que tengas instalado el SDK de los Google Play Services. Lo puedes obtener siguiendo estos pasos: https://developer.android.com/studio/intro/update

Y listo, ya estaríamos en disposición de comenzar.

Instalación del componente Google Analytics en Ionic

Como siempre, al tratarse de un componente desacoplado del core del sistema, es necesario que lo instalemos. Para ello vamos a usar las siguiente dos líneas de código:

$ ionic cordova plugin add cordova-plugin-google-analytics 
$ npm install @awesome-cordova-plugins/google-analytics

La primera conectará nuestra aplicación con la parte nativa del sistema.

La segunda permitirá comunicar el plugin con nuestros código TS.

Configuración de Google Analytics en Ionic

Este módulo no tiene una configuración más allá de añadir el componente a los providers de nuestra componente. Siempre recuerdo, y esta vez no va a ser menos, de que no es necesario, ni recomendable, incluir nada en los providers del “AppModule” a menos que se vaya a utilizar en toda la aplicación.

Para incluirlo necesitamos agregar este código al módulo de nuestro componente:

...

import { GoogleAnalytics } from "@awesome-cordova-plugins/google-analytics/ngx"

...

providers: [
...,
GoogleAnalytics,
...
]

...

En caso de que estemos usando el módulo NGX, que se puede usar en versión de Ionic 4 o superiores, no será necesario este paso.

Plataformas soportadas por Google Analytics

• Android
• Browser
• iOS
• Windows Phone 8

Cómo se usa Google Analytics en Ionic

Veamos un ejemplo de uso para ponernos en situación. Comentaremos el código después para que se entienda todo.

import { GoogleAnalytics } from '@awesome-cordova-plugins/google-analytics/ngx';


constructor(private ga: GoogleAnalytics) { }

...

this.ga.startTrackerWithId('YOUR_TRACKER_ID')

   .then(() => {

     console.log('Google analytics is ready now');

      this.ga.trackView('test');

     // El tracker esta activado.

     // Ahora puede rastrear páginas o configurar información adicional con AppVersion o UserId

   })
   .catch(e => console.log('Error Incializando GoogleAnalytics', e));

En primer lugar, vamos a hace un import de GoogleAnalytics con el código:

import { GoogleAnalytics } from '@awesome-cordova-plugins/google-analytics/ngx';

Posteriormente, vamos a inyectar una instancia de esta clase en el constructor. Así podremos utilízalo por todo nuestro componente.

Nota: Al tratarse de un servicio, y estar presente en los providers de nuestro componente, podemos inyectarlo en los constructores cómo una instancia inicializada.

Y, para terminar, llamaremos a la función “startTrackerWithId” para que el sistema comience a trackear datos.

Cómo funciona esto

A ver, el sistema se estará ejecutando durante todo el tiempo de vida de la app. El mismo se encargará de notificar los eventos de manera automática a los servidores de Google.

Cuando hablemos de las funciones veremos qué es lo que se puede hacer de manera explícita. Pero te aviso de que el sistema trackea un montón de cosas de manera automática.

Funciones y métodos del Componente

Ahora vamos a ver qué es lo que podemos hacer con el módulo de Google Analytics para Ionic. Esta es la parte que más me gusta, aquí es donde está la chicha y de donde vamos a sacar el máximo partido.

startTrackerWithId(id, interval)

• Inicializa el sistema a partir de una ID de analytics solicitada. Hay que esperarse a que se ejecute la función “onDevideReady” para llamarlo.
• Parámetros:
  • id -> string -> Será el ID de la propiedad de Analytics que hemos registrado previamente.
  • interval -> number -> Será el intervalo en el que traquea los datos el componente en segundos. Por defecto serán 30.
• Retorna una promesa que tenemos que controlar. En caso de que todo vaya bien se resolverá y en caso contrario saldrá por el catch.

setAllowIDFACollection(allow)

• Esta función cancela, o permite, la recopilación de datos para uso comercial. Cómo, por ejemplo, los intereses o la demografía del usuario.
• Parámetros:
  • allow -> booleano -> Permite, o no, el traqueo.
• Retorna una promesa que tendremos que controlar. Si se resuelve es que todo ha funcionado correctamente, de lo contrario es que algo ha ido mal.

setUserId(id)

• En caso de que queramos usar Universal Analytics esta función asocia una ID al usuario.
• Parámetros:
  • id -> string -> El ID seteado al usuario.
• Retorna una promesa que tenemos que controlar. Si se resuelve es que todo ha funcionado correctamente. De lo contrario, algo ha ido mal.
• Referencias externas:
  • Si quieres revisar más sobre la documentación oficial de User ID echa un vistazo a este enlace: https://developers.google.com/analytics/devguides/collection/analyticsjs/user-id

setAnonymizeIp(anonymize)

• Esta función nos permite definir si queremos que la IP enviada al server de Google sea anónima.
• Parámetros:
  • anonymize -> booleano -> Si es verdadera no enviará la IP.
• Retorna una promesa que tendremos que controlar. En caso de que se resuelva es que todo ha ido bien. Si sale por el catch algo habrá fallado.

setAppVersion(appVersion)

• Esta función enviará a los servidores de Analytics la versión que nosotros queramos para después poder identificarla en nuestros paneles de administración de la web. En caso de que no exista aún, la crea.
• Parámetros:
  • appVersion -> string -> Será el nombre de la versión que queramos enviar a analytics.
• Retorna una promesa que tendremos que controlar.

getVar(key)

• Nos devuelve el valor de una variable que tengamos seteada en los servers de analytics.
• Parámetros:
  • key -> string -> Será el key de la variable a solicitar.
• Retorna una promesa que hay que controlar. En caso de que se resuelva es que todo ha ido bien y con ella llega el valor de la variable. En caso contrario fallará y saldrá por el catch.

setVar(key, value)

• Esta función nos permite guardar un valor asociado a una key en los servers de Google.
• Parámetros:
  • key -> string -> Será la key que va asociada al valor que queramos guardar.
  • value -> string -> Será el valor que asociemos a la key.
• Retorna una promesa que tendremos que controlar. En caso de que se resuelva todo habrá ido bien, en caso contrario, si ha fallado, saldrá por el catch.

setOptOut(optout)

• Esta función nos permite definir si queremos que se empiecen a trackear datos o no.
• Parámetros:
  • optout -> booleano -> Si es verdadero permitirá el envío de datos.
• Retorna una promesa que tendremos que controlar. Si todo ha ido bien se resolverá. En caso contrario, fallará y saldrá por el catch.

debugMode()

• En caso de que queramos recibir la salida de depuración, llamando a esta función la veremos.
• Retorna una promesa que tendremos que controlar. En caso de que todo haya ido bien se resolverá y en caso contrario, saldrá por el catch.

trackMetric(key, value)

• En caso de que queramos agregar métricas al panel de Analytics, con esta función lo haremos.
• Parámetros:
  • key -> number -> La key de la métrica que queramos trackear.
  • value -> any -> El valor asociado a la key.
• Retorna una promesa que tendremos que controlar. En caso de que todo haya ido bien se resolverá y en caso contrario, saldrá por el catch.

trackView(title, campaignUrl, newSession)

• Esta función nos permite registrar una vista en el panel de Analytics de manera manual. Si quieres conocer algún detalles más aquí lo puedes revisar: https://developers.google.com/analytics/devguides/collection/analyticsjs/screens
• Parámetros:
  • title -> string -> Será el nombre que reciba el registro que se va a guarda en concepto de nombre de pantalla.
  • campaignUrl -> string -> En caso de que sea una campaña, podemos registrar la URL desde donde viene.
  • newSession -> boolean -> Si es verdadero, se registrará como nueva sesión. Normalmente se usa cuando se abre la app.
• Retorna una promesa que hay que controlar. En caso de que se resuelva es que todo ha ido correctamente. En caso contrario, habrá fallado y saldrá por el catch.

addCustomDimension(key, value)

• Similar a la anterior, pero nos permite registrar una nueva dimensión de pantalla.
• Parámetros:
  • key -> number -> Será la key de la dimensión.
  • value -> string -> El valor que va asociado a la key.
• Retorna una promesa que va a controlar. En caso de que todo haya ido bien se resolverá, en caso contrario fallará y saldrá por el catch.

trackEvent(category, action, label, value, newSession)

• También es similar a las anteriores. Nos permite el registro de eventos personalizados sobre el servidor.
• Parámetros:
  • category -> string -> El nombre de la catgoría.
  • action -> string -> El nombre de la acción a registrar.
  • label -> string -> El nombre de la etiqueta.
  • value -> number -> Será el valor del evento a registrar-
  • newSession -> booleano -> Si es verdadero se registrará cómo una nueva sesión.
• Retorna una promesa que tendremos que controlar. En caso de que todo haya ido OK, se resolverá. En caso contrario saldrá por el catch.

trackException(description, faltal)

• Otro tipo de track más. En este caso para errores.
• Parámetros:
  • description -> string -> Será la descripción que queramos darle al registro de la excepción.
  • fatal -> booleano -> Cómo su nombre indica, es para definir si el error ha sido fatal o no.
• Retorna una promesa que tendremos que controlar.

trackTiming(category, intervalInMilliseconds, variable, label)

• Otro tipo de seguimiento. Esta vez para que podamos medir tiempos dentro de nuestra app. Por ejemplo, el tiempo que pasa un usuario dentro de una pantalla en específico.
• Parámetros:
  • category -> string -> Será el nombre de la categoría con la que queremos que se guarde el evento.
  • intervallInMillisecodns -> number -> Será el intervalo con el que queremos que se ejecute la actualización de tiempo.
  • variable -> string -> Será el nombre de la variable que se usará para identificar los datos en el panel de Google Analytics.
  • Label -> string -> Será la etiqueta usada para registrar el evento.
• Retorna una promesa que hay que controlar.

addTransaction(id, affiliation, revenue, tax, shipping, currencyCode)

• Esta función nos sirve para registrar una transacción (de un ecommerce) dentro de nuestro panel de anlítica.
• Parámetros:
  • Id -> string -> El ID de la transacción.
  • affiliation -> string -> En caso de que sea a través de un sistema de afiliados. Este es el sitio donde poner el ID del usuario de afiliación.
  • revenue -> number -> Será la cantidad pagada por el cliente.
  • tax -> number -> La cantidad de impuestos que ha pagado el cliente.
  • shipping -> number -> El coste del envío, en caso de que lo haya.
  • currencyCode -> string -> El código de la moneda utilizada en la transacción.
• Retorna una promesa que tendremos que controlar. Si todo ha ido bien se resolverá, en caso contrario fallará y saldrá por el catch.

addTransactionItem(id, name, sku, category, price, quantity, currencyCode)

• Esta función, por regla general, se usa cuando, por ejemplo, el usuario ha introducido un producto en el carrito.
• Parámetros:
  • id -> Será el ID del producto.
  • name -> string -> Será el nombre del producto.
  • sku -> string -> El código de barras.
  • Category -> string -> La categoría a la que pertenece.
  • Price -> number -> El precio.
  • Quanitty -> number -> La cantidad.
  • currencyCode -> string -> El código de la moneda que usa.
• Devuelve una promesa que tendremos que controlar. En caso de que todo haya ido bien se resolverá y en caso contrario fallará.

enableUncaughtExceptionReporting(shouldEnable)

• Nos permite activar y desactivar el reporte de errores y excepciones no controladas.
• Parámetros:
  • showEnable -> booleano -> Si es verdadero, reportará los errores.
• Retorna una promesa que hay que controlar. Si se resuelve es que todo ha ido correctamente. De lo contrario fallará y saldrá por el catch.

dispatch()

• Envía manualmente toda la información acumulada de manera local.
• Retorna una promesa que hay que controlar. Si todo ha ido correctamente se resolverá, en caso contrario saldrá por el catch.

Un tutorial en video por si no te gusta leer

Algo más que quizás te interese

Mira, hemos creado esta herramienta para que tu puedas evaluar, optimizar y mejorar los logos de tus aplicaciones. Que, y cómo ya sabemos, una mejora en el logo afecta directamente a tus descargas y a tus ingresos..

Ya solo queda despedirme hasta el siguiente artículo. Espero haberte ayudado con tus dudas, y nos vemos en el siguiente. Hasta entonces ¡que vaya bien!