Membuat Dashboard Google Analitycs Dengan Google API

31 Dec, 2020 | Ditulis oleh : Fadlur Rohman

Rekomendasi Kelas
Membangun Toko Online Menggunakan Laravel

Laravel adalah salah framework php dengan pengguna terbanyak. Dengan banyaknya pengguna otomatis ketika kita menghadapi error akan lebih mudah menemukan solusin...

Untuk mengakses layanan google analitycs tanpa perlu repot-repot buka google.com/analytics/ bisa kita lakukan dengan membuat simple dashboard di web kita sendiri. Langkah-langkahnya cukup simple. Buat aja file yang akan kita gunakan sebagai halaman dashboard.

Langkah pertama : Load the Embed API library

<script>
(function(w,d,s,g,js,fs){
  g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(f){this.q.push(f);}};
  js=d.createElement(s);fs=d.getElementsByTagName(s)[0];
  js.src='https://apis.google.com/js/platform.js';
  fs.parentNode.insertBefore(js,fs);js.onload=function(){g.load('analytics');};
}(window,document,'script'));
</script>

Langkah kedua : Buat <div> untuk menampung komponen dashboard.

<div id="embed-api-auth-container"></div>
<div id="chart-container"></div>
<div id="view-selector-container"></div>

Langkah ketiga : tambahkan dashboard code (Client ID dapat dibuat dengan mengikuti langkahnya).

<script>

gapi.analytics.ready(function() {

  /**
   * Authorize the user immediately if the user has already granted access.
   * If no access has been created, render an authorize button inside the
   * element with the ID "embed-api-auth-container".
   */
  gapi.analytics.auth.authorize({
    container: 'embed-api-auth-container',
    clientid: 'REPLACE WITH YOUR CLIENT ID'
  });


  /**
   * Create a new ViewSelector instance to be rendered inside of an
   * element with the id "view-selector-container".
   */
  var viewSelector = new gapi.analytics.ViewSelector({
    container: 'view-selector-container'
  });

  // Render the view selector to the page.
  viewSelector.execute();


  /**
   * Create a new DataChart instance with the given query parameters
   * and Google chart options. It will be rendered inside an element
   * with the id "chart-container".
   */
  var dataChart = new gapi.analytics.googleCharts.DataChart({
    query: {
      metrics: 'ga:sessions',
      dimensions: 'ga:date',
      'start-date': '30daysAgo',
      'end-date': 'yesterday'
    },
    chart: {
      container: 'chart-container',
      type: 'LINE',
      options: {
        width: '100%'
      }
    }
  });


  /**
   * Render the dataChart on the page whenever a new view is selected.
   */
  viewSelector.on('change', function(ids) {
    dataChart.set({query: {ids: ids}}).execute();
  });

});
</script>

Untuk membuat dashboard google analitycs yang lebih komplek bisa mencoba langkah-langkahnya di ga-dev-tools.appspot.com/embed-api/
Selamat mencoba dan semoga bermanfaat.




Related Post :

Mengatasi Unable to Load VirtualBox Engine di Genymotion

31 Dec, 2020 - Fadlur Rohman

Error unable to load virtualbox engine di&nbsp;genymotion&nbsp;sering...

Install Apache, MySQL, PHP dan phpmyadmin

31 Dec, 2020 - Fadlur Rohman

Saat kita akan mencoba membuat sebuah aplikasi web, dibutuhkan server...

Install Atom Text Editor di Ubuntu 32 bit dan 64 bit

31 Dec, 2020 - Fadlur Rohman

Setelah sekian lama menggunakan sublime text sebagai text editor untuk...

Membuat Dashboard Google Analitycs Dengan Google API

31 Dec, 2020 - Fadlur Rohman

Untuk mengakses layanan google analitycs tanpa perlu repot-repot buka&...

Cara Biar Android Studio Gak Ngabisin RAM

31 Dec, 2020 - Fadlur Rohman

Setelah kemarin abis nginstall android studio dan genymotion, kayaknya...

Install Genymotion Android Emulator

31 Dec, 2020 - Fadlur Rohman

Abis install android studio, salah satu yang dibutuhkan adalah emulato...

Mau Bikin Aplikasi Web & Aplikasi Android?

Saya membuka jasa pembuatan aplikasi web dan android untuk aplikasi seperti toko online, monitoring (IoT), interface mesin absensi atau kasir

Silahkan kontak link di bawah ini untuk teknis dan harganya