Visualizzare le statistiche di Google Analytics con Javascript Parte 1

Nelle ultime settimane Google ha presentato le Google Analytics API con relativa sezione su Google Code, dando così la possibilità agli sviluppatori di sperimentarne l’utilizzo. L’approccio è molto semplice e può essere eseguito con diversi linguaggi.

I vantaggi principali dati dall’utilizzo delle API di Google Analytics sono:

- L’aggiornamento in tempo reale delle statistiche

-Accesso ai dati di Google Analytics dal proprio spazio web

-Semplicità di svluppo grazie al supporto fornito da Google

- Possibilità di utilizzo di Javascript

I passi da seguire per accedere a Google Analitycs con javascript sono molto semplici:

1) Richiesta della libreria javascript per l’utilizzo della versione

2)Scelta della versione della libreria

3)Autenticazione dell’utente

4)Richiesta dei dati

Vediamo nel dettaglio come eseguire questi passaggi.

Innazitutto creiamo un nuovo file .html (possibilmente con un doctype e con l’intenzione di fare una pagina web standard :) ) e richiamiamo nell’head della pagina la libreria javascript fornita da google per utilizzare le api di analytics.

<script type="text/javascript" src="http://www.google.com/jsapi">
</script>

Grazie a questa libreria abbiamo a disposizione tutte le funzioni necessarie per ricavare le statistiche dal nostro account. Come passaggio bisogna specificare quale versione della libreria si vuole utilizzare, Google consiglia di utilizzare l’ultima versione superiore alla 1.

<script type="text/javascript">
  google.load("gdata", "1.x");
</script>

Separare questi due script è poco elegante ma risulta indispensabile per specificare correttamente la versione della libreria da utilizzare, in alternativa è consigliabile utilizzare la google.load() all’interno dell’evento onload sul tag body della pagina in modo da caricare la libreria quando la pagina è completamente caricata.

Occorre ricordare che per un corretto funzionamento dell’autenticazione occorre inserire un’immagine presente nello spazio web da cui parte la richiesta, nel nostro caso è stata inserita un’immagine di 1x1px trasparente

<img src="blank.gif" id="hidden"/>

Nascosta tramite css per non interferire con il layout della pagina.

#hidden{display:none;}

Per iniziare con a richiedere dati a Google è necessario specificare quali servizi andremo a richiedere.

var myService = new google.gdata.analytics.AnalyticsService('sample');
var scope = "https://www.google.com/analytics/feeds";

In questo modo dichiariamoun nome per la nostra applicazione/servizio e specifichiamo quale servizio tra le API di Google andremo ad utilizzare.

Per l’autenticazione dell’utente è consigliabile uilizzare la AuthSub Proxy Authentication al momento supportata da javascript. La procedura di autenticazione rimanda l’utente alla pagina di login di Google e richiede di autorizzare il sito che fa la richiesta per ottenere i dati da Google Analitycs.

Questa procedura permette la richiesta dei dati senza mostrarli all’operatore del dominio, all’utente viene assegnato un cookie che consentirà la visione dei dati, è necessario inserire la possibilità di logout poichè il cookie ha durata di due anni. Il permesso dato nel momento del login al sito che ne fa richiesta può essere disabilitato nelle impostazioni presenti nel proprio account nella pagina di Google Analytics.

function login() {
	scope = "https://www.google.com/analytics/feeds";
    var token = google.accounts.user.login(scope);
    getStatus();
}

Creiamo una prima funzione per effettuare il login

function logout() {
    google.accounts.user.logout();
    getStatus();
}

E una seconda per effettuare il logout

function getStatus() {
    var statVal = document.getElementById("status");
    var btnLogin = document.getElementById("btnLogin");

    if (google.accounts.user.checkLogin(scope) == "") {
        btnLogin.value = "Login";
        btnLogin.onclick = login;
        statVal.innerHTML = "Profilo non autenticato.";
		document.getElementById("display").innerHTML = "";
    } else {
        btnLogin.value = "Logout";
        btnLogin.onclick = logout;
        statVal.innerHTML = "Profilo autenticato.";
		getAccountFeed();
    }
}

La terza funzione ci serve per gestire il login e il logout restituendo un messaggio sullo stato di autenticazione (nell’elemento con id status ) e gestendo il valore del pulsante di login e logout (con id btnLogin).

In questo modo l’utente può accedere alle statistiche di Google Analytics da un file html in qualunque spazio web purchè loggato ad un account valido e funzionante.

Nel prossimo articolo vedremo come mostrare i dati relativi all’account dell’utente, per il momento vi lascio questo esempio di autenticazione per le API di Google Analytics con javascript.

Info su Mauro Accornero

Sviluppatore e Web Designer Freelance, lavora a Milano dove collabora con Agenzie di Comunicazione ed Aziende del settore. Docente presso la Nuova Accademia di Belle Arti a Milano dove tiene corsi in ambito web per il dipartimento di Graphic Design e Art Direction.
Questa voce è stata pubblicata in Tutorial e contrassegnata con , , . Contrassegna il permalink.

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

*

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>