Membuat Dashboard Google Analytics

 Author : hadinug, 12 April, 2014, Komentar


Di tutorial sebelumnya kami telah menuliskan sedikit informasi tentang bagaimana membuat dashboard google analytics untuk simulasi pengunjung. Kemudian kami juga telah membuat sebuah tool versi indonesi untuk google analytic query explorer yang diharapkan nantinya memudahkan para pengembang dalam membuat aplikasi berbasis API Google Analytics.



Nah kali ini, sesuai dengan permintaan para pembaca, kami akan membuat tutorial yang lebih detil, step by step membuat dahshboard google analytic sederhana. So bagaimana kita memulai?, cara terbaik adalah langsung coba, ATM, "amati", "tiru" dan modifikasi.


Mendapatkan  API-KEY google Developer




Tahap pertama yang harus dilalui adalah dengan mendaftarkan diri sebagai developer di google. Kunjungi website https://code.google.com/ kemudian buat projek baru di https://code.google.com/apis/console/, kami lebih menyarankan untuk menggunakan tampilan lama google console https://code.google.com/apis/console/b/0/?noredirect. Nah disana silahkan buat projek baru




Setelah mendapatkan google API key dan client ID, mari kita masuk ketahap yang selanjutnya.


ga-dash1.0.js

Download library google analytics dashboard yang nantinya akan kita gunakan untuk authorize user dan menampilkan grafik dengan google visualization [link download]. Setelah selesai, kita masuk ke tahap implementasi ke kode HTML dan javascript.


Implementasi

Buat sebuah projek di komputer anda dan buat mirip strktur folder dan file seperti pada gambar berikut:




Index.php 

Di index.php kita akan menambahkan beberapa script dan kode yang nantinya akan kita jadikan sebagai halaman yang menampilkan dashboard GA anda. 


<p>
    Range Tanggal Dalam 1 bulan <input type="text" readonly="true" name="start-date" id="start-date" value="<?php echo date("Y-m-d", strtotime("-1 month")); ?>">
    hingga <input type="text" name="start-date" readonly="true" id="end-date" value="<?php echo date("Y-m-d", strtotime("now")); ?>">
</p>   
<p>
    Enter your Profile ID: <input type="text" id="profileId" placeholder="ga:xxx" value="<?php echo isset($_GET['ga']) ? $_GET['ga'] : '' ?>">
    (Format ga:xxx dimana xxx adalah profile ID gogle analytic mu!)
</p>
<p>
    <button onclick="renderGraph('maps');">Maps</button>&nbsp;
    <button onclick="renderGraph('visits');">Visit</button>&nbsp;
    <button onclick="renderGraph('visitor');">Visitor</button>&nbsp;
    <button onclick="renderGraph('vs');">New Vs Returning</button>&nbsp; 
    <button onclick="renderGraph('bouncerate');">BounceRate</button>&nbsp;
    <button onclick="renderGraph('browser');">Browser</button><br>
</p>


Load Js Library

Dilangkah awal kami meminta anda untuk mendownload library ga-dash1.0.js yang nantinya akan kita letakan pada index.php


<script type="text/javascript" src="js/jquery.min.1.7.2.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="https://apis.google.com/js/client.js?onload=gadashInit"></script>


Configuration

Nah disini kita akan memberikan nilai konfigurasi berupa API KEY dan Cliend ID, dari akun google developer yang sebelumnya anda buat


<script type="text/javascript">
    gadash.configKeys({
        'apiKey': 'xxxxxxxxxxxxxxxxxxxxxxxxxxx',
        'clientId': 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx'
    });
</script>


visuallization.js

Buat file js dengan nama visuallization.js seperti yang terlihat pada struktur folder gambar diatas. dan isi kan kode berikut


Configuration - js dashboard

Hal ini kita perlukan untuk mendapatkan nilai dari GA profile ID dan range waktu yang digunakan untuk menampilkan informasi. Lihat query explorer GA yang sebelumnya kami buat untuk lebih mengenal property-property yang dibutuhkan


var start_date = $('input#start-date').val();
var to_date = $('input#end-date').val();

// define base configuration
var baseConfig = {
    'query': {
        'start-date': start_date,
        'end-date': to_date
    }
};


visitor

Menampilkan data visitor GA dalam range waktu


// visitor
var Visitor = new gadash.Chart();
var cVisitor = {
    'type': 'LineChart',
    'divContainer': 'newvisitor',
    'query': {
        'metrics': 'ga:visitors',
        'dimensions': 'ga:date'
    },
    'chartOptions': {
        height: '350',
        isStacked: true,
        legend: {position: 'none'}
    }
};


Visits

Menampilkan jumlah kunjungan GA dalam range waktu


