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
  1. <head>  
  2.  <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>  
  3. <script async src="analytics/analytics.js"></script> //GitHub-ról  
  4. <script>  
  5. (function(w,d,s,g,js,fs){  
  6.   g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(f){this.q.push(f);}};  
  7.   js=d.createElement(s);fs=d.getElementsByTagName(s)[0];  
  8.   js.src='https://apis.google.com/js/platform.js';  
  9.   fs.parentNode.insertBefore(js,fs);js.onload=function(){g.load('analytics');};  
  10. }(window,document,'script'));  
  11. </script>  
  12. </head>  
  13. <body>  
  14. ....  
  15. //Boostrap style !!  
  16. <div class="row">  
  17.               <div class="col-md-12" id="analytics_sajat">  
  18.                     <div class="panel panel-primary">  
  19.                         <div class="panel-heading">  
  20.                             <h3 class="panel-title"><i class="fa fa-bar-chart-o"></i> Google Analitics</h3>  
  21.                         </div>  
  22.                         <div class="panel-body">   
  23.          
  24.     <div id="embed-api-auth-container"></div>  
  25.       
  26.  <div class="col-md-6"> //Boostrap style: width:50%  
  27.  <h3>Látogatottság ország szerint</h3>   
  28.  <div id="chart-1-container"></div>    
  29.  </div>  
  30.     
  31.  <div class="col-md-6">  
  32.   <h3>Látogatottság</h3>   
  33. <div id="chart-2-container"></div>  
  34. </div>   
  35.   
  36. <div class="col-md-12"> //Boostrap style: width:100%  
  37.   
  38.  <div class="col-md-6">   
  39.   <h3>Válasszon böngészőt</h3>   
  40. <div id="main-chart-container"></div>  
  41. </div>   
  42.   
  43. <div class="col-md-6">  
  44. <h3>Választott böngésző adatai</h3>    
  45. <div id="breakdown-chart-container"></div>  
  46. </div>   
  47. </div>   
  48.   
  49.   
  50. <div class="col-md-12" style="display:none;">   
  51.      //Láthatatlanná tettem, mert csak 1 van benne  
  52. <div  id="view-selector-container"></div>  
  53.  </div>  
  54.      
  55. <script>  
  56.   
  57. gapi.analytics.ready(function() {  
  58.   
  59.   gapi.analytics.auth.authorize({  
  60.     container: 'embed-api-auth-container',  
  61.     clientid: 'xxxxxxxxx-xxxxxxx.apps.googleusercontent.com',    
  62. // Ide Jön a korábban elmentett Client Id  
  63.   });  
  64.   
  65.   var viewSelector = new gapi.analytics.ViewSelector({  
  66.     container: 'view-selector-container'  
  67.   });  
  68.     
  69.   viewSelector.execute();  
  70.   
  71.  var dataChart1 = new gapi.analytics.googleCharts.DataChart({  
  72.     query: {  
  73.       metrics: 'ga:sessions',  
  74.       dimensions: 'ga:country',  
  75.       'start-date': '90daysAgo',  
  76.       'end-date': 'yesterday',  
  77.       'max-results': 6,  
  78.       sort: '-ga:sessions'  
  79.     },  
  80.     chart: {  
  81.       container: 'chart-1-container',  
  82.       type: 'PIE',  
  83.       options: {  
  84.         width: '100%'  
  85.       }  
  86.     }  
  87.   });  
  88.   
  89.   var dataChart2 = new gapi.analytics.googleCharts.DataChart({  
  90.     query: {  
  91.       metrics: 'ga:pageviews',  
  92.       dimensions: 'ga:date',  
  93.       'start-date': '30daysAgo',  
  94.       'end-date': '8daysAgo'  
  95.     },  
  96.     chart: {  
  97.       container: 'chart-2-container',  
  98.       type: 'LINE',  
  99.       options: {  
  100.         width: '100%'  
  101.       }  
  102.     }  
  103.   });  
  104.   
  105.   var mainChart = new gapi.analytics.googleCharts.DataChart({  
  106.     query: {  
  107.       'dimensions': 'ga:browser',  
  108.       'metrics': 'ga:sessions',  
  109.       'sort': '-ga:sessions',  
  110.       'max-results': '6'  
  111.     },  
  112.     chart: {  
  113.       type: 'TABLE',  
  114.       container: 'main-chart-container',  
  115.       options: {  
  116.         width: '100%'  
  117.       }  
  118.     }  
  119.   });  
  120.    
  121.   var breakdownChart = new gapi.analytics.googleCharts.DataChart({  
  122.     query: {  
  123.       'dimensions': 'ga:date',  
  124.       'metrics': 'ga:sessions',  
  125.       'start-date': '30daysAgo',  
  126.       'end-date': 'yesterday'  
  127.     },  
  128.     chart: {  
  129.       type: 'LINE',  
  130.       container: 'breakdown-chart-container',  
  131.       options: {  
  132.         width: '100%'  
  133.       }  
  134.     }  
  135.   });  
  136.   
  137.   var mainChartRowClickListener;  
  138.     
  139.   viewSelector.on('change', function(ids) {  
  140.     dataChart1.set({query: {ids: ids}}).execute();  
  141.     dataChart2.set({query: {ids: ids}}).execute();    
  142.     var options = {query: {ids: ids}};     
  143.     if (mainChartRowClickListener) {  
  144.       google.visualization.events.removeListener(mainChartRowClickListener);  
  145.     }  
  146.   
  147.     mainChart.set(options).execute();  
  148.     breakdownChart.set(options);  
  149.   
  150.       
  151.     if (breakdownChart.get().query.filters) breakdownChart.execute();  
  152.   });  
  153.    
  154.   mainChart.on('success', function(response) {  
  155.   
  156.     var chart = response.chart;  
  157.     var dataTable = response.dataTable;  
  158.   
  159.     
  160.     mainChartRowClickListener = google.visualization.events  
  161.         .addListener(chart, 'select', function(event) {  
  162.   
  163.       if (!chart.getSelection().length) return;  
  164.   
  165.       var row =  chart.getSelection()[0].row;  
  166.       var browser =  dataTable.getValue(row, 0);  
  167.       var options = {  
  168.         query: {  
  169.           filters: 'ga:browser==' + browser  
  170.         },  
  171.         chart: {  
  172.           options: {  
  173.             title: browser  
  174.           }  
  175.         }  
  176.       };  
  177.       breakdownChart.set(options).execute();  
  178.     });  
  179.   });  
  180. });  
  181. </script>  
  182.   
  183.    </div> </div> </div> </div>  
  184. ...  
  185. <script src="analytics/view-selector2.js"></script>   
  186. //GitHub-ról   
  187. + view-selector2.js.map //belinkelni nem kell, csak mellett legyen  
  188. <script src="analytics/date-range-selector.js"></script>    
  189. //GitHub-ról (Bár én ezt nem használom azért ide írtam)  
  190. + date-range-selector.js.map //belinkelni nem kell, csak mellett legyen  
  191. </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
!