Contador Google Analytics parecido a FeedCount

El popular chicklet FeedCount de FeedBurner es la forma mas utilizada para mostrar el número de suscriptores de un feed.

Además, un diseño similar es usado por TwitterCounter para mostrar tus seguidores en Twitter.

Esta vez crearemos una interface dimanica parecida al FeedCount que muestre las estadisticas de tu website como paginas vistas, visitas, etc. (una o todas ellas) usando PHP.

En este tutorial presentamos 2 contadores diferentes:

• Un contador que muestra solo una métrica – versión básica
• Un contador que puede mostrar múltiples métricas (algo de jQuery aqui) – versión avanzada

Contador Basico

empecemos con la parte PHP:

¿Como recuperar datos de Google Analytics Data con PHP?

Vamos a usar la clase PHP llamada GAPI que utiliza la API de Google Analytics fácilmente.

Existen 3 variables que necesitamos para empezar a usar GAPI:

• Usuario de Google Analytics que tiene acceso a las estadísticas del website a ser mostrada (Sugiero crear una nueva cuenta en Google especificamente para este proposito y ofrecer acceso de solo lectura a los datos del website. Esto para prevenir el uso de tu cuenta real de Google en tu código lo cual es un buen paso por seguridad).
• Contraseña del usuario de Google Analytics.
• Profile ID del website (No es lo que comienza con UA, mas bien, es el ID que aparece en la barra de direcciones del navegador cuando haces click en algun reporte del website).

GAPI ofrece un uso sencillo para accesar a los datos de Google Analytics:

<?php
define('ga_email','yourGoogleEmail');
define('ga_password','yourGooglePass');
define('ga_profile_id','yourProfileID');

require 'gapi.class.php';
$ga = new gapi(ga_email,ga_password);
$ga->requestReportData(ga_profile_id,array('browser','browserVersion'),array('pageviews'));
?>

Ahora tenemos los datos de paginas vistas los últimos 30 días (Es posible definir fechas personalizadas, revisa la documentación de GAPI.)

(Si queremos leer mas sobre GAPI, code-diesel tiene un fabuloso articulo sobre esta clase.)

Aquí esta el HTML:

<div id="statsWrap">
	<div id="statsDetailsWrap">
		<div id="statsCount">
			<?php echo $ga->getPageviews() ?>
		</div>
		<div id="statsMetric">
			pageviews
		</div>
	</div>
	<div id="byGoogle">By Google Analytics</div>
</div>

Y el CSS

#statsWrap {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}
#statsDetailsWrap {
	background: #333333;
	float: left;
	padding: 1px 3px 1px 1px;
	border: #666666 1px inset;
}
#statsCount {
	float: left;
	padding: 1px 3px;
	background: #999999;
	color: #FFFFFF;
	border: #666666 1px inset;
}
#statsMetric {
	float: left;
	padding: 3px;
	color: #FFFFFF;
}
#byGoogle {
	clear: both;
	color: #666666;
	font-size: 10px;
}

Contador Avanazdo (con jQuery)

Es posible recuperar múltiples datos con GAPI & crear un contador auto-rotativo que muestre múltiples métricas (visitas & paginas vistas).

Vamos a utilizar un poco de la versión mejorada de código PHP:

<?php
define('ga_email','yourGoogleEmail');
define('ga_password','yourGooglePass');
define('ga_profile_id','yourProfileID');

require 'gapi.class.php';
$ga = new gapi(ga_email,ga_password);
$ga->requestReportData(ga_profile_id,array('browser','browserVersion'),array('pageviews','visits'));
?>

Y una pequeña actualización para el código HTML mediante la adición de unas pocas lineas para concluir todas las métricas que podamos mostrar/ocultar.

<div id="statsWrap">
	<div id="statsDetailsWrap">
		<div id="statsCount">
			<span id="statsPageviews"><?php echo $ga->getPageviews() ?></span>
			<span id="statsVisits"><?php echo $ga->getVisits() ?></span>
		</div>
		<div id="statsMetric">
			<span id="statsPageviewsText">pageviews</span>
			<span id="statsVisitsText">visits</span>
		</div>
	</div>
	<div id="byGoogle">By Google Analytics</div>
</div>

También he actualizado un poco el CSS agregando anchura y alturas no modificables a los elementos para asegurarse de que se verá bien cuando cambia:

#statsWrap {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}
#statsDetailsWrap {
	background: #333333;
	float: left;
	padding: 1px 3px 1px 1px;
	border: #666666 1px inset;
}
#statsCount {
	float: left;
	padding: 1px 3px;
	background: #999999;
	color: #FFFFFF;
	border: #666666 1px inset;
	width: 40px;
	height: 12px;
}
#statsMetric {
	float: left;
	padding: 3px;
	color: #FFFFFF;
	width: 50px;
	height: 12px;
}
#byGoogle {
	clear: both;
	color: #666666;
	font-size: 10px;
}

Y aquí esta la parte jQuery que rota las métricas:

<script type="text/javascript">
$(document).ready(function() {   

	$("#statsPageviews").hide();
	$("#statsVisits").hide();
	$("#statsPageviewsText").hide();
	$("#statsVisitsText").hide();
	rotateMetrics(); 

	function rotateMetrics() {
		$("#statsPageviewsText").slideDown("slow");
		$("#statsPageviews").slideDown("slow", function() {
			setTimeout(function() {
				$("#statsPageviewsText").slideUp("slow");
				$("#statsPageviews").slideUp("slow", function() {
					$("#statsVisitsText").slideDown("slow");
					$("#statsVisits").slideDown("slow", function() {
						setTimeout(function() {
							$("#statsVisitsText").slideUp("slow");
							$("#statsVisits").slideUp("slow", function() {
								rotateMetrics();
							});
						}, 3000);
					});
				});
			}, 3000);
		});

	}
});
</script>

En la parte jQuery, aunque puede parecer complicado, definitivamente no lo es. Usamos callbacks para las funciones slideUp/slideDown y añade un pequeño retraso entre las transiciones.

Eso es todo