Menampilkan statistik browser pengguna melalui Google Analytics API

alfa6661
- December 30, 2015
0 (0 votes)
Rate :
Cara Menampilkan statistik browser pengguna melalui Google Analytics API

Pada artikel Menampilkan laporan Google Analytics dalam bentuk chart, kita telah berhasil menampilkan hasil Google Analytics dalam bentuk chart. Seperti kita lihat pada artikel tersebut, kita bisa melihat jumlah page views, users dalam kurun tanggal tertentu.

Selain tanggal, dengan Google Analytics kita juga bisa mengetahui statistik browser pengguna yang mengakses website kita. Hal ini tentu saja bisa sangat berguna untuk mengetahui browser mana yang paling sering digunakan. Sebagai contoh seperti kita ketahui, desain sebuah website terkadang berbeda antara browser yang satu dengan yang lain. Dengan ini, kita bisa menentukan desain untuk browser mana yang lebih menjadi prioritas.

HighCharts

Pada artikel kali ini kita akan tetap menggunakan Highcharts untuk menampilkan chart. Hanya saja kita akan membuat dalam bentuk pie charts untuk kali ini.

Let's Code

Kode intinya masih sama dengan artikel sebelumnya, hanya saja kita menggunakan dimensi yang berbeda untuk kali ini. Untuk menampilkan statistik browser kita harus menggunakan ga:browser sebagai dimensi yang akan digunakan.

$service = new Google_Service_Analytics($client);
$params = array('dimensions' => 'ga:browser');
$data_ga = $service->data_ga->get("ga:GOOGLE_ANALYTICS_CODE", date('Y-m-d', strtotime('today - 10 days')), date("Y-m-d"), "ga:users", $params);

Seperti artikel sebelumnya, pada dasarnya semua inti kodenya sama. Hanya saja kita perlu mengolah datanya saja sesuai dengan format dari Highcharts. Untuk menampilkan dalam bentuk Pie Charts, format data series yang diperlukan adalah seperti ini:

series: [{
	data: [
		{
			"name":"Browser Name",
			"y":value
		},
		{
			"name":"Another Browser",
			"y":value
		}
	]
}]

Untuk mengolah data_ga dengan format tersebut kita bisa menggunakan kode ini:

$data = [];
foreach ($data_ga->getRows() as $row) {
	$data[] = [
		'name' => $row[0],
		'y' => (int)$row[1]
	];
}

Kode Lengkap

<html>
	<head>
		<title>Google Analytics Chart</title>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>		
		<script src="https://code.highcharts.com/highcharts.js"></script>
	</head>
	<body>
		<?php
		include_once __DIR__ . '/vendor/autoload.php';
		putenv('GOOGLE_APPLICATION_CREDENTIALS=JSON_KEY.json');
		$client = new Google_Client();
		$client->useApplicationDefaultCredentials();
		$client->setApplicationName("Lab-Informatika");
		$client->setScopes(['https://www.googleapis.com/auth/analytics.readonly']);
		$service = new Google_Service_Analytics($client);
		$params = array('dimensions' => 'ga:browser');
		$data_ga = $service->data_ga->get("ga:GOOGLE_ANALYTICS_ID", date('Y-m-d', strtotime('today - 10 days')), date("Y-m-d"), "ga:users", $params);
		$data = [];
		foreach ($data_ga->getRows() as $row) {
			$data[] = [
				'name' => $row[0],
				'y' => (int)$row[1]
			];
		}
		?>
		<script type="text/javascript">
		$(function () {
		    $('#container').highcharts({
		        chart: {
		            plotBackgroundColor: null,
		            plotBorderWidth: null,
		            plotShadow: false,
		            type: 'pie'
		        },
		        title: {
		            text: 'Browser Report'
		        },
		        plotOptions: {
		            pie: {
		                allowPointSelect: true,
		                cursor: 'pointer',
		                dataLabels: {
		                    enabled: true
		                }
		            }
		        },
		        series: [{
		            name: "Browser",
		            colorByPoint: true,
		            data: <?= json_encode($data) ?>
		        }]
		    });
		});
		</script>
		<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
	</body>
</html>

Computer science education cannot make anybody an expert programmer any more than studying brushes and pigment can make somebody an expert painter

– Eric S. Raymond

Have a better explanation?

If you have comments about this post. Please write your comments below

No comments associated with this article