ugrás a tartalomhoz

Google Analitics értékei Dasboard oldalba

cszlak · 2015. Május. 1. (P), 11.37
Sziasztok

Kérdésem az lenne, hogy a Google Analitics adatait hogyan lehet (egyáltalán lehet-e valahogy) lekérdezni és felhasználni, tartalom kezelő Dasboard (Statisztika) oldalába.

Arról lenne szó, hogy a tartalom kezelő első oldalán megjelennének táblázatok, grafikonok, arról, hogyan is teljesít az oldal az Analitics szerint.

Javascript , PHP, Link-ek is érdekelek.
Esetleg kész scriptek, vagy hasonlók.

Előre is köszönöm.
‹ Youtube csatorna beillesztése honlapba Confirm kétszer fut le! ›
 ■
1

Analytics Core Reporting API

Poetro · 2015. Május. 1. (P), 11.46
Analytics Core Reporting API
2

A Google legtöbb

bamegakapa · 2015. Május. 1. (P), 11.52
A Google legtöbb szolgáltatásához van API, az Analyticshez is.

Leírás, illetve Google tutorial, meg egy SitePoint tutorial.

Legközelebb hasonló esetben az api szóval dúsíthatod fel kellőképpen a keresésedet.
3

Köszi a gyors választ

cszlak · 2015. Május. 1. (P), 12.10
Köszi.

Abban még tudnál segíteni, hogy a

var clientId = 'YOUR CLIENT ID';
var apiKey = 'YOUR API KEY';

adatokat hol találom az Analitics-ban?

Olyat találtam: adatkészlet azonositó
4

read before asking

bamegakapa · 2015. Május. 1. (P), 12.14
Olvasd el és kövesd a tutorialokat, amiket linkeltem. Létre kell majd hoznod egy projektet a Google Developers Console-ban.
5

Analytics beépítése Saját weboldalba

cszlak · 2015. Május. 14. (Cs), 10.50
Első lépések:

Google Analytics oldalon, Fiók létrehozása:
- Belépés Google azonosítóval.
- Adminisztráció oldalon fiók létrehozása. (Fiók legördülő menü-ben van)
!! Elmenteni a (UA-xxxxxxx-x) azonosítót, később kelleni fog !!
- Tulajdon és Megtekintés létrehozása.
- Jelentés készítés és Testreszabásnál beállítani a kívánt értékeket

Google Developers Console, Project létrehozása:
- Létrehozáskor csak egy nevet kell neki adni, azonosítót ő ad hozzá.
Megnyitás után:
- Premissions menüpont, hozzáadjuk magunkat.
- APis and auth/ APIs menüpont: Analytics API hozáadása
- APis and auth/ Creditnails menüpont: Create new Client ID és Create new Key

!! A 'Client ID' értéket elmentjük később kelleni fog !!
!! Ha a megjelenítendő oldal és az ahol megjeleníted nem egyezik akkor:

Redirect URIs http://www.domain.hu/Admin //ahol megjelenik
JavaScript origins http://www.domain.hu/ // ami megjelenik


HTML-be

<head>
 <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script async src="analytics/analytics.js"></script> //GitHub-ról
<script>
(function(w,d,s,g,js,fs){
  g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(f){this.q.push(f);}};
  js=d.createElement(s);fs=d.getElementsByTagName(s)[0];
  js.src='https://apis.google.com/js/platform.js';
  fs.parentNode.insertBefore(js,fs);js.onload=function(){g.load('analytics');};
}(window,document,'script'));
</script>
</head>
<body>
....
//Boostrap style !!
<div class="row">
              <div class="col-md-12" id="analytics_sajat">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <h3 class="panel-title"><i class="fa fa-bar-chart-o"></i> Google Analitics</h3>
                        </div>
                        <div class="panel-body"> 
       
    <div id="embed-api-auth-container"></div>
    
 <div class="col-md-6"> //Boostrap style: width:50%
 <h3>Látogatottság ország szerint</h3> 
 <div id="chart-1-container"></div>  
 </div>
  
 <div class="col-md-6">
  <h3>Látogatottság</h3> 
<div id="chart-2-container"></div>
</div> 

