Firebase: Pantalla Vista y DebugView

Cómo configurar Firebase desde GTM y su funcionalidad analítica.

Firebase es una herramienta bastante potente que permite gestionar desde la app muchas funcionalidades como puede ser la gestión de usuarios, conexión con base de datos, analítica, etc. De manera mucho más sencilla y rápida.

Primer paso

Necesitaremos es crear un proyecto de Firebase asociado a la app, para ello lo crearemos desde la consola de Firebase.

firebase
Le ponemos un nombre a nuestro proyecto y seleccionamos una región. Una vez hecho esto, tendremos que añadir Firebase a nuestra aplicación, dependiendo del tipo de app seleccionaremos una u otra opción.
Los pasos para conectar Firebase con nuestra aplicación y GTM son más técnicos pero siguiendo la guía de Google, se pueden lograr.

firebase

Eso sí, no hay que olvidar añadir el .json del contenedor de GTM en nuestra aplicación en el directorio adecuado.

firebase

Como se puede apreciar, en el menú principal de Firebase vemos todas las diferentes funcionalidades que tiene. En este post no vamos a verlas pero me gustaría destacar el informe de crash reporting, el cual puede resultar de gran utilidad ya que ofrece información sobre los fallos críticos (y no tan críticos) que se han producido en la app durante su uso.

De una manera muy visual se tiene información sobre el número de errores que se han producido, el número de usuarios que se han visto afectados y además, de las versiones de la app de cada uno de éstos y así como información del subproceso que ha podido causar el error.

firebase

Segundo paso

Firebase utiliza por defecto un código numérico para identificar las pantallas así como una clasificación del tipo de pantalla se trata (display, Legal, error, Actividad, etc.).

firebase

Pero en todo caso no usa una nomenclatura textual para identificar las pantallas de manera única.  Desde hace relativamente poco, existe la posibilidad de asignarles un nombre.

Si queremos hacerlo de esta manera entonces añadiremos el siguiente código a la app:

mFirebaseAnalytics.setCurrentScreen(this,“Home_sendMessage”, null);

Donde “Home_sendMessage” es el nombre de la pantalla que queramos ponerle. Es muy importante que se llame a la función setCurrentScreen una vez la actividad se haya inicializado, sino nunca se pondrá nombre a la pantalla.

firebase

Con esto en el informe de interacción del usuario podremos seleccionar el nombre de pantalla y ver la interactuación del usuario por pantalla, ¿En qué pantalla se quedan más tiempo los usuarios? Aquí podremos verlo:

firebase

Como ya he comentado antes, por defecto Firebase no asigna un nombre a la pantalla por lo que aparecerá como (not set).

También tenemos la posibilidad de crear un evento de pantalla vista desde GTM donde asignarle un nombre de pantalla.

Para ello tendremos que poner el siguiente código en nuestra app:

En GTM podemos seleccionar un tag tipo Universal Analytics o Firebase Analytics, en este caso nos centraremos en las etiquetas de Firebase, por lo que deberemos de tener en cuenta que hay 3 tipos de acciones:

  • Añadir Evento
  • Modificar Evento
  • Eliminar Evento

En el caso anterior, como en el código de la app enviamos un evento screenView al cual pasamos la variable screenName. Deberemos de escoger Modificar Evento, ya que de elegir Añadir Evento, entonces en la consola de firebase veríamos 2 eventos screenView seguidos.

Uno correspondiente al del código de la app y otro el de GTM. Así pues lo siguiente que deberemos realizar desde GTM es la creación de las variables, el trigger y el tag que hagan que se envíe a Analytics Firebase.

Creamos una variable tipo parámetro de evento que se llame screenName.

firebase

Creamos un trigger personalizado para que salte cuando el nombre del evento sea screenView.

firebase

Tercer paso

Ahora sólo nos queda que crear el tag que envíe la información a Analytics Firebase, para ello seleccionaremos un tag tipo Google Analytics (Firebase) y seleccionaremos como Acción “Modificar Evento” y le diremos que el evento a modificar es el screenView del código de la app.

firebase

Con esto tendríamos nuestro evento de pantalla vista con el nombre de la pantalla.

Y si quieres rizar el rizo…

Si estás acostumbrado a Google Analytics, es probable que eches de menos las dimensiones personalizadas. Pues bien, Firebase no tiene esto propiamente dicho, pero sí que tiene lo que se llama “propiedades de usuario”.

Si queremos añadir una propiedad nueva, tendremos que poner el código en la aplicación y configurarlo en analytics:

firebase

Para poder verificar que, lo que hemos realizado en GTM y en la app, funciona correctamente, haremos uso del modo debugView de la consola de Firebase. Pero para ello debemos recordar publicar los cambios de GTM, descargar el .json de la última publicación y ponerlo en la carpeta que mencionaba al principio del post.

El modo DebugView se encuentra en el menú de analytics de la consola de Firebase.

firebase

En un principio nos aparecerá todo en blanco, esto es porque para empezar a ver datos tendremos que ir a la consola de la aplicación y activar el modo debug de firebase.

Para ello, desde el terminal nos vamos a la carpeta donde tenemos las herramientas y ponemos:

adb shell setprop debug.firebase.analytics.app <nombre_del_paquete>

El nombre del paquete lo podemos encontrar dentro de la consola de analytics en la configuración del proyecto.

firebase

Una vez hemos activado el debug en la consola de la aplicación, sólo tendremos que ejecutar la aplicación desde la herramienta de desarrollo y ver si los datos que están llegando desde el debugView son los que esperábamos o no.

No niego que al principio pueda resultar algo complicado y enrevesado, pero la verdad es que el debugview de Firebase ofrece muchísima información de lo que está pasando. Ya que te dice desde dónde están saltando los eventos, si desde la app o desde GTM, por lo que se puede acortar el círculo.

firebase

Dependiendo del tipo de hit que sea o cómo esté configurado, tendrá un tipo de apariencia.

En el caso de las propiedades de usuario vemos que aparecen con el icono de usuario, los eventos en azul como si fuera un click y aquellos eventos que se hayan marcado como objetivo para medir la conversión aparecen en verde con una bandera.

Otra cosa muy útil y que recomiendo que hagáis es que activéis el log de la consola de la herramienta, ya que es ahí donde veréis el porqué un evento no os puede estar saltando correctamente o porqué no se está asignando nombre a la pantalla.

Esto se puede hacer poniendo las siguientes líneas de código en la consola de la herramienta:

adb shell setprop log.tag.FA VERBOSE

adb shell setprop log.tag.FA-SVC VERBOSE

adb shell setprop log.tag.GoogleTagManager VERBOSE

adb logcat -v time -s FA FA-SVC GoogleTagManager

Entonces veréis información como esta y podréis dar solución más rápidamente.

Espero que os haya servido de ayuda, si tenéis alguna duda o consulta relativo a Firebase, no dudéis en escribir.

Autor:

Analista Web en en Metriplica, Expertos en Analítica Web. Ingeniera informática por la Universidad de Valencia y máster en Analítica Web y Multidispositivo por la OBS/Universidad de Barcelona.

Leave Comment

Your email address will not be published. Required fields are marked *