// new visit
var newVisits = new gadash.Chart();
var cVisit = {
    'type': 'LineChart',
    'divContainer': 'visits',
    'query': {
        'metrics': 'ga:newVisits',
        'dimensions': 'ga:date'
    },
    'chartOptions': {
        height: '350',
        isStacked: true,
        legend: {position: 'none'}
    }
};


Maps

Menampilkan negara yang berkunjung


// maps
google.load('visualization', '1', {'packages': ['geochart']});
var mapChart = new gadash.Chart();
var mapConfig = {
    'divContainer': 'mapChart',
    'query': {
        'metrics': 'ga:visitors',
        'dimensions': 'ga:country',
        'sort': '-ga:visitors'
    },
    'chartOptions': {
        height: '250',
        cureType: 'function',
        legend: {position: 'none'}
    },
    'onSuccess': function(resp) {
        var myMaps = new Array();
        myMaps['0'] = ['Country', 'Visit'];
        for (i = 0; i < resp.rows.length; i++) {
            dstring = resp.rows[i];
            myMaps[i + 1] = [dstring['0'], parseInt(dstring['1'])];
        }
        var data = google.visualization.arrayToDataTable(
                myMaps
                );

        var options = {
            colorAxis: {colors: ['#a9dff3', '#4d90fe']},
            'tooltip.trigger': 'focus'
        };

        var chart = new google.visualization.GeoChart(document.getElementById('mapchart'));
        chart.draw(data, options);
    }
};


Browser

Menampikan browser yang digunakan untuk mengakses website


// browser user
var browser = new gadash.Chart();
var cbrowser = {
    'type': 'Table',
    'divContainer': 'browser',
    'query': {
        'metrics': 'ga:visits,ga:pageviewsPerVisit',
        'dimensions': 'ga:browser',
        'sort': '-ga:visits',
        'max-results': '6'
    },
    'onSuccess': function(response) {
        var myLang = new Array();
        var offset = '1';
        myLang['0'] = ['Browser', 'Visits', 'Page / Visit'];
        for (i = 0; i < response.rows.length; i++) {
            dstring = response.rows[i];
            myLang[i + 1] = [parseInt(offset) + parseInt(i) + '. ' + dstring['0'], dstring['1'], parseFloat(dstring['2']).toFixed(2)];
        }
        var data = google.visualization.arrayToDataTable(
                myLang
                );
        var option = {
            'width': '100%',
            'cssClassNames': {headerRow: 'ga-tr', oddTableRow: 'ga-tr-odd', tableCell: 'ga-td'}
        };

        var table = new google.visualization.Table(document.getElementById('browser'));
        table.draw(data, option);
    }
};


New Vs Returning

Menampilkan jumlah visitor baru dan visitor yang kembali


// new vs returning
var pChart = new gadash.Chart();
var pConfig = {
    'query': {
        'metrics': 'ga:visits',
        'dimensions': 'ga:visitorType'
    }
    , 'onSuccess': function(resp) {
        var myPie = new Array();
        myPie['0'] = ['Caption', 'Total'];
        for (i = 0; i < resp.rows.length; i++) {
            dstring = resp.rows[i];
            myPie[i + 1] = [dstring['0'], parseInt(dstring['1'])];
        }
        var data = google.visualization.arrayToDataTable(
                myPie
                );
        var opt = {
            width: '100%',
            legend: 'top'
        };
        new google.visualization.PieChart(document.getElementById('newreturning')).draw(data, opt);
    }
};


Keterangan kode javascript

QUERY

Merupakan obyek yang menentukan query untuk GA API. Objek query harus berisi parameter ids, start-date, end-date, metrics. Parameter berikutnya adalah opsional: dimensi, filter, max-results, segmen, start-index. Start-date dan end-date harus berupa String dalam bentuk yyyy-MM-dd. Contoh query berikut akan mengembalikan jumlah pengunjung untuk setiap hari dari tanggal 1 Januari 2014 sampai 31 Januari 2014 


query: {
   'ids': 'ga: xxxx', 
   'metrics': 'ga: visitors', 
   'start-date': '2014-01-01 ', 
   'end-date': '2014-01-30 ', 
   'dimentions': 'ga: date' 
}


Jika anda belum paham, tanyakan ke kami, silahkan download source lengkapnya disini dan demo aplikainya disini. Jika anda suka dengan tutorial dari kami, silahkan bantu untuk di share ke yang lain!.


 
Bagikan halaman ke sosial media
 
Tags :   google analytics    googleApi    Google       

Tentang Penulis

writer hadinug
Web Developer di PT. Yafii Solusi Internasional

Link: http://ysi.co.id

   Komentar Anda