Visualizaciones personalizadas de datos en google data studio

Google Data Studio se está posicionando como una de las herramienta más utilizada en el mundo de la visualización de datos y reporting. Como todas las herramienta de esta naturaleza, el tipo de visualización de datos que nos permite crear es limitada.

Por ahora podemos mostrar nuestros datos a través de diferentes widgets:

  • Scorecard
  • Tablas
  • Time Series Chart
  • Bar Chart
  • Pie and Donuts Chart
  • Line chart
  • Scatter plot y Bubble CHart
  • Pivot Table
  • Bullet chart

Es verdad que en algunos casos, utilizando los widgets disponibles, podemos crear visualizaciones más complejas como hemos hecho en con la creación de un slope chart.

No obstante, a día de hoy, muchas empresas necesitan mostrar sus propios datos de una forma más avanzada. Por esto Google ha añadido en Google Data Studio lo que define como Community Visualization o Visualizaciones Personalizadas.

¿Qué nos permiten las visualizaciones personalizadas en Google Data Studio?

Las visualizaciones personalizas (o Community Visualization) de Google nos permiten utilizar nuestra propia visualización creada utilizando una de las librerías Javascript disponibles en el mercado.

Hay varias disponibles, de pago y gratuitas:  D3.jsChart.js,NivoGoogle Chart o HighCharts.

Para entender cómo Google Data Studio gestiona las visualizaciones personalizada podemos analizar el siguiente esquema.


¿Cómo puedo implementar una visualización personalizada?

Los pasos para utilizar una visualización personalizada en Google Data Studio son principalmente tres:

  1. Escribir el código de nuestra visualización 
  2. Publicar nuestro código en Google Cloud Storage
  3. Cargar la visualización en Data Studio

Paso 1: Escribir el código de nuestra visualización

Para crear el código de nuestra primera visualización personalizada podemos seguir los pasos del Code Lab creado por Google.

Cada Community Visualization se compone de 4 archivos:

  • manifest.json: incluye los metadatos de nuestra visualización y las informaciones sobre dónde encontrar las otros archivos.
  • myViz.json: incluye las opciones de datos y de estilo de nuestra visualización (la parte derecha de configuración de los widget).
  • myViz.js: incluye el código para mostrar los datos. 
  • myViz.css (opcional):  incluye informaciones de estilo de nuestro widget.

Paso 2: Publicar nuestro código en Google Cloud Storage

Una vez que tenemos todos los archivos necesarios, el siguiente paso será cargarlos en el Cloud Storage de Google.

Todos los archivos se deben cargar en un bucket y deben ser accesibles públicamente. Para ver cómo cambiar los permisos podemos seguir los pasos en esta guía.

Paso 3: Cargar la visualización en Data Studio

Una vez que hemos publicado nuestros archivos nos falta añadir nuestra visualización personalizada en Data Studio. En nuestro reporte seleccionamos el icono de las Community Visualization y añadimos el URL del bucket que contiene nuestro archivo.

Es importante apuntar que para utilizar una visualización personalizada es necesario que nuestra fuente de datos esté configurada para utilizar las credenciales del Owner y que tenga la opción de utilizar las visualizaciones personalizadas activa.

Una vez que añadimos las visualización a nuestro reporte podemos seleccionar nuestras métricas y dimensiones como cualquier otro widget en Data Studio. El número de dimensiones, métricas y opciones de estilo que podremos seleccionar dependerá de cómo se haya creado la visualización.

En este ejemplo estamos utilizando un Sankey Diagram creado por Google. ¿Qué os parece? ¿Mola, no?

Preguntas frecuentes sobre la visualización personalizada de datos en GDS

¿Se pueden utilizar librerías que no sean Javascript?

De momento solo se puede utilizar Javascript para crear nuestras visualizaciones. Aún no están disponibles, librerías como matplotlib de Python o ggplot 2 de R. 

¿Cómo puedo controlar que alguien utilice mi visualización?

Desafortunadamente no podemos controlar quién puede utilizar nuestra visualización. Todas las persona que saben el ID de la visualización la pueden utilizar.

¿Qué tipología de fuente de datos puedo utilizar?

Todas las fuente de datos pueden ser utilizadas dentro de una visualización personalizada en Data Studio siempre cuando que estén configuradas para utilizar las credenciales del Owner y con la opción de Community Visulization activa, tal y como hemos explicado previamente. 

¿Dónde puedo encontrar códigos de ejemplo?

Google ha creado un tutorial muy completo y fácil de seguir aquí. También existe una sección en el sitio web de Google Data Studio dedicada a las Community Visualizations disponible aquí.

¿Cómo puedo testear mi visualización personalizada?

La primera opción es cargar los nuevos archivos en el Cloud Storage y mirar el resultado directamente en Google Data Studio. Este proceso es el más sencillo pero puede llevar un poco de tiempo, ya que la actualización de la visualización puede tardar algunos minutos.

La segunda opción es desarrollar la visualización en local. Es una opción un poco más complicada pero puede ahorrarte bastante tiempo a la hora de añadir funcionalidades a tu visualización. Para entender el funcionamiento del desarrollo en local te remitimos a este guía de Google

Happy custom visualization  🙂

Marco Favero

Marco Favero

Share on facebook
Share on twitter
Share on linkedin
Share on email
3 min
Suscríbete a nuestra newsletter

Los mejores artículos de analítica digital para potenciar tu negocio.

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Entradas relacionadas

BigQuery Parameters Integration con Data Studio

El conector de Data Studio con BigQuery nos permite desde conectar con una vista específica o una tabla almacenada hasta custom queries que se ejecutan en realtime. Esta última conexión cada vez está más demandada, pues muchos de los cálculos requieren de procesamiento on the fly. Los parámetros juegan un papel fundamental en este tipo de consultas.

2 minutos

Dificultad

¿Qué es y cómo funciona Gigya?

Gigya es un servicio que sirve para gestionar las identidades de los usuarios en tu sitio web. Este CIAM (Customer Identity and Access Managment) trabaja como un RaaS (Registration-as-a-Service) que nos permite guardar información valiosa como el userID.

2 minutos

Dificultad

Aproximación al CLV

El CLV o LTV es una métrica que representa el beneficio económico que obtiene una empresa de un usuario a lo largo del ciclo de relación entre ambos. En este artículo veremos diferentes versiones de esta métrica y cómo calcularlas.

4 minutos

Dificultad

¿Qué es Algolia? El motor de búsqueda para mejorar tu UX y CRO

En este post introducimos el motor de búsqueda Algolia. Este ofrece una API y herramientas de UX intuitivas para crear la experiencia de búsqueda definitiva y así mejorar la experiencia del usuario y aumentar la conversión.

2 minutos

Dificultad

Ir arriba

Esta web utiliza ‘cookies’ de terceros. Al clicar aceptar está aceptando el uso que realizamos de las cookies. Para más información puede consultar nuestra Política de cookies