Štatistiky pomocou Google Analytics

Jednoduché štatistiky pomocou Google Analytics a Google Char API

Myslím, že takmer každý, kto sa aspoň trocha zaujíma o webové technológie, už počul o službe Google Analytics (GA). Prostredníctvom tohto článku by som rád čitateľov informoval o možnosti využitia Google Analytics k tvorbe štatistík na vlastných stránkach.

Ako funguje Google Analytics

Prostredníctvom nástroja Google Analytics je možné zistiť, akým spôsobom sa návštevníci webových stránok dostali na webové stránky, akým spôsobom si ich prezerajú a čo je najdôležitejší, aké sa nich vyskytujú chyby. Tieto všetky informácie, ale i o veľa viac, sa dá vyčítať prostredníctvom webového rozhrania Google Analytics. Nasadenie GA na svoje stránky je pomerne jednoduché, stačí si vytvoriť profil prostredníctvom webového rozhrania, následne sa vygeneruje sledovací kód, ktorý sa už len umiestni na stránku.

Problém môže nastať vtedy, ak web robíte pre iné osoby, pre ktoré je možno problém sa prihlasovať do "nejakého ďalšieho" pomerne prepracovaného webového rozhrania, pričom ich zaujímajú len niektoré konkrétne údaje. Pohodlnejšie by bolo, ak by boli všetky informácie dostupné z jedného miesta (napr. v CMS).

Sťahovanie dát z Google Analytics

Ako väčšina služieb poskytovaných spoločnosťou Google, tak aj GA má verejne dostupné API, s tým rozdielom, že je z neho možné len čítať. Na internete sa dá nájsť viacero riešení, cez ktoré je možné sa pripojiť na Google Analytics exrpot API a sťahovať dáta. Ja používam triedu od Vincenta Kleijnendorsta, ktorú som trocha modifikoval pre svoje účely.

Pripojenie k Google Analytics API

Prvým krokom je overenie užívateľa. Google ponúka niekoľko metód overovania. Osobne si myslím, že medzi najjednoduchšie patrí ClientLogin, ďalšia možnosť je AuthSub.

Pripojenie cez ClientLogin

Najjednoduchšou možnosťou je ClientLogin, pretože stačí nakonfigurovať prihlasovacie meno a heslo priamo v skripte. Avšak tento spôsob má aj svoje nevýhody. Prihlasovacie údaje sa pri každej požiadavke posielajú po sieti a v prípade, ak sa niekto dostane k skriptu, v ktorom sú uložené, môže ho zneužiť.

Pripojenie cez AuthSub

Metóda AuthSub je založená na tom, že užívateľ po prihlásení na stránkach Google požiada o autorizačný token (platný aj po odhlásení užívateľa), ktorý sa vloží do HTTP hlavičky. Výhoda tohto riešenia je, že sa nikdy neposiela prihlasovacie meno a heslo. Taktiež ak sa niekto dostane k danému skriptu uvidí len tzv. hash. Pôvodná trieda od Vincenta Kleijnendorsta umožňovala len prvý spôsob prihlásenia. Užitočné informácie o tomto spôsobe nájdete tu.

try {

   $oAnalytics = new Analytics("googleLogin", "googlePass");  // ClientLogin
   $oAnalytics = new Analytics("/rAUgFGp...cl6-8ZGIKb_yBsCg"); //AuthSub
   $oAnalytics->setProfileByName('profilName'); // vyber profilu podla nazvu
   $oAnalytics->setProfileById('ga:12345678'); // alebo podľa ID (odporúčam)
   $oAnalytics->setDateRange('YYYY-MM-DD', 'YYYY-MM-DD'); // volba obdobia

} catch (GoogleAnalyticsException $e) {

   // do something ..

}

Dolovanie dát

Po úspešnom pripojení nám už len ostáva vyslať požiadavku, na základe ktorej nám budú zaslané požadované dáta. Google má vytvorený vlastný GData (Google Data Protocol) protokol na čítanie, resp. zápis dát. Na stránkach code.google.com nájdete užitočný nástroj, ktorý zjednoduší tvorbu dotazov.

Ukážka niekoľkých mojich najpoužívanejších dotazov:

// pocet navstev, utriedenych podla datumu (dni)
$visitors = $oAnalytics->getData(array( 'dimensions' => 'ga:date',
                                        'metrics'    => 'ga:visits',
                                        'sort'       => 'ga:date'));

// pocet zobrazeni stranok, utriedenych podla datumu (dni)
$pageviews = $oAnalytics->getData(array( 'dimensions' => 'ga:date',
                                         'metrics'    => 'ga:pageviews',
                                         'sort'       => 'ga:date'));

// statistiky prehliadacov
$browsers = $oAnalytics->getData(array( 'dimensions' => 'ga:browser',
                                        'metrics'    => 'ga:visits'));

// zadane slova do vyhladavacov
// poz. znamienko "-" znamena DESC,resp descending
$sources = $oAnalytics->getData(array( 'dimensions' => 'ga:source',
                                       'metrics'    => 'ga:visits',
                                       'max-results' => '20',
                                       'sort'       => '-ga:visits')); 

// priemerna dlzka navstevnika na stranke
$durations = $oAnalytics->getData(array( 'dimensions' => 'ga:year',
                                         'metrics'    => 'ga:avgTimeOnSite'));	

// avg pocet zobrazenych stranok navstevnikom
$pageviewsPerVisit = $oAnalytics->getData(array('dimensions' => 'ga:year',
                                                'metrics'    => 'ga:pageviewsPerVisit'));

// novi navstevnici
$percetNewVisits = $oAnalytics->getData(array( 	'dimensions' => 'ga:year',
                                                'metrics'    => 'ga:percentNewVisits'));

