Google Analytics es un producto de Google muy popular que nos permite reunir, procesar y mostrar de forma simple y afable una gran variedad de datos sobre cómo navegan los usuarios en nuestra web. Es posible medir de donde proceden los visitantes (buscadores,redes sociales,anuncios,etc), cuánto tiempo han estado logueados, donde han pulsado, etc. Incluirlo en una página web es bastante sencillo y proporciona varios controles predefinidos en los que se muestra una información suficiente para la mayoría de propietarios de sitios webs.
En Internet hay tutoriales de todos los colores para aprender a utilizarlo, en este se pretende enseñar cómo es posible mostrar información en alguno de los gráficos de Analytics usando información de una BBDD, esto puede ser interesante si tenemos datos almacenados y queremos visualizarlos y comprenderlos más fácilmente. Para conseguirlo se realizarán peticiones asíncronas utilizando JSON y AJAX (con ello conseguimos mejorar la experiencia de usuario al no necesitar recargar la página para consultarlos) y posteriormente se mostrará el gráfico utilizando la API de Analytics.
El patrón de diseño elegido para el desarrollo es el MVC (Modelo-Vista-Controlador), dado que su facilidad para el mantenimiento y extensibilidad del código lo hace ideal para que esta prueba de concepto pueda añadirse fácilmente en cualquier proyecto existente que use un entorno compatible.
Entorno
- PC core i3(3ªGen), 4 GB RAM
- Sistema operativo : Windows 8.1
- IDE: Aptana Studio 3
- Entorno de desarrollo web : WAMP
- Framework: CodeIgniter
Preparación del entorno
En primer lugar debemos configurar CodeIgniter, para ello nos lo bajamos de su página web y pegamos los contenidos del RAR en el directorio raíz del servidor. Ahora tenemos que configurar el SGBD que se va a utilizar, en este ejemplo se ha utilizado MySQL incluido en WAMP. Se ha escogido por su potencia, facilidad de configuración y rapidez de instalación, pero existen muchas más opciones válidas y no necesariamente debe seguir un modelo relacional.
Dado que hay partes del código propias de CodeIgniter, este proyecto solo funcionará utilizando este framework. Es posible utilizar un framework distinto o incluso no utilizar ninguno, pero hay que modificar las lineas propias de CodeIgniter por otras equivalentes que funcionen en el que escojamos.
Modelo
El modelo del patrón MVC es el encargado de gestionar la información contenida en la BBDD, en este ejemplo se pretende crear una BBDD con una tabla en la que está contenida la información que se representará gráficamente en la vista.
Utilizando PhpMyAdmin (o en la consola de MySQL) creamos la BBDD (la he llamado estadisticas), después creamos la tabla que contendrá la información a la que he llamado estadísticas_visitas con los campos id_visita (como clave primaria), id_usuario de tipo numérico y fecha de tipo Timestamp.
Ahora que esta lista la BBDD ponemos los parámetros de configuración en el fichero de configuración de la BBDD (application/config/database.php) de CodeIgniter.
$db['default']['hostname'] = 'localhost';
$db['default']['username'] = 'root';
$db['default']['password'] = '';
$db['default']['database'] = 'estadisticas';
$db['default']['dbdriver'] = 'mysql';
Además es necesario abrir el fichero autoload.php e indicarle que cargue la bbdd.
$autoload['libraries'] = array('database','form_validation');
Con esto ya estaría conectada la BBDD, el siguiente paso es crear el modelo dentro de la carpeta models, creamos un nuevo fichero php dentro de la carpeta application/models y le damos el nombre que queramos, yo lo he llamado visitas_modelo.php.
<?php
class visitas_modelo extends CI_Model{
function NumVisitantes(diasPasados){
$sql = "select count(distinct(idUsuario)) as views from peticionServidor
where DATE_SUB(CURDATE(),INTERVAL ? DAY) <= currentTime AND
DATE_SUB(CURDATE(),INTERVAL ? DAY) > currentTime;";
$query = $this->db->query($sql,array($diasPasados,$diasPasados-1));
$row = $query->row();
return $row->views;
}
}
?>
Esta función lo que hace es consultar en la BBDD el número de usuarios que han hecho peticiones al servidor. Recibe como argumento un número que indica cuantos días hay que retroceder desde la fecha actual para obtener qué día concreto recuperar y devuelve el número de usuarios únicos.
Controlador
El siguiente paso es crear el controlador, el cual se encarga de gestionar los eventos que se producen tanto por el usuario como por el servidor.Esta capa se encargará primero de servir la página cuando se haga la petición a la ruta definida (/RepresentacionAnalytics) y posteriormente atender a la petición de los datos con los que rellenar el gráfico de Analytics.
CodeIgniter tiene por defecto el controlador welcome.php situado en la carpeta /controllers, lo suyo sería crear un controlador nuevo para esta funcionalidad, pero me permito esta bajeza por ser el primer tutorial y tener la excusa de estar ensayando. El controlador contiene lo siguiente:
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Welcome extends CI_Controller {
public function index() {
$this->load->view('welcome_message');
}
function mostrarResultado($contadorDia){
$datos['numDiaPasado'] = $_REQUEST['numDiaPasado'];
$datosJSON['visitas'][0] = array('dia','visitantes');
$this->load->model('visitas_model');
for ($i = $datos['numDiaPasado']; $i >= 1 ; $i--){
$contadorDia = $i-1;
$fechaActual = "2013-11-10 06:00:00";
$fecha = date('j M',(strtotime ( "- $contadorDia day" , strtotime ( $fechaActual) ) ));
$indice=$datos['numDiaPasado']-$i+1;
$datosJSON['visitas'][$indice] =array($fecha,(int)$this->visitas_model->NumVisitantes($i));
}
echo json_encode($datosJSON);
}
?>
En este caso tenemos dos funciones, la primera de ellas se encarga de cargar la vista inicial al acceder a la página, esta viene por defecto con el controlador welcome, así que no tiene mucho mérito que digamos. La segunda es la encargada de recolectar los datos, para ello primero se los pide al modelo y después se los inyecta a la vista en formato JSON. Como se puede ver se obtiene el argumento numDiaPasado que contiene el número de días que se van a mostrar en el gráfico posterior.
La variable $fechaActual debería llamar a la función date() para recuperar la fecha actual real y así poder ver las visitas cada día partiendo del actual, pero como no tenía disponible una BBDD reciente la he fijado a una fecha adecuada para los valores que tenia, si no lo hiciera asi mas adelante obtendría una linea plana al no tener valores.
En la siguiente entrega se implementará la vista y se mostrará el resultado final. Stay tuned!
Enlaces útiles
· http://ellislab.com/codeigniter
· http://www.wampserver.com/en/
Bonus4Code 