Visualizzare le statistiche di Google Analytics con Javascript Parte 2

Abbiamo visto nel precedente articolo come è possibile far autenticare l’utente al proprio account di Google Analytics grazie alle API e a javascript in una pagina statica collocata in un qualsiasi spazio web. Oggi vedremo come richiedere i dati relativi all’account con cui si è effettuato l’accesso.

Partendo da quanto visto nell’esempio del precedente tutorial incominciamo a ricavare i dati dell’account utente, questa parte diventa importante per gli step successivi, in quanto è necessario ottenere l’id dei profili associati all’account per ricavare le statistiche di ogni profilo.

Come prima cosa definiamo una funzione per accedere ai dati dell’account dell’utente.

function getAccountFeed() {
  var myAccountFeedUri = scope + "/accounts/default";
  myService.getAccountFeed(myAccountFeedUri, listProfiles, handleError);
}

In questo modo specifichiamo il servizio a cui vogliamo accedere (con la variabile scope) e i dati che desideriamo ottenere (in questo caso i dati dell’account utente), nell parte successiva richiamiamo due ulteriori funzioni.

La prima è indispensabile per gestire eventuali errori avvertendo l’utente della problematica riscontrata.

function handleError(e) {
    alert("Si è verificato un errore!\n"
    + e.cause ? e.cause.statusText : e.message);
}

La seconda funzione serve per restituire in output i dati ricavati

function listProfiles(myResultsFeedRoot) {
   var feed = myResultsFeedRoot.feed;
   var entries = feed.entry;
   var dspString = "";

   dspString = [
		"<h1>Profilo</h1>",
		"<table><tr><td>Titolo feed</td>
                 <td>Risultati riportati</td>
                 <td>Pagina iniziale</td>
                 <td>Elementi per pagina</td>
                 <td>ID Feed</td></tr><tr>",
           "<td>" + feed.getTitle().getText() + "</td>",
           "<td>" + feed.getTotalResults().getValue() + "</td>",
           "<td>" + feed.getStartIndex().getValue() + "</td>",
           "<td>" + feed.getItemsPerPage().getValue() + "</td>",
           "<td>" + feed.getId().getValue() + "</td>",
			"</tr></table>"
       ].join('\n');

   dspString += "<h1>Account associati al profilo</h1>";

   for (var idx = 0; idx < entries.length; idx++) {
     var entry = entries[idx];

    dspString += [
	 "<table><tr><td>Nome profilo</td>
          <td>ID</td><td>Ultimo aggiornamento</td>
          <td>ID account</td><td>Nome account </td>
          <td>Web Property ID</td><td>ID profilo</td></tr><tr>",
         "<td>" + entry.getTitle().getText() + "</td>",
         "<td>" + entry.getId().getValue() + "</td>",
         "<td>" + entry.getUpdated().getValue().getDate() + "</td>",
         "<td>" + entry.getPropertyValue("ga:accountId") + "</td>",
         "<td>" + entry.getPropertyValue("ga:accountName") + "</td>",
         "<td>" + entry.getPropertyValue("ga:webPropertyID") + "</td>",
         "<td>" + entry.getPropertyValue("ga:profileId") + "</td>",
         "</tr></table>"].join("\n");
   }

   document.getElementById("display").innerHTML = dspString;
}

Nonostante sembri più articolata non presenta passaggi complessi, nelle prime righe definiamo una variabile per i dati dell’account utente.

var feed = myResultsFeedRoot.feed;
var entries = feed.entry;

Definiamo una nuova variabile vuota che servirà per restituire l’output nella pagina.

var dspString = "";

In questo modo potremmo inserire i feed all’interno della variabile e gestire l’output con un loop.

Infine la variabile dspString sarà poi inserita all’interno dell’elemento con id display presente nella pagina.

document.getElementById("display").innerHTML = dspString;

Com’è possibile vedere dall’esempio, la funzione getAccountFeed è stata associata al click di un pulsante ma può essere tranquillamente richiamata con altri eventi.

Nel prossimo ed ultimo articolo dedicato alle API di Google Analytics con javascript vedremo come ottenere le statistiche relative ad ogni profilo dell’account utente.

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>