synthroid taking instructions

Inicio > Programación Web > Contador Google Analytics parecido a FeedCount

Contador Google Analytics parecido a FeedCount

Sábado, 15 de Abril de 2017 Dejar un comentario Ir a comentarios

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


descarga

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

Comparte y diviertete:
  • Print
  • Digg
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Yahoo! Buzz
  • Twitter
  • Google Bookmarks
  • BarraPunto
  • Bitacoras.com
  • BlinkList
  • Blogosphere
  • Live
  • Meneame
  • MSN Reporter
  • MySpace
  • RSS
  • Suggest to Techmeme via Twitter
  • Technorati
  • LinkedIn
  • email
  • FriendFeed
  • PDF
  • Reddit
  • Wikio IT
  • Add to favorites
  • blogmarks
  • Héctor

    Hola. Gracias por el artículo. Al ejecutarlo con un usuarios que tiene permisos de administrador en la cuenta de Analyticis me da este error:
    Fatal error: Uncaught exception ‘Exception’ with message ‘GAPI:
    Failed to request report data. Error: “GDatainsufficientPermissionsUser
    does not have sufficient permissions for this profile.”

  • Anónimo

    Una cosa, creo que este tema ya esta obsoleto, el id ya no aparece con el rediseño de analytics, alguna idea para hacerlo?

  • Pingback: Bitacoras.com()

  • Joel

    hola, es untema muy interesante no estaba enterado que sabia que se podia hacer esto con php y Google analytics

  • Joel

    hola, es untema muy interesante no estaba enterado que sabia que se podia hacer esto con php y Google analytics

Top Footer