Integrasi Google Analytics di Laravel dengan Laravel Analytics Package
Tags: tutorials
Published: 2023-07-09 09:39:26

---
title: Integrasi Google Analytics di Laravel dengan Laravel Analytics Package
published: true
date: 2023-06-23 22:44:45 UTC
tags: Tutorials
canonical_url: https://divisidev.com/post/laravel-analytics-package
---

 **Laravel Analytics** - Halo sobat Dev 👋 kita jumpa lagi di seri tutorial penggunaan package di laravel. Package yang akan kita coba implementasikan kali ini yaitu Laravel Analytics dari Spatie yang berfungsi untuk membantu atau memudahkan kita dalam mendapatkan data dari google analytics dan menampilkannya pada laravel project. Pada seri artikel ini akan coba saya jelaskan step by step mulai dari membuat project di Google Cloud Platform, mengaktifkan library " **Google Analytics Data API**" pada project, menambahkan user pada property google analytics sampai implementasi laravel analytics package di Laravel. 🚀

## Table of Contents

- [Google Analytics](#mcetoc_1h3lueri31m8)
  - [Google Cloud Platform](#mcetoc_1h3lueri31ma)
  - [Mendapatkan Property ID](#mcetoc_1h3lueri31m9)
  - [Tambah User Google Analytics](#mcetoc_1h3lueri31mb)
- [Integrasi Google Analytics di Laravel](#mcetoc_1h3lueri31mc)
  - [Install Laravel](#mcetoc_1h3lueri31md)
  - [Install Laravel Analytics Package](#mcetoc_1h3m24734lm)
  - [Buat DashboardController](#mcetoc_1h3lueri31me)
  - [Setup Route](#mcetoc_1h3lum14b8)
  - [Buat View](#mcetoc_1h3lueri31mf)
- [Kesimpulan](#mcetoc_1h3lueri31mg)

## Google Analytics

Google Analytics merupakan sebuah layanan gratis dari Google yang berfungsi untuk menampilkan statistik pengunjung pada sebuah website. Google Analytics biasa digunakan oleh pada pemilik website untuk menganalisa kinerja website berdasarkan data-data statistik yang ditampilkannya.

### Google Cloud Platform

Hal pertama yang perlu kita lakukan adalah mendapatkan beberapa credential untuk menggunakan Google API. Disini saya asumsikan temen-temen sudah mempunyai akun google dan sudah masuk dengan akun google tersebut. Silakan buka situs [Google API](https://console.developers.google.com/apis "https://console.developers.google.com/apis"), pilih project jika kalian sudah punya project atau buat project baru jika kalian belum pernah membuat project di situs Google API. ([https://console.developers.google.com/apis](https://console.developers.google.com/apis "https://console.developers.google.com/apis"))

![create a project](https://divisidev.com/storage/photos/1/laravel-analytics/google%20api%20-%20create%20project%201.PNG)

Klik **New Project** untuk membuat project baru.

![create a project](https://divisidev.com/storage/photos/1/laravel-analytics/google%20api%20-%20create%20project%202.PNG)

Isi field **project name** , kemudian klik **Create**.

![create a project](https://divisidev.com/storage/photos/1/laravel-analytics/google%20api%20-%20create%20project%203.PNG)

Selanjutnya, kita perlu menentukan API mana saja yang akan digunakan di project kita dengan masuk ke menu **Library**.

![enable library](https://divisidev.com/storage/photos/1/laravel-analytics/google%20api%20-%20enable%20library%201.PNG)

Cari " **Google Analytics Data API**", klik library seperti gambar di bawah ini.

![enable Google Analytics Data API](https://divisidev.com/storage/photos/1/laravel-analytics/google%20api%20-%20enable%20library%202.PNG)

Kemudian, klik **Enable** untuk mengaktifkan library Google Analytics Data API pada project kita.

![Google Analytics Data API](https://divisidev.com/storage/photos/1/laravel-analytics/google%20api%20-%20enable%20library%203.PNG)

Setelah kita membuat project yang memiliki akses ke API Google Analytics, sekarang saatnya mengunduh file dengan credential yang dibutuhkan. Klik menu **Credentials** yang ada di sidebar kemudian klik **+ Create Credentials** dan pilih **Service account**.

![Generate Service account key](https://divisidev.com/storage/photos/1/laravel-analytics/google%20api%20-%20create%20credential.PNG)

Selanjutnya, kita perlu mengisikan field **service account name** seperti pada form di bawah ini. Kalian dapat menamai **service account name** , apapun yang kalian suka. Coba perhatikan **service account id** , di situ terdapat alamat email dan email tersebut akan kita gunakan dalam proses integrasi data google analytics di laravel.

![Service account key](https://divisidev.com/storage/photos/1/laravel-analytics/google%20api%20-%20create%20credential%202.PNG)

Oke. Setelah service account berhasil dibuat, silakan klik detail dari service account tersebut. Klik tab " **Keys**", lalu klik dropdown button **Add Key** dan pilih **Create new key**.

![Create new key](https://divisidev.com/storage/photos/1/laravel-analytics/google%20api%20-%20create%20key%201.PNG)

Pilih key type " **JSON**" dan klik **create** untuk download file JSON.

![Create new key](https://divisidev.com/storage/photos/1/laravel-analytics/google%20api%20-%20create%20key%202.PNG)

Simpan file JSON yang baru saja didownload tersebut di dalam laravel project temen-temen di lokasi yang telah ditentukan dalam key `service_account_credentials_json` dari file config laravel analytics package ( **config/analytics.php** ).

### Mendapatkan Property ID

Oke, selanjutnya saya juga berasumsi bahwa kalian telah membuat akun google analytics dan menggunakan property GA4 atau yang terbaru. Pertama, kita perlu mengetahui property\_id dari property analytics yang digunakan. Cara mengetahuinya sangat mudah yaitu dengan masuk ke halaman **Settings > Property Settings**. Di halaman ini, kalian dapat menyalin value PROPERTY ID dari property analytics temen-temen. Nanti, kita akan menggunakan value PROPERTY ID ini untuk key **ANALYTICS\_PROPERTY\_ID** di file .env.

![Google Analytics Property ID](https://divisidev.com/storage/photos/1/laravel-analytics/analytics_property_id.PNG)

### Tambah User Google Analytics

Selanjutnya, kita perlu memberikan akses ke service account yang telah kita buat di step sebelumnya.  Klik menu Admin yang ada di sidebar (pojok kiri bawah), lalu buka menu "Property Access Management".

![Granting permissions to your Analytics property](https://divisidev.com/storage/photos/1/laravel-analytics/property%20access%20management%201.PNG)

Klik icon atau tanda tambah di pojok kanan atas dan klik **Add users** untuk menambahkan user baru.

![Add User to your Analytics property](https://divisidev.com/storage/photos/1/laravel-analytics/property%20access%20management%202.PNG)

Di step ini, kalian dapat memberikan akses ke alamat email yang bisa ditemukan pada key client\_email dari file json yang telah kita unduh di langkah sebelumnya. Pilih role **Analyst** dan klik **Add**.

![add analyst user to your Analytics property](https://divisidev.com/storage/photos/1/laravel-analytics/property%20access%20management%203.PNG)

## Integrasi Google Analytics di Laravel

Setelah selesai dengan setup Google API, sekarang saya akan langsung mengajak temen-temen ke koding. Di tahap ini akan saya jelaskan step by step bagaimana cara mendapatkan data dari google analytics dan menampilkannya pada laravel project dengan menggunakan laravel analytics package. 🚀 

### Install Laravel

Langkah awal yang saya jelaskan disini, dimulai dari install fresh laravel project menggunakan laravel installer dengan perintah seperti di bawah ini.

```
laravel new laravel-analytics
```

### Install Laravel Analytics Package

Sudah berhasil install laravel? kita lanjutkan dengan menginstall package yang akan kita gunakan dalam project ini yaitu laravel analytics dari Spatie. Silakan jalankan perintah seperti di bawah ini untuk menginstall laravel analytics package di laravel project kita.

```
composer require spatie/laravel-analytics
```

Kemudian kita publish analytics config file pada laravel analytics package dengan perintah di bawah ini.

```
php artisan vendor:publish --tag="analytics-config"
```

Buka file config/analytics.php. Coba perhatikan pada key di bawah ini. Key service\_account\_credentials\_json ini merupakah path dari file json yang telah kita unduh pada step sebelumnya. Jadi, file json yang telah diunduh tadi bisa kita rename menjadi service-account-credentials.json dan letakkan pada direktori storage/app/analytics.

```
'service_account_credentials_json' => storage_path('app/analytics/service-account-credentials.json'),
```

Selanjutnya, tambahkan key ANALYTICS\_PROPERTY\_ID pada file .env. Copy PROPERTY ID yang terdapat pada akun google analytics (Settings > Property Settings) dan paste pada key di file .env tersebut.

```
ANALYTICS_PROPERTY_ID=xxxxxxxxx
```

### Buat DashboardController

Disini saya akan memberikan contoh penggunaan laravel analytics package ini pada controller. Untuk itu, kita perlu membuat controller baru (Single Action Controllers) dengan menjalankan perintah seperti di bawah ini.

```
php artisan make:controller DashboardController -i
```

Buka file DashboardController, lalu sesuaikan kode yang ada atau ubah menjadi seperti di bawah ini. Disini kita akan menggunakan method-method yang memang telah disediakan oleh laravel analytics package ini, seperti; Visitors and page views, Total visitors and pageviews, Most visited pages, Top referrers, User Types dan Top browsers.

```
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Spatie\Analytics\Period;
use Analytics;
class DashboardController extends Controller
{
    public function __invoke(Request $request)
    {
        $visitorsAndPageViews = Analytics::fetchVisitorsAndPageViews(Period::days(7));
        $totalVisitorsAndPageViews = Analytics::fetchTotalVisitorsAndPageViews(Period::days(7));
        $mostVisitedPages = Analytics::fetchMostVisitedPages(Period::days(7));
        $topReferrers = Analytics::fetchTopReferrers(Period::days(7));
        $userTypes = Analytics::fetchUserTypes(Period::days(7));
        $topBrowsers = Analytics::fetchTopBrowsers(Period::days(7));
        
        return view('welcome', compact('visitorsAndPageViews', 'totalVisitorsAndPageViews', 'mostVisitedPages', 'topReferrers', 'userTypes', 'topBrowsers'));
    }
}
```

### Setup Route

Oke, next kita pindah ke routes/web.php. Ganti default route seperti di bawah ini.

```
Route::get('/', function () {
    return view('welcome');
});
```

Ganti default route dari laravel dengan route baru yang mengarah ke DashboardController seperti di bawah ini.

```
Route::get('/', App\Http\Controllers\DashboardController::class);
```

### Buat View

Langkah terakhir yaitu setup view. Buka file welcome.blade.php, kemudian ubah menjadi seperti di bawah ini. Disini kita menggunakan class table dari bootstrap untuk menampilkan data-data yang telah diambil dari Google Analytics menggunakan laravel analytics package.

```
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>
            How to Integrate Google Analytics in Laravel
        </title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    </head>
    <body>
        <div class="container py-5">
            <div class="row">
                <h2 class="fs-4 fw-bold text-center mb-5">
                    How to Integrate Google Analytics in Laravel
                </h2>
                <div class="col-md-12">
                    <div class="card mb-3">
                        <div class="card-header">
                            <h2 class="fs-5 fw-bold">
                                Visitors and Page Views
                            </h2>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th style="width: 5%">No.</th>
                                            <th style="width: 65%">Page</th>
                                            <th style="width: 15%">Active Users</th>
                                            <th style="width: 15%">Page views</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($visitorsAndPageViews as $key => $data)
                                        <tr>
                                            <td>{{ ++$key }}</td>
                                            <td>{{ $data['pageTitle'] }}</td>
                                            <td>{{ $data['activeUsers'] }}</td>
                                            <td>{{ $data['screenPageViews'] }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="card mb-3">
                        <div class="card-header">
                            <h2 class="fs-5 fw-bold">
                                Total Visitors and Pageviews
                            </h2>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th style="width: 5%">No.</th>
                                            <th style="width: 65%">Date</th>
                                            <th style="width: 15%">Active Users</th>
                                            <th style="width: 15%">Page views</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($totalVisitorsAndPageViews as $key => $data)
                                        <tr>
                                            <td>{{ ++$key }}</td>
                                            <td>{{ $data['date'] }}</td>
                                            <td>{{ $data['activeUsers'] }}</td>
                                            <td>{{ $data['screenPageViews'] }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="card mb-3">
                        <div class="card-header">
                            <h2 class="fs-5 fw-bold">
                                Most Visited Pages
                            </h2>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th style="width: 5%">No.</th>
                                            <th style="width: 45%">Page</th>
                                            <th style="width: 35%">URL</th>
                                            <th style="width: 15%">Page views</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($mostVisitedPages as $key => $data)
                                        <tr>
                                            <td>{{ ++$key }}</td>
                                            <td>{{ $data['pageTitle'] }}</td>
                                            <td>{{ $data['fullPageUrl'] }}</td>
                                            <td>{{ $data['screenPageViews'] }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="card mb-3">
                        <div class="card-header">
                            <h2 class="fs-5 fw-bold">
                                Top Referrers
                            </h2>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th style="width: 5%">No.</th>
                                            <th style="width: 65%">Page Referrer</th>
                                            <th style="width: 30%">Page views</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($topReferrers as $key => $data)
                                        <tr>
                                            <td>{{ ++$key }}</td>
                                            <td>{{ $data['pageReferrer'] }}</td>
                                            <td>{{ $data['screenPageViews'] }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="card mb-3">
                        <div class="card-header">
                            <h2 class="fs-5 fw-bold">
                                User Types
                            </h2>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th style="width: 5%">No.</th>
                                            <th style="width: 65%">Type</th>
                                            <th style="width: 30%">Active Users</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($userTypes as $key => $data)
                                        <tr>
                                            <td>{{ ++$key }}</td>
                                            <td>{{ $data['newVsReturning'] }}</td>
                                            <td>{{ $data['activeUsers'] }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="card mb-3">
                        <div class="card-header">
                            <h2 class="fs-5 fw-bold">
                                Top Browsers
                            </h2>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th style="width: 5%">No.</th>
                                            <th style="width: 65%">Browser</th>
                                            <th style="width: 30%">Page Views</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($topBrowsers as $key => $data)
                                        <tr>
                                            <td>{{ ++$key }}</td>
                                            <td>{{ $data['browser'] }}</td>
                                            <td>{{ $data['screenPageViews'] }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
```

## Kesimpulan

Setelah semua langkah-langkah di atas sudah dikerjakan, maka sekarang waktunya untuk testing, apakah data-data dari google analytics sudah bisa ditampilkan di laravel app atau belum. Silakan jalankan laravel project kalian, kemudian buka pada browser.

![integrate google analytics in laravel](https://divisidev.com/storage/photos/1/laravel-analytics/result.PNG)

Jika berhasil, maka tampilannya kurang lebih akan seperti gambar di atas. Gambar di atas merupakan contoh hasil dari method perbandingan total visitors dan page views. Jika kalian baru saja membuat akun google analytics, mungkin data-datanya tidak akan langsung keluar. Kalian perlu menunggunya sekitar 24 jam atau lebih.

Demikianlah artikel tentang laravel analytics package. Dari sini dapat kita simpulkan bahwa dengan adanya laravel analytics package ini dapat memudahkan kita dalam mengintegrasikan google analytics di laravel project kita, sehingga kita tidak perlu lagi membuat situs google analytics untuk mengetahui data kunjungan pada website kita. Kita bisa menganalisa website kita hanya dari dashboard website atau sistem kita sendiri.

Semoga artikel ini bisa bermanfaat dan bisa membantu teman-teman dalam mengintegrasikan google analytics di laravel project kalian. Sampai jumpa di artikel berikutnya dan Happy Coding 👋

 

**Full Documentation: [Laravel Analytics](https://github.com/spatie/laravel-analytics "Laravel Analytics")**

**Credit: [Data illustrations by Storyset](https://storyset.com/data "Data illustrations by Storyset")**