BootBoard (BETA)

¿Qué es BootBoard?

BootBoard es un sistema sencillo que unifica varias APIs publicas para conseguir crear dashboards con los datos de Google Analytics sin apenas conocimientos técnicos

Aprovechamos la magia de Bootstrap para generar el layout de la página con las últimas tecnologías de maquetación (Responsive, design-mobile-first, css3, html5, etc.), extraemos y transformamos los datos de google analytics en gráficos muy claros gracias a la Embed Api de Google Analytics y las opciones que nos brinda Google Charts. Por ultimo lo unimos todo con un código propio "bootboard.js" que mediante jQuery nos permite definir gráficos y consultas directamente sobre el html de la web

¿Por qué usar BootBoard?

Bootboard es más limitado que otros sistemas de dashboarding profesionales que destacan tanto por su usabilidad como (a veces, en los muy profesionales) por sus amplias posibildiades. Sin embargo BootBoard tiene ciertas ventajas sobre estos que pueden hacerte decantarte por esta opción en algunos casos

Ventajas de BootBoard

  • Es totalmente gratuito y sin limitaciones. Los limites los pone la propia API de Google Analytics
  • Es ligero y compacto. Tan solo necesitas una plantilla HTML y un archivo JS para hacerlo funcionar
  • Es realmente versatil en sus consultas, mucho más que sistemas de dashboards simples, permitiendote para cada gráfico sacar exactamente el dato que necesitas.
  • No usa programación en el servidor. No hay nada que instalar ni ninguna base de datos que configurar. No hay apenas costes de hosting. Se sube y funciona.
  • Cada usuario accede con su cuenta. Asi que los dashboards pueden hacerse públicos y cada uno al visitarlos los consultará con sus propias cuentas de GA.
  • Es entregable al cliente. Al ser archivos HTML sueltos estos pueden entregarse al cliente o subirse en su servidor lo que lo hace ideal para entregas en proyectos cerrados
  • Es mobile friendly. Al usar bootstrap y gráficas html5 la adaptación a móviles es directa. Podrás ver tus dashboards desde tu ordenador, tablet o smartphone sin problemas
  • Es totalmente adaptable a tu web. Al ser simplemente HTML y Javascript puede incluirse en cualquier desarrollo ya realizado tan solo copiando los archivos necesarios a tu servidor

¿Qué necesito para poder usar BootBoard?

1. Un servidor web de HTML. Por desgracia las llamadas ajax no funcionarán si ejecutas los ficheros desde tu PC. Asi que necesitamos subirlo a un servidor aunque sea el localhost.

2. Conocimientos básicos de:

  • HTML: Para poder al menos dar forma a las columnas de tu dashboard y cortar y pegar los gráficos en html desde las demos hacia tu dashboard
  • Google Analytics: Para hacer las llamadas pertinentes a las API's debes saber usarlo un mínimo y conocer como se llaman las dimensiones y segmentos en la herramienta

¿Cómo es el código?

El código es realente sencillo. Solo tienes que crear un contenedor con el id "dashboard" y para cada gráfico incluir un div con la clase "ga-chart" y una serie de atributos que definan lo que quieres mostrar.

<div id="dashboard">

  <div class="ga-chart" data-type=... data-dimensions=... data-metrics=... ></div>

  <div class="ga-chart" data-type=... data-dimensions=... data-metrics=... ></div>

  <div class="ga-chart" data-type=... data-dimensions=... data-metrics=... ></div>

</div>

Aqui tienes algunos ejemplos de códigos para conseguir distintos gráficos:


Login:


<div class="ga-chart"
	title="Tráfico por Medios"
	data-type="donut" 
	data-dimensions="ga:medium"
	data-metrics="ga:sessions"
	data-start-date="30daysAgo"
	data-end-date="yesterday"
	data-filter=""
	data-segment=""
	data-colors=""
></div>	

<div class="ga-chart"
	title="Tráfico por Dispositivos"
	data-type="column" 
	data-dimensions="ga:deviceCategory"
	data-metrics="ga:sessions,ga:bounces"
	data-start-date="2015-06-01"
	data-end-date="2015-06-30"
	data-filter=""
	data-segment=""
	data-sort="ga:deviceCategory"
	data-colors="#DC3912,#CCC"
></div>	

<div class="ga-chart"
	title=""
	data-type="geo" 
	data-dimensions="ga:country"
	data-metrics="ga:sessions"
	data-start-date="(+0)-(-3)-01"
	data-end-date="(+0)-(+0)-(-1)"
	data-filter=""
	data-segment=""
	data-colors=""
></div>

¿Quieres ver algunas demos de Dashboards?

Usa en el menú superior el desplegable y podrás ver varias demos de dashboards creados con BootBoard.


¿Y la documentación?

Bootboard está en versión beta aún, no tenemos documentación terminada pero si puedes leer nuestra pequeña guía de inicio y observar el código de las demos para empezar a usarlo por tu cuenta.