Cómo crear gráficos con Google Analytics API

Aprende a crear un gráfico con las visitas a tu sitio web mediante la API de Google Analytics. Necesitas copiar todos los ficheros de este .zip en un hosting online o local con PHP 5.x. Introduce tu usuario y password de Google Analytics en grafico.php , y verás un gráfico con las visitas que ha recibido tu sitio web durante los últimos 15 días, excepto Italia.

Explico paso a paso el código utilizado para que tú también puedas crear tus propios gráficos desde Google Analytics y ajustar los parámetros a tus necesidades. Al final del post, podrás ver el código completo. Comenzamos con esta línea:

include "function_dates.php"; include "googleanalytics.class.php";

Incluye dos ficheros esenciales: 1) function_dates.php con la función createDateRangeArray(), que sirve para crear un array de todos los días que existan entre dos fechas de tu preferencia (ver http://boonedocks.net/mike/archives/137-Creating-a-Date-Range-Array-with-PHP.html); 2) googleanalytics.class.php incluye las instrucciones para conectarse a la API de Google Analytics (ver http://www.askaboutphp.com/63/google-analytics-api-class-for-php.html).

$fecha2 = date('Y-m-d');
$fecha1 = strtotime ('-15 day' , 
strtotime ($fecha2)) ;
$fecha1 = date ('Y-m-d', $fecha1);
$fechas = createDateRangeArray($fecha1,$fecha2);
$days = count($fechas);

Este bloque detecta los 15 días anteriores al día de hoy (puedes alargarlo al tiempo que desees). Lo importante es definir $fecha1 y $fecha2.

try {
$ga = new GoogleAnalytics('usuario@gmail.com','password');
$ga->setProfile('ga:48231979');
$ga->setDateRange($fecha1,$fecha2);

Este fragmento realiza la autenticación en Google Analytics. Debes añadir: 1) tu usuario de Google Analytics, 2) tu password, 3) el perfil al cual deseas realizar la consulta. Debes añadir ga: antes del número de perfil (ejemplo: ga:48231979). Nota: el número de perfil no es lo mismo que la cuenta (UA-...). Una cuenta puede tener varios perfiles, así que debes buscar el perfil que necesites dentro del Administrador de Google Analytics.

Por otra parte, recomiendo utilizar un usuario sólo autorizado para ver informes, el cual puedes añadir mediante el Administrador de Usuarios de dicho perfil en tu cuenta de Google Analytics.

$report = $ga->getReport(
array('dimensions'=>urlencode('ga:date'),
'metrics'=>urlencode('ga:visits'),
'filters'=>urlencode('ga:country!=@Italy'),
'sort'=>'ga:date'
)
);

En este bloque obtenemos un reporte de visitas por día, ordenado por días y excluyendo Italia. $report es un array multidimensional de dimensiones y sus métricas var_dump($report) permite ver todo el reporte. Leer la API de exportación de datos de Google Analytics para conocer más combinaciones de dimensiones, métricas, filtros y órdenes.

$i = 0; $serie_dim = null; $serie_val = null;

foreach ($report as $valor){

$serie_dim .= "'".$fechas[$i]."', ";
$serie_val .= $valor['ga:visits'].", ";
$i++;

}

$serie_dim = substr($serie_dim, 0, -2); $serie_val = substr($serie_val, 0, -2);

Con este bloque transformamos los datos al formato que requiere Highcharts para crear el gráfico.

$script1 = "<script type='text/javascript'
src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
'></script><script type='text/javascript'>// <![CDATA[
var chart;$(document).ready(function() {chart=new Highcharts.Chart({chart:{
renderTo:'container',defaultSeriesType:'line',marginRight:130,marginBottom:25},
title:{text:'VISITAS POR DÍA (Últimos 15 días, excepto desde Italia)',x:-20},
subtitle:{text:'Fuente: Google Analytics',x:-20},xAxis:{categories:['.
$serie_dim.']},yAxis:{title:{text:'Visitas'},plotLines:[{value:0,width:1,
color:'#808080'}]},tooltip:{formatter:function(){return'<b>'+this.series.name
+'</b>'+this.x+': '+this.y+'';}},legend:{layout:'vertical',align:'right',
verticalAlign:'top',x:-10,y:100,borderWidth:0},series:[{name:'Visitas',
data:['.$serie_val.']}]});});// ]]></script><script type='text/javascript
' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
'></script><script type='text/javascript' src='highcharts.js'></script>
<script type='text/javascript' src='exporting.js'></script><div id='
container' style='width: 800px; height: 400px; margin: 0 auto;'></div>";

Este es el bloque Javascript que utiliza Highcharts para crear un gráfico de líneas, pasado por un Minifierpara ahorrar espacio.

echo $script1;

Aquí ejecutamos el Javascript para recuperar el código fuente de Highcharts. Este es el código completo para crear un gráfico con Google Analytics:

<!--?php include "function_dates.php"; include "googleanalytics.class.php"; 
$fecha2 = date('Y-m-d'); $fecha1 = strtotime ('-15 day', 
strtotime ($fecha2 ) ); $fecha1 = date ('Y-m-d' , $fecha1 ); 
$fechas = createDateRangeArray($fecha1,$fecha2); 
$days = count($fechas); 
try { $ga = new GoogleAnalytics('usuario@gmail.com','password'); 
$ga->setProfile('ga:48231979');
$ga->setDateRange($fecha1,$fecha2);

$report = $ga->getReport(

array('dimensions'=>urlencode('ga:date'),
'metrics'=>urlencode('ga:visits'),
'filters'=>urlencode('ga:country!=@Italy'),
'sort'=>'ga:date'
)
);

$i = 0; $serie_dim = null; 
$serie_val = null;

foreach ($report as $valor){

$serie_dim .= "'".$fechas[$i]."', ";
$serie_val .= $valor['ga:visits'].", ";
$i++;

}

$serie_dim = substr($serie_dim, 0, -2); $serie_val = substr($serie_val, 0, -2);

$script1 = "<script type='text/javascript'
src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
'></script><script type='text/javascript'>// <![CDATA[
var chart;$(document).ready(function() {chart=new Highcharts.Chart({chart:{
renderTo:'container',defaultSeriesType:'line',marginRight:130,marginBottom:25},
title:{text:'VISITAS POR DÍA (Últimos 15 días, excepto desde Italia)',x:-20},
subtitle:{text:'Fuente: Google Analytics',x:-20},xAxis:{categories:['.
$serie_dim.']},yAxis:{title:{text:'Visitas'},plotLines:[{value:0,width:1,
color:'#808080'}]},tooltip:{formatter:function(){return'<b>'+this.series.name
+'</b>'+this.x+': '+this.y+'';}},legend:{layout:'vertical',align:'right',
verticalAlign:'top',x:-10,y:100,borderWidth:0},series:[{name:'Visitas',
data:['.$serie_val.']}]});});// ]]></script><script type='text/javascript
' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
'></script><script type='text/javascript' src='highcharts.js'></script>
<script type='text/javascript' src='exporting.js'></script><div id='
container' style='width: 800px; height: 400px; margin: 0 auto;'></div>";

}catch (Exception $e) {

print 'Error: ' . $e->getMessage();

}

echo $script1;

?>

Descarga el .zip con este código y todos los archivos necesarios aquí. Si sabes programar en PHP, puedes crear gráficos personalizados con sólo retocar las dimensiones y métricas (leer API exportación de datos de Google Analytics). Para crear los gráficos, también existen otras alternativas como Google Charts o amChart.

Update 18-04-2012: En vez de utilizar la función createDateRangeArray, también es posible tomar las fechas directamente desde Google Analytics. Sin embargo, prefiero el primer método para tener disponible un array de fechas limpio y no tratar con el formato confuso que regresa Google Analytics (ej. 20120318). Además, luego podemos utilizar el mismo array para consultas a otras bases de datos, donde no todas las fechas tienen un valor asociado. Es decir, si también consultamos una base de datos MySQL de un eCommmerce, y en un día no ha habido compras, esa fecha no se mostrará y existirá un vacío en el gráfico de líneas. Utilizando nuestro propio array de fechas ($fechas), evitamos este tipo de problemas.

Escribe tu comentario comment9 Comentarios
  1. 2015-07-24 Luis

    hola disculpa excelente tu post. pero ultimamente no se si google cambio la api, pero ya no funciona. tienes alguna solución?

    • 2015-07-24 Daniel Piñero

      Efectivamente, parece que ha cambiado la API porque a mí no me funciona tampoco. Si tengo tiempo intentaré hacer un nuevo código.

    2014-11-10 Gorka

    Buenas daniel. No se porque pero de todas todas me devuelve Error: Failed to authenticate, please check your email and password. He probado con 2 cuentas distintas y me sigue pasando lo mismo. Alguna idea?

    • 2014-11-10 Daniel Piñero

      Hola. Te recomendaría: 1) verificar que efectivamente tengas acceso a esa cuenta de Analytics, 2) utilizar un correo de Gmail para el login, nunca de otro proveedor, 3) probar el mismo script desde diferentes servidores.

    2014-07-24 Francisco

    Saludos, Gracias por el tutorial, ha sido muy útil, ¿como podría hacer gráficas de sectores?, por ejemplo para diferenciar entre el porcentaje de los tipos dispositivos que ven mi página. Gracias

    2014-07-02 Alfonso

    Hola amigo ga ya no existe, ahora es universal analytics, como puedo integrarlo con el UA saludos!

    • 2014-07-07 Daniel Piñero

      Hola Alfonso. GA significa Google Analytics. Esta API para crear gráficos es perfectamente útil aun utilizando Universal Analytics. Lo puedes comprobar pinchando en el ejemplo. Un saludo.

    2014-03-07 Carlos

    Hola. Gracias por el tutorial. El más completo que leído hasta el día de hoy. Enhorabuena. Tan sólo una duda: los avisos siguientes de tu code son significativos para el funcionamiento? Notice: Array to string conversion in googleanalytics.class.php on line 251 Notice: Undefined variable: dims in googleanalytics.class.php on line 126 Por otro lado, para utilizar varios gráficos es necesarios hacer includes o bien se puede realizar en un mismo script? Gracias

    • 2014-07-07 Daniel Piñero

      Hola Carlos. Disculpa la tardanza. Personalmente, no presto atención a los Notice. Sobre lo otro, puedes crear varios gráficos perfectamente en un mismo fichero. Un saludo.

mode_editEscribe tu comentario

menu
menu