<div class="col-md-12"> //Boostrap style: width:100%

 <div class="col-md-6"> 
  <h3>Válasszon böngészőt</h3> 
<div id="main-chart-container"></div>
</div> 

<div class="col-md-6">
<h3>Választott böngésző adatai</h3>  
<div id="breakdown-chart-container"></div>
</div> 
</div> 


<div class="col-md-12" style="display:none;"> 
     //Láthatatlanná tettem, mert csak 1 van benne
<div  id="view-selector-container"></div>
 </div>
   
<script>

gapi.analytics.ready(function() {

  gapi.analytics.auth.authorize({
    container: 'embed-api-auth-container',
    clientid: 'xxxxxxxxx-xxxxxxx.apps.googleusercontent.com',  
// Ide Jön a korábban elmentett Client Id
  });

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

 var dataChart1 = new gapi.analytics.googleCharts.DataChart({
    query: {
      metrics: 'ga:sessions',
      dimensions: 'ga:country',
      'start-date': '90daysAgo',
      'end-date': 'yesterday',
      'max-results': 6,
      sort: '-ga:sessions'
    },
    chart: {
      container: 'chart-1-container',
      type: 'PIE',
      options: {
        width: '100%'
      }
    }
  });

  var dataChart2 = new gapi.analytics.googleCharts.DataChart({
    query: {
      metrics: 'ga:pageviews',
      dimensions: 'ga:date',
      'start-date': '30daysAgo',
      'end-date': '8daysAgo'
    },
    chart: {
      container: 'chart-2-container',
      type: 'LINE',
      options: {
        width: '100%'
      }
    }
  });

  var mainChart = new gapi.analytics.googleCharts.DataChart({
    query: {
      'dimensions': 'ga:browser',
      'metrics': 'ga:sessions',
      'sort': '-ga:sessions',
      'max-results': '6'
    },
    chart: {
      type: 'TABLE',
      container: 'main-chart-container',
      options: {
        width: '100%'
      }
    }
  });
 
  var breakdownChart = new gapi.analytics.googleCharts.DataChart({
    query: {
      'dimensions': 'ga:date',
      'metrics': 'ga:sessions',
      'start-date': '30daysAgo',
      'end-date': 'yesterday'
    },
    chart: {
      type: 'LINE',
      container: 'breakdown-chart-container',
      options: {
        width: '100%'
      }
    }
  });

  var mainChartRowClickListener;
  
  viewSelector.on('change', function(ids) {
    dataChart1.set({query: {ids: ids}}).execute();
    dataChart2.set({query: {ids: ids}}).execute();  
    var options = {query: {ids: ids}};   
    if (mainChartRowClickListener) {
      google.visualization.events.removeListener(mainChartRowClickListener);
    }

    mainChart.set(options).execute();
    breakdownChart.set(options);

    
    if (breakdownChart.get().query.filters) breakdownChart.execute();
  });
 
  mainChart.on('success', function(response) {

    var chart = response.chart;
    var dataTable = response.dataTable;

  
    mainChartRowClickListener = google.visualization.events
        .addListener(chart, 'select', function(event) {

      if (!chart.getSelection().length) return;

      var row =  chart.getSelection()[0].row;
      var browser =  dataTable.getValue(row, 0);
      var options = {
        query: {
          filters: 'ga:browser==' + browser
        },
        chart: {
          options: {
            title: browser
          }
        }
      };
      breakdownChart.set(options).execute();
    });
  });
});
</script>

   </div> </div> </div> </div>
...
<script src="analytics/view-selector2.js"></script> 
//GitHub-ról 
+ view-selector2.js.map //belinkelni nem kell, csak mellett legyen
<script src="analytics/date-range-selector.js"></script>  
//GitHub-ról (Bár én ezt nem használom azért ide írtam)
+ date-range-selector.js.map //belinkelni nem kell, csak mellett legyen
</body>
Néhány segítő link:
https://www.google.com/analytics/
https://console.developers.google.com/project
https://ga-dev-tools.appspot.com/embed-api/
https://github.com/googleanalytics/ga-dev-tools
6

+1

szabo.b.gabor · 2015. Május. 14. (Cs), 12.55
!