$keywords = $oAnalytics->getData(array( 'dimensions' => 'ga:keyword',
                                        'metrics'    => 'ga:visits',
                                        'max-results' => '20',
                                        'sort'       => '-ga:visits'));

Metóda getData() vracia pole dát. Teraz už ich len stačí nejakým spôsobom interpretovať

Interpretácia dát

Pravdepodobne najjednoduchší spôsob interpretácie je použitie Google Chart API. To je možné rozdeliť do dvoch základných kategórií. A to API pre interaktívne grafy, kde je výstup flash. A statické, kde je výstupom Image.

Štatistika webových prehliadačov

/** ----------------------------------------------------
* Funkcia, vygeneruje parametre URL ku Google Chart API
* Example: https://chart.googleapis.com/chart?cht=&chd=&chs=&...additional_parameters...
*
* http://code.google.com/intl/sk-SK/apis/chart/docs/making_charts.html#introduction
* @param array - key:String, val:Number
* @return String  - url
*/
 function browsers($browsers){

	if(!is_array($browsers) || count($browsers) == 0){
		return;
	}

	 $otherBrowsersCount = 0;
	 $count = 0;

	 // prefiltruje pole, zanecha len zname prehliadace
	 foreach ($browsers as $browserName => $value){
		$count += (int)$value;
		    switch($browserName){
			case 'Chrome' :
			case 'Firefox':
			case 'Internet Explorer':
			case 'Opera' :
			case 'Safari' :
				continue;
			break;

			default :
				$otherBrowsersCount += (int)$value;
				unset($browsers[$browserName]);

		        }

                }

		if($otherBrowsersCount != 0){
			$browsers["Ostatné"]= $otherBrowsersCount;
		}
	}

	 // konfiguracia grafu
	 $data  = "&chd=t:"; // hodnoty
	 $label = "&chl="; //  popisky
	 $i = 1;

	// generovanie dat pre Google Chart API
	foreach ($browsers as $browserName => $value){
		$data .= round(($value / $count) * 100, 0);
		$label.= str_replace(" ", "+", $browserName. "
				    (".round(($value / $count) * 100, 2)."%)");
		if($i != count($browsers)) { $data .= ",";$label.= "|"; }
		$i++;
	} 

	return $data.$label;
}

následne sa už len vloží do elementu img atribút src s hodnotou:

<img src="http://chart.apis.google.com/chart?chs=600x275&chtt=Štatistika+webových+prehliadačov&cht=p<?php echo browsers($browsers); ?>&chma=|0,5" width="600" height="275" alt="" />

Príklad vygenerovaného obrázka z Google Char API:

Štatistika návštev a zobrazení

/** ----------------------------------------------------
* Funkcia ktora spocita navstevnikov, zobrazenia a
* naformatuje data pre Google Chart API.
* ['10.03',14, 42] - [dd.yy , visits, pageviews]
*
* @param array - navstevnici
* @param array - zobrazenia
* @return array  -  index 0 String data pre Google Chart API
*		    index 1 int sucet navstevnikov
*		    index 2 int sucet zobrazeni
*/
function chartData($visitors, $pageviews){

	if(
		(!is_array($visitors) || count($visitors) == 0) &&
		(!is_array($pageviews) || count($pageviews) == 0)
	){
		return;
	}

	// prefiltruje data
	$visitors = array_map("isNumeric", $visitors);
	$pageviews = array_map("isNumeric", $pageviews);

	$data[0] = "";
	$data[1] = 0;
	$data[2] = 0;
	$i = 1;
	foreach ($visitors as $key => $val){
		$data[0] .= "['". editChartDate((string)$key)."',".$val.",                                                   ".$pageviews[$key]."]";
		$data[1] = $data[1] + (int)$val;
		$data[2] = $data[2] + (int)$pageviews[$key];
		if($i != count($visitors)) { $data[0] .= ", "; }
		$i++;
	}
	return $data;
}

<div id="chart_div"></div>

<script type="text/javascript">
	  google.load("visualization", "1", {packages:["corechart"]});
	  google.setOnLoadCallback(drawChart);
	  function drawChart() {

		var data = new google.visualization.DataTable();
		data.addColumn('string', 'Dátum');
		data.addColumn('number', 'Návštevy');
		data.addColumn('number', 'Zobrazenia');
		data.addRows([<?php $data = chartData($visitors, $pageviews); echo $data[0]; ?>]);

var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, {width: 1000, height: 300, title: 'Štatistika návštev a zobrazenia stránok',
 hAxis: {title: 'Year', titleTextStyle: {color: '#f6f6f6'}}
});
 }
</script>     

Príklad generovaného interaktívneho grafu:

Ďalšie štatistiky (priemerná doba na stránke, percentuálny podiel nových návštevníkov, ... ) nájdete v projekte, ktorý je umiestnený na konci článku k stiahnutiu.

Obmedzenia

Štatistiky riešené cez GA majú aj určité nevýhody, o ktorých sa je dobré zmieniť. Keďže výstupom z GA API sú XML súbory, komunikácia so sebou nesie pomerne vysokú réžiu dát a zdržanie (delay), čo je asi najväčšie negatívum tohto riešenia. Okrem toho prístup na GA API ma určité obmedzenia:

• Maximálne 10,000 požiadaviek v priebehu 24 hodín
• 10 požiadaviek v priebehu jednej sekundy
• 4 súbežné požiadavky v danom čase na 1 IP adresu

Zdroj: http://code.google.com/apis/analytics/docs/gdata/home.html
Zdroj: http://www.alexc.me/using-the-google-analyt...er-of-page-views/74/
Zdroj: http://code.google.com/apis/chart/
Zdroj: http://www.swis.nl/ga/
Projekt na stiahnutie: GoogleAnalyticsStats.rar
© Peter Jurkovič