Menampilkan laporan Google Analytics dalam bentuk chart

alfa6661
- December 30, 2015
0 (0 votes)
Rate :
Cara Menampilkan laporan Google Analytics dalam bentuk chart

Pada artikel kali ini akan dibahas bagaimana menampilkan laporan Google Analytics dalam bentuk chart. Jika anda belum memahami bagaimana cara menampilkan hasil Google Analytics silahkan baca artikel Mendapatkan google Analytics report dengan PHP menggunakan Google API 2.0 terlebih dahulu.

HighCharts

Library chart yang akan digunakan pada tutorial kali ini adalah Highcharts. Jadi silahkan download terlebih dahulu atau kita bisa langsung menggunakan library highchart melalui CDN.

Let's Code

Pertama-tama kita perlu memastikan kita memanggil library jQuery dan Highcharts pada halaman HTML kita.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

Pada dasarnya kode yang digunakan hampir sama dengan artikel sebelumnya, hanya saja kita akan mengolah lebih spesifik lagi datanya. Kita hanya perlu mengolah data agar sesuai dengan format yang diperlukan untuk menampilkan chart. Format data untuk highcharts kurang lebih seperti ini:

series: [
	{
		"name":"series name",
		"data":array_of_data
	},
	{
		"name":"another series",
		"data":array_of_data
	}
]

Series name harus kita isi dengan nilai metrics google analytics (sessions, pageviews, dll), kemudian data adalah nilai hasil dari Google Analytics. Jadi kurang lebih data yang harus kita hasilkan adalah seperti ini:

series: [
	{
		"name":"ga:sessions",
		"data":[1,2,3,4,..]
	},
	{
		"name":"ga:pageviews",
		"data":[1,2,3,4,..]
	}
]

Pada contoh kali ini kita akan menambahkan beberapa metrics untuk di tampilkan, antara lain:

  1. ga:sessions
  2. ga:pageviews
  3. ga:bounces
  4. ga:users
  5. ga:percentNewSession

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:date');
$data_ga = $service->data_ga->get("ga:GOOGLE_ANALYTICS_ID", date('Y-m-d', strtotime('today - 10 days')), date("Y-m-d"), "ga:sessions,ga:pageviews,ga:bounces,ga:users,ga:percentNewSessions", $params);

Sampai sini kita sudah bisa mendapatkan hasil analytics dengan mengakses variable $data_ga. Seperti yang dikatakan sebelumnya, kita perlu mengolah hasil analytics kedalam format yang diperlukan oleh Highcharts.

$header = [];
foreach($data_ga->getColumnHeaders() as $columnHeader) {
	$header[] = $columnHeader['name'];
}
$data = [];
foreach ($data_ga->getRows() as $row) {
	foreach ($header as $k => $h) {
		$data[$h][] = $row[$k];
	}
}		
$date = array_values($data)[0]; // diperlukan untuk xAxis - categories
unset($data[array_keys($data)[0]]);		
$series = []; // untuk data series
foreach ($data as $k => $v) {
	$series[] = [
		'name' => $k,
		'data' => array_map('intval', $v)
	];
}

Selanjutnya kita perlu menyiapkan 1 buah container HTML untuk menampilkan chart.

<script type="text/javascript">
$(function () {
    $('#container').highcharts({
        title: {
            text: 'Google Analytics Report',
            x: -20
        },
        xAxis: {
            categories: <?= json_encode($date) ?>
        },
        yAxis: {
            title: {
                text: 'Total'
            }
        },
        series: <?= json_encode($series) ?>
    });
});
</script>
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>

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:date');
		$data_ga = $service->data_ga->get("ga:GOOGLE_ANALYTICS_ID", date('Y-m-d', strtotime('today - 10 days')), date("Y-m-d"), "ga:sessions,ga:pageviews,ga:bounces,ga:users,ga:percentNewSessions", $params);
		$header = [];
		foreach($data_ga->getColumnHeaders() as $columnHeader) {
			$header[] = $columnHeader['name'];
		}
		$data = [];
		foreach ($data_ga->getRows() as $row) {
			foreach ($header as $k => $h) {
				$data[$h][] = $row[$k];
			}
		}		
		$date = array_values($data)[0];
		unset($data[array_keys($data)[0]]);		
		$series = [];
		foreach ($data as $k => $v) {
			$series[] = [
				'name' => $k,
				'data' => array_map('intval', $v)
			];
		}
		?>
		<script type="text/javascript">
		$(function () {
		    $('#container').highcharts({
		        title: {
		            text: 'Google Analytics Report',
		            x: -20
		        },
		        xAxis: {
		            categories: <?= json_encode($date) ?>
		        },
		        yAxis: {
		            title: {
		                text: 'Total'
		            }
		        },
		        series: <?= json_encode($series) ?>
		    });
		});
		</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