Cómo medir si tus usuarios prefieren el modo oscuro o el claro con Google Analytics (GA4)

El modo oscuro se ha vuelto cada vez más popular en los últimos años, porque ayuda a reducir la fatiga visual y a ahorrar batería en los dispositivos. Si tienes una web o una app, quizá te interese saber si tus usuarios usan el modo oscuro, para entender mejor sus preferencias y adaptar tu contenido.

Para medir la configuración de modo oscuro del usuario usaremos Google Analytics 4 (GA4) y Google Tag Manager (GTM). El proceso incluye configurar GTM, crear una dimensión personalizada en GA y, por último, preparar un informe con los datos obtenidos.

Estos son los pasos para crear una variable personalizada en GTM que registre si el usuario usa el tema oscuro o el claro:

1. En tu cuenta de GTM, ve a la sección «Variables» y haz clic en el botón «New».
2. En la página «Create Variable», elige «Custom JavaScript» como tipo de variable y llámala «User Color Mode».
3. En el campo «Custom JavaScript», introduce una función que devuelva «dark» o «light» según la configuración de modo oscuro del usuario.
4. Haz clic en el botón «Save» para guardar la variable personalizada.

Nota: window.matchMedia('(prefers-color-scheme: dark)') refleja la preferencia del usuario según la configuración del sistema operativo (por ejemplo, modo claro u oscuro) o del agente de usuario. Si quieres medirlo según la opción que el usuario haya elegido dentro de tu app, puedes ampliar este enfoque añadiendo los datos de usuario de GA de forma programática (documentación de GA).

Una vez creada en GTM la variable personalizada que registra la configuración de modo oscuro, puedes crear en GTM una etiqueta personalizada que envíe esos datos a GA4 como evento. Para crearla, sigue estos pasos:

1. En tu cuenta de GTM, ve a la sección «Tags» y haz clic en el botón «New».
2. En la página «Create Tag», elige «Google Analytics: GA4 Event» como tipo de etiqueta.
3. En la sección «Google Analytics Settings», selecciona la propiedad de GA4 correcta en el desplegable «Configuration Tag». Asegúrate de elegir la propiedad que corresponde a tu web o app.
4. En la sección «Event Parameters», introduce los siguientes valores:
   • Nombre del evento: "page_view"
   • Parámetros del evento: { "color_mode": {{User Color Mode}} }
5. Añade el activador «Initialization - All pages»
6. Pulsa «Save»

Ahora, para ver los resultados en Google Analytics (GA4), hay que añadir una dimensión personalizada. Puedes crear una dimensión personalizada llamada «User Color Mode» con el valor de propiedad de usuario «color_mode». Estos son los pasos:

1. Inicia sesión en tu cuenta de Google Analytics y ve a la sección Configure.
2. Haz clic en Custom Definitions y, después, en Custom Dimensions.
3. Haz clic en el botón «New Custom Dimension».
4. En el campo «Name», escribe «User Color Mode» como nombre de la dimensión personalizada.
5. En el campo «Scope», elige «User» como ámbito de esta dimensión personalizada. Así la dimensión quedará asociada a cada usuario individual de tu web.
6. En el campo «Event Parameter», escribe «color_mode» como parámetro de evento que fijará el valor de esta dimensión personalizada.
7. En el campo «Active», asegúrate de marcar la casilla para activar esta dimensión personalizada.
8. Haz clic en el botón «Create» para guardar la nueva dimensión personalizada.

Una vez configurado, puedes ver las estadísticas al momento en la página «Reports» → «Realtime». Sin embargo, en otras páginas, como «Explore», tendrás que esperar 24 horas para empezar a usar esta nueva propiedad de usuario.

Resumen

Ya sabes cómo configurar Google Analytics 4 y GTM para medir si tus usuarios usan el tema oscuro o el claro. Analizar estos datos te ayudará a decidir si merece la pena implementar el modo oscuro en tu web o app para tu público.