PROGRAMMAZIONE / WEB

API Google Analytics – Come Integrarle nel tuo sito web

In questo Tutorial spiegheremo come creare una pagina web integrata con le API Google Analytics.

Di seguito gli step da seguire:

  1. Creare un nuovo Client ID per un progetto Google API (se non sai come fare clicca qui per accedere alla relativa guida)
  2. Una volta creato il Client ID, impostare nella scheda “Limitazioni -> Origini JavaScript autorizzate” l’URL dal quale verrà utilizzato tale ID
  3. Abilitare l’Analytics API come da immagine sottostante:
  4. Attivare API_Ananlytics
  5. Creare una pagina web (e.g. html) e inserire il seguente codice:
<!DOCTYPE html>
<html>
<head>
  <title>Google Analytics API DEMO</title>
</head>
<body>

<!-- Step 1: Crea gli elementi contenitore. -->

<section id="auth-button"></section>
<section id="view-selector"></section>
<section id="timeline"></section>

<!-- Step 2: Carica la libreria -->

<script>
(function(w,d,s,g,js,fjs){
  g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(cb){this.q.push(cb)}};
  js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
  js.src='https://apis.google.com/js/platform.js';
  fjs.parentNode.insertBefore(js,fjs);js.onload=function(){g.load('analytics')};
}(window,document,'script'));
</script>

<script>
gapi.analytics.ready(function() {

  // Step 3: Autorizza l'utente

  gapi.analytics.auth.authorize({
    container: 'auth-button',
    clientid: 'Inserisci qui il tuo client ID',
  });

  // Step 4: Crea la selezione delle viste.

  var viewSelector = new gapi.analytics.ViewSelector({
    container: 'view-selector'
  });

  // Step 5: Creare il grafico con la timeline.

  var timeline = new gapi.analytics.googleCharts.DataChart({
    reportType: 'ga',
    query: {
      'dimensions': 'ga:date',
      'metrics': 'ga:sessions',
      'start-date': '30daysAgo',
      'end-date': 'yesterday',
    },
    chart: {
      type: 'LINE',
      container: 'timeline'
    }
  });

  // Step 6: Unisci i componenti

  gapi.analytics.auth.on('success', function(response) {
    viewSelector.execute();
  });

  viewSelector.on('change', function(ids) {
    var newIds = {
      query: {
        ids: ids
      }
    }
    timeline.set(newIds).execute();
  });
});
</script>
</body>
</html>

Sarà visualizzata una pagina come quella di seguito allegata:

API Google Analytics - Esempio Integrazione

API Google Analytics – Esempio Integrazione

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Spero possa esservi utile. Un saluto 🙂

 

Tags: , , , , ,

Utilizziamo dei cookies sul nostro sito web

Per favore conferma, se accetti il tracciamento dei tuoi cookie. Puoi anche rifiutare il tracciamento, continuando la navigazione senza che i tuoi dati vengano inviati a terze parti..