Google Analytics y Capacitor: problemas y soluciones

Abril 28, 2023, Alberto Concha

¿Qué es Capacitor?

Capacitor es un framework de código abierto desarrollado por Ionic y que es utilizado para construir aplicaciones híbridas, es decir, es una herramienta que permite crear una aplicación para Android o iOS a partir de tecnologías web, básicamente Javascript + HTML + CSS. La web se visualiza en un webview (contenedor web) empaquetado en una aplicación nativa hueca y mediante el uso de plugins de Capacitor se pueden acceder a funcionalidades nativas de la aplicación, como pueden ser los contactos, la localización, etc.

En ocasiones, por ahorro de costes y esfuerzos, y dada la naturaleza de las aplicaciones híbridas, se decide integrar el Tag Manager utilizando simplemente el mismo script que se ha utilizado para la web, y es en este punto donde surgen los problemas entre Capacitor y Google Analytics.

Principales problemas y soluciones

El primero de los problemas, es que Capacitor utiliza por defecto un protocolo propio (“capacitor://”) para servir las peticiones, el cual Google Analytics es incapaz de interpretar, y por tanto aborta el envío de los hits. Este problema puede resolverse en Universal Analytics (analytics.js) deshabilitando la tarea de comprobación del protocolo mediante el siguiente código:

ga('set','checkProtocolTask',null); //Deshabilita comprobación del protocolo

Desafortunadamente, para la librería gtag.js y Google Analytics 4 esta funcionalidad no está disponible actualmente, aunque está abierta y aceptada una solicitud de funcionalidad a Google. Por tanto, es necesario buscar otras alternativas para el envío de datos, como puede ser el envío Server-Side.

El segundo de los problemas, qué presenta tiene que ver con el seteo de cookies en el navegador. Por un lado, podemos habilitar el envío del hit aún cuando analytics.js está configurado para utilizar cookies y estas no están disponibles en el navegador del usuario. Para ello hay que deshabilitar la siguiente tarea:

ga('set','checkStorageTask',null); //Habilita el envío del hit cuando analytics.js está configurado para utilizar cookies y estás no están disponibles en el navegador del usuario.

Esto resuelve parcialmente el problema en Android, ya que se ha comprobado que, en algunas aplicaciones, al cerrarlas y ejecutarlas nuevamente, el ID de cliente de Google Analytics almacenado en la cookie “_ga” se genera nuevamente, por lo que si la identificación de usuarios esta basada en esta cookie, se creará un nuevo usuario cada vez que se inicia la aplicación. Para paliar este problema puede utilizarse la identificación de usuarios basada en User-ID.

Para resolver el problema iOS podemos aplicar una configuración adicional, ya que, a partir de la versión 4.7 de Capacitor, su API de cookies proporciona compatibilidad con cookies nativas parcheando el “document.cookie” para usar bibliotecas nativas. Esta configuración debe habilitarse en el fichero capacitor.config, ya que por defecto está deshabilitado. Ejemplo:

En capacitor.config.json

{
"plugins": {
"CapacitorCookies": {
"enabled": true
}
}
}

En capacitor.config.ts

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
plugins: {
CapacitorCookies: {
enabled: true,
},
},
};

export default config;

Fuentes bibliográficas: